获取节点元素的几种方法
document.getElementById(""); // 通过元素选出Id选出 document.getElementsByClassName(""); // 通过元素选出class选出 document.getElementsByTagName(""); // 通过元素的标签名选出 document.getElementsByName(""); // 通过元素的name属性的值选出他们都是document里的方法所以前面都有document. 值得一提的时getElement后有s的获取出来的时一个元素的集合，他类似数组，并且有数组的一些属性。 eg
<body> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <script> var a = document.getElementsByTagName("input"); console.log(a); </script> </body> <body> <input type="text" value="1"/> <input type="text" value="2"/> <input type="text" value="3"/> <input type="text" value="4"/> <script> var a = document.getElementsByTagName("input"); console.log(document.getElementsByTagName("input")[1]);// 打印出value="2"的input元素 console.log(a[0]); // 打印出value="1"的input元素 console.log(a.iteam(2)); // 打印出value="3"的input元素 </script> </body>获取的到的元素时document里的对象，既然是对象就会有属性和方法
<body> <input type="text" value="1"/> <input type="text" value="2"/> <input type="text" value="3"/> <input type="text" value="4"/> <script> var a = document.getElementsByTagName("input"); console.log(a[0].value); // 1 console.log(a[1].type); // text console.log(a.iteam(2).value); // 3 console.log(a[3].getAttribute("value")); // 4 attribute：属性 </script> </body>!!! !!!
创建一个属性节点
var attribute = document.createAttibute("style"); console.log(attribute); // style=" " 创建出来的属性节点没有值 ，这个是放到行间的对属性节点赋值
attribute.value = "color:red"; console.log(attribute); // style="color:red"创建元素节点
var element = document.createElement("div");创建文本节点
var textnode = document.createTextNode("文本内容");将文本节点给元素节点
element.appendChilid(text); //没有冒号 console.log(element); //<div>文本内容</div>将属性节点给元素节点
element.getAttributeNode(attribute); console.log(element); // <div style="color:red">文本内容</div>将创建的元素节点放到页面里
var body = document.getElementsByTagName("body")[0];// 获取body元素 body.appendChild(element); // a.appendChild(b)方法会把b元素放到a元素里的最后一位！ ！ ！ 元素节点之间的操作
<body> <div> <p> <i></i> <a></a> </p> <span></span> </div> <script> var a = document.getElementsByTagName("a")[0];// 获取<a></a> var p = doucment.getElementsByTagName("/p")[0]; // 获取<p></p> var span = doucment.getElementsByTagName("span")[0]; // 获取<span></span> console.log(a.parentNode); //<p>……</p> 获取a节点的父节点 console.log(a.parentNode.parentNode); //<div>……</div>获取a节点的父节点的父节点 console.log(a.nextElementSibling); // null 证明元素节点属于对象 获取a节点的同级的下一个元素节点 console.log(a.nextSibling); // #text 获取a节点的同级的下一个节点 这个获取的是文本节点 console.log(a.previousElementSibling);// null 获取a节点的同级的上一个元素节点 console.log(a.previousSibling); // #text 获取a节点的同级的上一个节点 console.log(p.nextElementSibling); // <span>……</span> console.log(p.children);// 返回p节点内所有的元素节点集合（HTMLCollection） console.log(p.chidNodes);// 返回p节点内所有的节点集合(NodeList)（有文本节点还有元素节点） console.log(p.lastChild); // 返回p节点内最后的节点#text(文本节点) console.log(p.lastElementChild); // 返回p节点内最后的元素节点<a></a> console.log(p.firstChild);//#text console.log(p.firstElementChild);//<i></i> console.log(p.ownerDocument);// #document console.log(a.ownerDocument);// #document console.log(p.nodeType); // 1 nodeType返回节点的类型 1表示元素节点 2表示属性节点 3表示文本节点 console.log(p.previousSibling.nodeType); // 3 console.log(a.parentNode.nextElementSibling);// <span>……</span> </script> </body>以上是节点的属性可以叠加使用 节点的方法 主要有增、删、改、查
removeChild(node);// 删除子节点 replaceChild(newnode,oldnode);// 替换节点 appendChild(node);//插入节点； insertBefore(a,b);// 将a节点放到b节点前 setAttribute("属性名","属性值") ；// 给节点添加属性 getArrtibute("属性名"); // 查看节点属性 <body> <div> <p class="ay" id="id"> <i></i> <a></a> </p> <span> </span> </div> <script> //var a = document.getElementsByTagName("a")[0]; //var p = document.getElementsByTagName("p")[0]; //var span = document.getElementsByTagName("span")[0];/获取span的节点 //var s =span.childNodes[0]; //选出span下的文本节点“ ” //span.replaceChild(p,s);//将p节点替换掉s节点 原来的节点p被删除 被剪切走了不是复制 //console.log(p.parentNode.removeChild(p));//（自己删自己）返回删除节点<p class="ay"><i></i><a></a></p> //console.log(p.insertBefore(span,a)); // 将节点span剪切到节点a之前 // console.log(p.getAttribute("id"));// id // console.log(p.getAttribute("class"));// ay // console.log(p.setAttribute("style","color:red")); // <p class="ay" id="id" style="color:red"> </script>