解析JavaScript之DOM节点导航教程-群英

您现在的位置是：群英 > 开发技术 > web开发

解析JavaScript之DOM节点导航教程

Admin发表于 2022-08-31 17:23:52360 次浏览

上一篇： js创建、删除、追加及替换元素节点的方法是什么？

下一篇： Javascript类选择器使用方法是什么？

在这篇文章中，我们将学习“解析JavaScript之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之DOM节点导航教程”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： DOM节点导航

上一篇： js创建、删除、追加及替换元素节点的方法是什么？

下一篇： Javascript类选择器使用方法是什么？