5. 节点操作
5.5 删除节点
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul')
var btn = document.querySelector('button')
// 2.删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0])
// 3.点击按钮依此删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true
} else {
ul.removeChild(ul.children[0])
}
}
</script>
</body>
案例：删除留言案例
- 案例分析:
1.当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接
2.需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
3.阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function() {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
// console.log(text.value);
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// (3)删除元素 删除的是当前链接的li 他的父亲
var as = document.querySelectorAll('a')
for(var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// node.removeChild(child) 删除的是li 当前a所在的li this.parentNode
ul.removeChild(this.parentNode)
}
}
}
}
</script>
5.6 复制节点(克隆节点)
node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul')
// 1.node.cloneNode() 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2.node.cloneNode(true) 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true)
ul.appendChild(lili)
</script>
</body>
案例：动态生成表格
- 案例分析：
1.因为里面的学生数据都是动态的，我们需要js 动态生成。 这里我们模拟数据，自己定义好数据。 数据我们采取对象形式存储。
2.所有的数据都是放到tbody里面的行里面。
3.因为行很多，我们需要循环创建多个行（对应多少人）
4.每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
5.最后一列单元格是删除，需要单独创建单元格。
6.最后添加删除操作，单击删除，可以删除当前行。
<!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>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}, {
name: '大猪蹄子',
subject: 'JavaScript',
score: 0
}];
// 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
// 1. 创建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
for (var k in datas[i]) { // 里面的for循环管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值 datas[i][k] 给 td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除 </a>';
tr.appendChild(td);
}
// 4. 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
// for(var k in obj) {
// k 得到的是属性名
// obj[k] 得到是属性值
// }
</script>
</body>
</html>
5.7 三种动态创建元素区别
<body>
<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// 三种创建元素方式区别
// 1.document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
// var btn = document.querySelector('button')
// btn.onclick = function() {
// document.write('<div>123</div>')
// }
// 2.innerHTML 创建元素
var inner = document.querySelector('.inner')
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += '<a href="#">百度</a>'
// }
var arr = []
for(var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>')
}
inner.innerHTML = arr.join('')
// 3.document.createElement()创建元素
var create = document.querySelector('.create')
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a')
create.appendChild(a)
}
</script>
</body>
6. DOM 重点核心
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
- 对于HTML，dom使得html形成一棵dom树. 包含 文档、元素、节点
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
6.1 创建
- document.write
- innerHTML
- createElement
6.2 增
- appendChild
- insertBefore
6.3 删
- removeChild
6.4 改
主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
- 修改元素属性： src、href、title等
- 修改普通元素内容： innerHTML 、innerText
- 修改表单元素： value、type、disabled等
- 修改元素样式： style、className
6.5 查
主要获取查询dom的元素
- DOM提供的API 方法： getElementById、getElementsByTagName
古老用法 不太推荐 - H5提供的新方法： querySelector、querySelectorAll 提倡
- 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
6.6 属性操作
主要针对于自定义属性。
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute移除属性
6.7 事件操作
给元素注册事件， 采取 事件源.事件类型 = 事件处理程序
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
