全球今亮点！一文详解JavaScript之DOM节点导航

本文主要介绍如何利用DOM节点获取页面元素，页面文档中的所有事物都是节点：包括元素节点、文本节点、属性节点、文档节点、注释节点。下面介绍获取节点的两大类方法：

（1）获取节点（包含文本节点、元素节点等所有节点）

1.parentNode:获取父节点

(资料图片)

2.childNodes：获取子节点，通过索引值获取各个子节点

3.firstChild：获取父节点的第一个子节点

4.lastChild：获取父节点的最后一个子节点

5.nextSibling：获取子节点相邻的下一个兄弟节点

6.previousSibling：获取子节点相邻的前一个兄弟节点

7.attributes:获取属性节点

                 由节点关系获取元素                 文本节点
        2
                    3
            4
            5
            6
        
    
    7
    89
    <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>

（2）获取元素节点

1.parentElement:获取父元素节点

2.children：获取子元素节点，通过索引值获取各个子元素节点

3.firstElementChild：获取父级的第一个子元素节点

4.lastElementChild：获取父级的最后一个子元素节点

5.nextElementSibling：获取相邻的下一个兄弟元素节点

6.previousElementSibling：获取相邻的前一个兄弟元素节点

                 获取子元素节点             123
        456
        789
    
    <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>

相关推荐：【JavaScript视频教程】

以上就是一文详解JavaScript之DOM节点导航的详细内容，更多请关注php中文网其它相关文章！

关键词：兄弟节点相关文章