- 父节点:
node.parentNode 获取子元素的父节点(得到的是离元素最近的父节点)
找不到返回null
代码:
<div class="box">
<div class="erweima"><div>
</div>
var er = document.querySelector('.erweima');
var box = er.parentNode;
- 子节点(返回的是伪数组形式)
节点 | 内容 |
---|---|
childNodes(标准) | 返回所有的子节点 (包含元素节点 文本节点等等 )实际开发使用少 |
children(非标准) | 返回子元素节点 实际开发常用 |
children[0] | 返回第一个子元素节点 (伪数组的索引号) |
<ul>
<li></li>
<li></li>
<li></li>
</ul>
var ul = document.querySelector('ul');
var lis = ul.children;
-
兄弟节点
1.nextSibling (返回所有的兄弟节点 包含元素节点 文本节点)
2.nextElementSibling (得到下一个兄弟元素节点 兼容性问题 IE9以上支持)
3.previousElementSibling (得到上一个兄弟元素节点 兼容性问题 IE9以上支持) -
创建节点与添加节点
1.创建节点:document.createElement(‘tahName’)
动态创建元素
2.添加元素(创建元素后还需要添加元素,页面才会显示)
2.1node.appendChild(child):此方法将一个节点添加到指定父节点的子节点列表末尾 node(父级)
2.2node.insertBefore(child, 指定元素)
页面想要添加新元素,分两步:1.创建元素 2.添加元素 -
删除节点
node.removeChild(child) 删除一个子节点
应用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
font-size: 14px;
color: #333;
}
.box {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 44px;
background-color: #ccc;
}
</style>
</head>
<body>
<table class="box">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 1.数组对象模拟数据
// 2.创建添加行 行数就是数组的长度(length)
// 3.创建添加单元格 单元格个数: 对象里数据的个数
// 4.给单元格填充数据
// 5.添加操作单元格
// 6.删除操作 删除链接所在的行 (链接a的父亲的父亲)
var datas = [{
name: '小明',
subject: '数学',
score: 100
}, {
name: '奶瓶',
subject: '数学',
score: 98
}, {
name: '火锅',
subject: '数学',
score: 99
}, {
name: '鸡排',
subject: '数学',
score: 88
}]
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
// 创建行
var tr = document.createElement('tr');
// 添加行
tbody.appendChild(tr);
// 遍历对象
for (var k in datas[i]) {
// 创建单元格
var td = document.createElement('td');
// 填充单元格内容
td.innerHTML = datas[i][k];
// 添加单元格
tr.appendChild(td);
}
var td = document.createElement('td');
td.innerHTML = '<a href="jacascript:;">删除</a>';
tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>