嗯，大过年的上次更新应该还是在，大年30前一天，说好的一天更一篇，感觉食言了，虽然没有更，但是，每天还是坚持在学习的，所以今天的任务就是把这几天学的都发上来。

博客，我觉得不仅仅是交流知识的地方，我宁愿把它写成我的生活日记。有差的，欢迎拍砖。

好了，进入正题吧。

DOM操作，我觉得可以归结成三个，一个标签节点，一个属性节点，一个文本节点。

这里的

li 就是标签节点；

alt就是属性节点；

第一个是文本节点（不是alt里面的）；

接下来我将分别用两个例子来解释，这三个点。

我先把html放上来：

<body>

		<ul>

			<li alt="第一个">第一个</li>

			<li>第二个<br />换行了</li>

			<li>第三个</li>

		</ul>

		<!--<uL id="father"><li>第四个</li><li>第五个</li><li id="tt">第六个</li></uL> 这里我把叠起来，跟下面等会的操作是有区别的-->

		<uL id="father">

			<li>第四个</li>

			<li>第五个</li>

			<li id="tt">第六个</li>

		</uL>

		<button id="dd">点击获取第六个内容</button>

	</body>

标签节点：

window.onload = function(){

			var a = document.getElementById("dd");/*这里就是获取标签节点，获取button按钮，我这里是通过Id，还有其他很多方式，注意一点其他的是类数组*/

			a.onclick = function(){/*点击事件*/

				var d = document.getElementById("tt").childNodes[0].nodeValue;/*得到含有id=“tt”的标签,然后他的字节点，看html，只有“第六个”这几个字，这就是文本节点，nodeValue这个就是其所含的内容*/

				alert(d);/*输出，注意我这里文本节点稍微带了一下*/

			}

                        var por = document.getElementsByTagName("li")/*这是通过标签选择器，得到li标签数组，赋值给por*/

			alert(por.length+" "+por[0].tagName+" "+por[1].childNodes[1].nodeName);/*输出，得到，por[]数组长度，第一个li标签的名字，第二个li的文本节点的内容*/

　　

属性节点,文本节点:

                   /*得到节点*/
                   var first = document.getElementsByTagName("li")[0];/*标签选择器得到第一个li标签*/

		   console.log(first.getAttribute("alt"));/*getAttribute（）方法就是得到目标对象的（里面属性）的值*/

		   /*创建节点*/

		   var Pcreate = document.createElement("p");/*创建一个p标签*/

		   var Textcreate = document.createTextNode("我创建了文本节点");/*createTextNode创建文本节点，并赋予内容*/

		   var Attcreate = document.createAttribute("style");/*createAttribute创建属性,创建的属性是style*/

		   Attcreate.value = "color:red";/*赋予属性值*/

		   Pcreate.setAttributeNode(Attcreate);/*setAttributeNode,把创建的属性节点放入创建的p标签里*/

		   Pcreate.appendChild(Textcreate);/*appendchild把创建的文本节点放入p标签里*/

		   document.body.appendChild(Pcreate);/*然后把p标签放入到body*/

　　

js_DOM操作的更多相关文章

  1. JS_DOM操作之常用事件

    1 - onload 事件:加载完成后立即执行 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. JS_DOM操作之操作标签

    <标签名 属性1="属性值1" 属性2="属性值2"-->文本</标签名> 1 - 文本操作 <div class="c ...

  3. JS_DOM操作之绑定事件

    1 - 静态绑定:直接把事件写在标签元素中 <div id="div" onclick="foo(this)">click</div> ...

  4. JS_DOM操作之查找标签

    1 - 直接查找标签 // 方式1:获取元素 document.getElementsByTagName("标签名") document.getElementById(" ...

  5. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  6. Sql Server系列：分区表操作

    1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...

  7. C# ini文件操作【源码下载】

    介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...

  8. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  9. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

随机推荐

  1. 17.4.3 使用MulticastSocket实现多点广播（3）

    上面程序中init()方法里的第一行粗体字代码先创建了一个MulticastSocket对象,由于需要使用该对象接收数据报,所以为该Socket对象设置使用固定端口:第二行粗体字代码将该Socket对 ...

  2. deb安装了些啥？

    http://www.cyberciti.biz/faq/view-contents-of-deb-file/

  3. C# 开发系列(三)

    参考:http://stackoverflow.com/questions/11248935/passing-values-to-a-put-json-request-in-c-sharp 发送htt ...

  4. openstack controller ha测试环境搭建记录（三）——配置haproxy

    haproxy.cfg请备份再编辑:# vi /etc/haproxy/haproxy.cfg global    chroot /var/lib/haproxy    daemon    group ...

  5. IO之同步、异步、阻塞、非阻塞 （2）

    [原创链接: http://www.smithfox.com/?e=191, 转载请保留此声明, 谢谢! ] I/O Model 是一个很大的话题, 也是一个实践性很强的事情, 网上有各种说法和资料, ...

  6. Crazyflie笔记五: CRTP 实时通信协议（一）（转）

    源:Crazyflie笔记五: CRTP 实时通信协议(一) 这里详细介绍了 Crazyflie 的 CRTP实时通信协议的相关内容,由于内容很长,分几篇博文来讲述.这里是第一节内容.欢迎交流:301 ...

  7. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  8. iOS开发 missing iOS distribution signing identity for 。。。

    苹果真是不让人省心,新年一来上传APP,就出现Missing iOS Distribution signing indetity for xxx 于是就把证书删了做,做了删了再重做,还是不行 百度了一 ...

  9. ucos任务优先级从64到256,任务就绪表的改变

    Ucos在任务调度中经常使用的技术为任务就绪表,在之前的文章中使用的例子是低于64个优先级的任务就绪表查找方法,现在ucos将任务扩展到256优先级之后,任务就绪表的查找也做了一定的修改,今天来讲讲 ...

  10. 总结分享十大iOS开发者最喜爱的库 分类： ios相关 app相关 2015-04-03 16:43 320人阅读 评论(0) 收藏

    该10大iOS开发者最喜爱的库由"iOS辅导团队"成员Marcelo Fabri组织投票选举而得,参与者包括开发者团队,iOS辅导团队以及行业嘉宾.每个团队都要根据以下规则选出五个 ...