节点操作的作用
获取元素通常使用的两种方式:
1. 利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector() 等等
- 逻辑性不强,繁琐
2. 利用节点层级关系获取元素
- 利用父子兄弟节点关系获取元素
- 逻辑性墙,但是兼容性稍差
这两种方法都可以获取元素,但是节点操作更简单。
获取节点
1. 父节点
1.1 node.parentNode 返回的是距离最近的父节点
<body>
<div class="parent">
<em class="child">JavaScript</em>
</div>
<script>
var child = document.querySelector('.child');
// 返回的是距离最近的父节点
// 如果没有父节点则返回null
var parent = child.parentNode;
console.log(parent);
</script>
</body>
以上代码输出结果为:
返回了距离child最近的父节点。
2. 子节点
2.1 node.childNode 返回所有的子节点,包括所有的文本节点和元素节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul&