JavaScript中的节点操作
【摘要】 JavaScript节点操作获取元素的两种方式,方便大家学习
1. 节点操作
获取元素的两种方式:
1.利用DOM提供的方法获取元素
- document.getElementByld()
- document.getElementsByTagName()
- document.querySelector等
- 逻辑性不强、繁琐
⒉利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强，但是兼容性稍差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
1.1 创建节点
document.createElement()方法创建由tagName指定的 HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
1.2 添加节点
在末尾添加
node.appendchild()方法将一个节点添加倒指定父节点的子节点列表末尾。类似于css里面的after 伪元素。
在首部添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
// 指定元素指的是针对谁而言，此处children[0]表示的是将此时ul的第一个孩子。下边这行代码表示的是在ul现在的第一个孩子之前插入lili。
ul.insertBefore(lili, ul.children[0]);
</script>
</body>
</html>1.3 删除节点
node.removechild()方法从DoM中删除一个子节点，返回删除的节点。
1.4 删除留言案例
- 当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接
- 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
- 阻止链接跳转需要添加javascriptvoid(0);或者javascript:;
1.5 复制节点
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意:
- 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
- 如果括号参数为true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）