站长资讯网
本文主要介绍如何利用DOM节点获取页面元素，页面文档中的所有事物都是节点：包括元素节点、文本节点、属性节点、文档节点、注释节点。下面介绍获取节点的两大类方法： （1）获取节点（包含文本节点、元素节点等所有节点） 1.parentNode:获取父节点 2.childNodes：获取子节点，通过索引值获取各个子节点 3.firstChild：获取父节点的第一个子节点 4.lastChild：获取父节点的最后一个子节点 5.nextSibling：获取子节点相邻的下一个兄弟节点 6.previousSibling：获取子节点相邻的前一个兄弟节点 7.attributes:获取属性节点 （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> <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>
<!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>
站长资讯网
最全最丰富的资讯网站
最全最丰富的资讯网站