本文主要介绍如何利用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节点导航的详细内容,更多请关注php中文网其它相关文章!