Web前端开发工程师|Web前端开发工程师知识体系_29_JavaScript DOM（三）
一个元素可以修改它的内容、属性和样式。
一、修改
1.修改属性
（1）字符串类型的HTML标准属性（上篇）
（2）bool类型的HTML标准属性（上篇）
（3）自定义扩展属性
HTML标准中没有规定，程序员根据自身的需要自发添加的属性就是自定义属性。
a：自定义属性经常用于代替id、class或元素选择器，作为查找触发事件的元素的条件；CSS的各种选择器均有自己的不足之处：
i. id选择器，只能选1个；
ii. class选择器，本职工作是定义样式，而样式的修改极其频繁！如果用class选择器查找元素绑定事件，一旦样式类发生变化，程序必然出错；
iii. 元素选择器，因为实现同一种效果，可选的标签名优很多，没有统一规定。如果用元素选择器查找触发事件的元素，绑定事件，则元素一改，功能又立刻出错。
为了解决以上问题，就可以为元素添加自定义属性，当查找触发事件的元素时，用属性选择器[自定义属性]来查找即可。
b：在js中访问自定义扩展属性
要注意自定义属性不能用 . 访问，因为自定义属性是后天程序员自发添加的，在HTML标准中没有规定。所有在内存中的元素对象上，不包含自定义扩展属性！
可以用旧核心DOM：
元素.getAttribute("自定义属性名")在新版的HTML5标准中，有新的规定：
元素.setAttribute("自定义属性名", "属性值")
①HTML中，所有自定义属性名必须以data-开头：<元素data-自定义属性名="属性值">
②如果在html中以data-开头了，则js中: 元素.dataset.自定义属性名。
举例：点击按钮，记录次数；
2.修改样式
（1）修改内联样式
格式：元素.style.css属性="属性值"由于有些css属性名中带-，这样会和减法的-号冲突；所以所有带-的css属性名必须去-变驼峰，比如：font-size ->fontSize、background-color -> backgroundColor、list-style-type -> listStyeType。
（2）获取样式
使用元素.style.css属性的方式，只能获取内联样式，无法获得内部或外部样式表中层叠或继承来的css属性值。所以今后要想获得元素任意css属性值，都要获得计算后的样式。计算后的样式就是最终应用到一个元素上的所有css属性的总和。
获取方法分为两步：
i. 先获得计算后的样式对象：var style=getComputedStyle(元素对象);举例：获取h1元素计算后的样式；
ii. 从完整的样式对象中只提取个别css属性：style.css属性;
WelcomeWelcome to my web site
在实际的项目中，很多效果都需要批量修改一个元素的多个css属性，而.style一句话只能修改一个css属性，如果修改多个css属性时代码会很繁琐；所以只要批量设置一个元素的多个css属性，都用class代替.style。
二、添加/删除元素
1.添加一个新元素
（1）创建一个新的空元素对象：
var 新元素对象=document.createElement("标签名")//eg：
var a=document.createElement("a");
//
（2）为新元素添加必要属性：
元素对象.属性名=新值//eg：
a.innerHTML="go to tmooc";
a.href="http://tmooc.cn";
// go to tmooc
（3）将新元素添加到DOM树的指定父元素下：
//在父元素下末尾追加新元素
父元素.appendChild(新元素)//在父元素下插入到一个现有子元素之前
父元素.insertBefore(新元素，现有子元素)//替换父元素下的一个现有的子元素
父元素.replaceChild(新元素，现有子元素)
举例：创建一个a元素和一个文本框；
2.优化
修改DOM树的内容会导致重排重绘，但频繁重排重绘会降低页面加载的效率，如果父元素已经在页面上了，要添加多个平级子元素，就要借助于文档片段对象来实现。
文档片段是指内存中临时保存多个平级子元素的虚拟父元素，使用方法：
（1）先创建文档片段对象:
var 文档片段对象=document.createDocumentFragment();
（2）将子元素先添加到文档片段对象中
文档片段对象.appendChild(子元素)（3）将文档片段对象一次性添加到页面上
父元素.appendChild(文档片段对象);
3.删除元素
父元素.removeChild(子元素)【Web前端开发工程师|Web前端开发工程师知识体系_29_JavaScript DOM（三）】举例：动态生成表格；
动态创建表格 - 锐客网
table {
width: 600px;
border-collapse: collapse;
text-align: center;
}td,
th {
border: 1px solid #ccc
}
姓名
薪资
年龄
删除
推荐阅读
- 深入理解Go之generate
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 私有化轻量级持续集成部署方案--03-部署web服务（下）
- Jsr303做前端数据校验
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 我的软件测试开发工程师书单
- spring|spring boot项目启动websocket
- echart|echart 双轴图开发
- NPDP拆书（三）（新产品开发战略（经营与创新战略））
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件