案例:动态生成表格
<!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: 100
},
{
name: '富恒',
subject: 'JavaScript',
score: 100
},
{
name: '明玉',
subject: 'JavaScript',
score: 100
},];
// 2.往tbody里面创建行:有几个人(通过数组的长度)就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { //外面的for循环管行tr
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 3.行里面创建单元格td(跟数据有关系的三个单元格) 单元格的数量取决于每个对象里元素的个数 for循环遍历对象
for (var k in datas[i]) { //里面的for循环管列td
var td = document.createElement('td');
// 把对象里面的属性值data[i][k]给td.innerHTML
td.innerHTML = datas[i][k]; // k是属性名 obj[k]是属性值
tr.appendChild(td);
}
//3.创建有删除两个字的单元格
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标签的父级(td)的父级(tr) node.removeChild(child) nodeshi tbody(tr)的父级
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
5.8 三种动态创建元素区别
- document.write()
- element.innerHTML
- document.createElement()
区别:
1.document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
<body>
<button>点击</button>
<p>abc</p>
<script>
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕,
再调用这句话会导致页面重绘
var btn = document.querySelector('button');
btn.onclick = function () {
document.write('<div>123</div>');
}
</script>
</body>
2.innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
3.innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
4.createElement()创建多个元素效率低一点点,但是结构更清晰
总结:不同浏览器下,innerHTML效率比createElement高
6.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、querySelectAll 提倡
- 利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)提倡
6.6 属性操作
主要针对于自定义属性
- setAttribute:设置dom的属性值
- getAttribute:得到dom的属性值
- removeAttribute移除属性
6.7 事件操作
给元素注册事件,采取 事件源.事件类型 = 事件处理程序