本文小编为大家详细介绍“JavaScript中如何利用DOM节点获取页面元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“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节点获取页面元素”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
