学习来源: https://www.bilibili.com/video/BV1HJ41147DG
1、节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
一般地,节点至少拥有 nodeType(节点类型)、nodeName(节点名称)和 nodeValue(节点值)这三个基本属性。
元素节点 nodeType: 1
属性节点 nodeType: 2
文本节点 nodeType: 3 (文本节点包含文字、空格、换行等)
在实际开发中,节点操作主要操作的是元素节点
示例
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
console.dir(box);
</script>
</body>
2、节点层级
利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
1)、父级节点
node.parentNode
注释
- parentNode 属性可以返回某节点的父节点,注意是最近的一个父节点
- 如果指定的节点没有父节点则返回 null
<body>
<div class="demo">
<div class="box">
<span class="small-box">×</span>
</div>
</div>
<script>
// 父节点 parentNode
var ht=document.querySelector('html')
var bd =document.querySelector('body')
var demo=document.querySelector('.demo')
var box = document.querySelector('.box');
var sbox = document.querySelector('.small-box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(sbox.parentNode);
console.log(box.parentNode);
console.log(demo.parentNode);
console.log(bd.parentNode);
console.log(ht.parentNode);
</script>
</body>
2)、子节点
所有子节点
parentNode.childNodes (标准)
返回包含指定节点的子节点的集合,该集合为即时更新的集合
注释
1、返回值里面包含了所有的子节点,包括元素节点、文本节点等。
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
var ul = document.querySelector('ul');
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
</script>
</body>
2、如果只想要获得里面的元素节点,则需要专门处理,所以一般不提倡使用 childNodes
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// 不方便
var ul = document.querySelector('ul');
for (var i = 0; i < ul