本文详细讲解了JavaScript中的DOM节点操作，包括如何获取节点、节点层级关系、节点操作方法，如创建、添加、删除和复制。此外，还深入探讨了DOM事件处理，如事件注册、事件流、事件对象、阻止事件冒泡和事件委托，以及常用的鼠标和键盘事件。通过实例演示，帮助读者掌握DOM操作和事件处理的核心技巧。
目录
五、节点操作
1. 获取节点方法
1.1 利用DOM提供的方法获取元素
document.getElementById（）等，逻辑性不强、繁琐
1.2 利用节点层级关系获取元素
- 利用父子兄弟节点关系获取元素
- 逻辑性强，但是兼容性稍差
2. 节点概述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3（文本节点包括文字、空格、换行等）
在实际开放中，主要操作的是元素节点
3. 节点层级
3.1 父级节点
node.parentNode- parentNode 属性可返回某个节点的父节点，注意是最近的一个父节点
- 如果没有父节点则返回null
3.2 子节点
parentNode.childNodes //标准- childNodes所有子节点包含元素节点、换行等
- 如果想获取元素节点，则需要专门处理。所以我们一般不提倡用childNodes
parentNode.children - parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
parentNode.firstChild
parentNode.lastChild- 返回第一个子节点，不管它是什么节点
parentNode.firstElementChild
parentNode.lastElementChild- 都返回第一个元素节点，找不到返回null
- 注意：这两个方法有兼容性问题，IE9以上支持
实际开发中，firstChild操作不便，firstElementChild又有兼容性问题，那么如何获取第一个元素节点和最后一个元素节点？
console.log(ol.children[0]); //第一个子元素
console.log(ol.children[ol.children.length-1]); //最后一个子元素案例-下拉菜单
<script type="text/javascript">
//1.获取元素
var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block;'
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none;'
}
}
</script>3.3 兄弟节点
node.nextSibling
node.previousSibling- 得到下一个/上一个兄弟节点，包含文本、空格等。找不到返回null。、
node.nextElementSibling
node.previousElementSibling- 得到下一个/上一个兄弟元素节点。找不到返回null。有兼容性问题
4. 节点操作
4.1 创建节点
document.createElement('tagName');document.createElement()方法创建由tagName指定的HTML元素。因为这些元素先不存在，是根据我们的需求动态生产的，所以我们也称为动态创建元素节点。
4.2 添加节点
node.appendChild(child)- node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after元素。
node.insertBefore(child，指定元素)- node.insertBefore()方法将一个节点添加到指定子节点的前面，类似css里的before。
案例-发布留言
<!-- 发布留言 -->
<style type="text/css">
ul {
top: 100px;
background-color: pink;
}
</style>
<body>
<textarea id=""></textarea>
<button type="button">发布</button>
<ul>
</ul>
</body>
<script type="text/javascript">
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function() {
if (text.value == '') {
alert('请输入内容');
return false;
} else {
var li = document.createElement('li');
li.innerHTML = text.value;
//ul.appendChild(li);
ul.insertBefore(li,ul.children[0]); //新发布的在前面
}
}
</script>4.3 删除节点
node.removeChild(child)案例-删除留言
<!-- 删除留言 -->
<style type="text/css">
ul {
width: 400px;
top: 100px;
background-color: pink;
}
li {
width: 350px;
padding: 5px;
background-color: pink;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
</style>
<body>
<textarea id=""></textarea>
<button type="button">发布</button>
<ul>
</ul>
</body>
<script type="text/javascript">
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function() {
if (text.value == '') {
alert('请输入内容');
return false;
} else {
//1.创建元素
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// ul.appendChild(li);
//2、添加元素
ul.insertBefore(li, ul.children[0]); //新发布的在前面
//3.删除元素 删除当前链接的li
var as = document.querySelectorAll('a');
ul.removeChild(ul.children[i]);
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode);
}
}
}
}
</script>4.4 复制节点
node.cloneNode(true)- 克隆后还需要添加
- 注意：如果括号参数为空或者false，则为浅拷贝，即只复制节点本身，不克隆里面的子节点。
最低0.47元/天 解锁文章
扫一扫
1597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
