解析JavaScript之DOM节点导航教程
导读：在这篇文章中，我们将学习“解析JavaScript之DOM节点导航教程”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。 （1）获取节...
在这篇文章中，我们将学习“解析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节点导航教程”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 解析JavaScript之DOM节点导航教程
本文地址： https://pptw.com/jishu/653446.html