标签：对象 for rip ack world doctype 之间 elements 删除
1.nodeList
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>hello</p> <p>world</p> <p>hello</p> <p>world</p> </body> <script> var x = document.getElementsByTagName("p"); for (var i=0;i<x.length;i++){ } var y = x[2]; console.log(y) //hello </script> </html>
2.parentNode
parentNode 属性常被用来改变文档的结构。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"> hello </div> </body> <script type="text/javascript"> var box = document.getElementById("box"); box.parentNode.removeChild(box); //删除 </script> </html>
3.firstChild以及lastChild
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script type="text/javascript"> var box = document.getElementById(‘box‘); var node1 = box.firstChild.nodeName; //#text var node2 = box.lastChild.nodeName; //#text alert(node1); alert(node2); </script> </html>
4.previousSibling
previousSibling 属性返回同一树层级中指定节点的前一个节点。
被返回的节点以 Node 对象的形式返回。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"><li id="lis1">1</li><li id="lis2">2</li></ul> </body> <script type="text/javascript"> var lis2 = document.getElementById(‘lis2‘); var damo = lis2.previousSibling.id; //前一个id lis1 li之间有空格的返回的则是undefined alert(damo); </script> </html>
5.previousElementSibling
前一个兄弟元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"><li id="lis1">1</li><li id="lis2">2</li></ul> </body> <script type="text/javascript"> var lis2 = document.getElementById(‘lis2‘); var damo = lis2.previousElementSibling.id; //返回的是前一个兄弟元素 lis1 alert(damo); </script> </html>
6.appendChild
在列表中添加项目
appendChild() 方法向节点添加最后一个子节点。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script type="text/javascript"> var node = document.createElement("LI"); //创建元素节点 var textnode = document.createTextNode("4"); //创建文本节点 node.appendChild(textnode); document.getElementById("box").appendChild(node); </script> </html>
7.insertBefore
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"> <li>2</li> <li>3</li> <li>4</li> </ul> </body> <script> var newItem=document.createElement("LI"); //创建元素节点 var textnode=document.createTextNode("1"); //创建文本节点 newItem.appendChild(textnode); //添加文本节点 var box=document.getElementById("box"); //获取元素 box.insertBefore(newItem,box.childNodes[0]); //添加到位置 </script> </html>
标签：对象 for rip ack world doctype 之间 elements 删除
原文地址：http://www.cnblogs.com/dongzw/p/7077587.html
