本文主要介绍如何利用dom节点获取页面元素，页面文档中的所有事物都是节点：包括元素节点、文本节点、属性节点、文档节点、注释节点。下面介绍获取节点的两大类方法：
（1）获取节点（包含文本节点、元素节点等所有节点）
1.parentnode:获取父节点
2.childnodes：获取子节点，通过索引值获取各个子节点
3.firstchild：获取父节点的第一个子节点
4.lastchild：获取父节点的最后一个子节点
5.nextsibling：获取子节点相邻的下一个兄弟节点
6.previoussibling：获取子节点相邻的前一个兄弟节点
7.attributes:获取属性节点
<!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>由节点关系获取元素</title> <style> </style></head> <body> <div name="div1"> <p name='p1'>文本节点</p> <p>2</p> <ul> <li>3</li> <li id="li4">4</li> <li>5</li> <li>6</li> </ul> </div> <section>7</section> <main><span>8</span><i>9</i></main> <script> //注意换行和空格也属于结点，属于文本节点，按节点关系访问时需要考虑。属性节点无须考虑。 //1. parentnode获取div console.log(document.queryselector('p').parentnode); console.log(document.queryselector('p').parentnode.attributes[0]); console.log(document.queryselector('p').parentnode.nodename); //div console.log(document.queryselector('p').parentnode.nodevalue); //null console.log(document.queryselector('p').parentnode.nodetype); //1 元素节点 // 2.通过childnodes获取第一个p console.log(document.queryselector('div').childnodes[1]); console.log(document.queryselector('div').childnodes[1].firstchild.nodename); console.log(document.queryselector('div').childnodes[1].firstchild.nodetype); //2 文本节点 console.log(document.queryselector('div').childnodes[1].firstchild.nodevalue); // 3.firstchild获取main中的第一个子节点 console.log(document.queryselector('main').firstchild); // 4.lastchild获取main中的最后一个子节点 console.log(document.queryselector('main').lastchild); // 5.nextsibling获取相邻下一个兄弟元素 console.log(document.queryselector('#li4').nextsibling.nextsibling); // 6.previoussibling获取相邻上一个兄弟元素 console.log(document.queryselector('#li4').previoussibling.previoussibling); // 总结：除parentnode外，其他方法谨慎选择，一旦代码格式有变，就会出现错误 // 通过nodename获取节点名称 //通过nodevalue获取节点值 // 通过nodetype返回节点类型 </script></body> </html>
（2）获取元素节点
1.parentelement:获取父元素节点
2.children：获取子元素节点，通过索引值获取各个子元素节点
3.firstelementchild：获取父级的第一个子元素节点
4.lastelementchild：获取父级的最后一个子元素节点
5.nextelementsibling：获取相邻的下一个兄弟元素节点
6.previouselementsibling：获取相邻的前一个兄弟元素节点
<!doctype html><html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取子元素节点</title></head> <body> <div> <p>123</p> <p>456</p> <p>789</p> </div> <script> //p标签总体算一个节点，内部的“123”不算 console.log(document.queryselector('div').childnodes); console.log(document.queryselector('div').childnodes.length); // 获取子元素节点 console.log(document.queryselector('div').children); console.log(document.queryselector('div').children[1]); console.log(document.queryselector('div').firstelementchild); console.log(document.queryselector('div').firstelementchild.nextelementsibling); console.log(document.queryselector('div').lastelementchild); console.log(document.queryselector('div').lastelementchild.previouselementsibling); console.log(document.queryselector('div').children[1].parentelement); </script></body> </html>
相关推荐：【javascript视频教程】
以上就是一文详解javascript之dom节点导航的详细内容。