js_DOM操作
Posted xiao_style
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js_DOM操作相关的知识，希望对你有一定的参考价值。
嗯，大过年的上次更新应该还是在，大年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操作的主要内容，如果未能解决你的问题，请参考以下文章