DOM修改元素
1. 修改内容
（1）获取从修改元素开始标签到结束标签之间的原始的 HTML 内容
元素对象.innerHTML
innerHTML 获取元素内容时，原样返回 HTML 代码中的 html 内容，不做任何加工；修改元素内容时，innerHTML 会先将字符串内容交给浏览器解析，解析后显示在页面上。
（2）获取或修改元素开始标签到结束标签之间的纯文本内容
元素对象.textContent
获取元素内容时，textContent 去掉内嵌的标签，并将特殊符号转为正文，然后返回修改后的内容；修改元素内容时，不会将字符串内容交给浏览器解析，而是直接保持字符串的原样内容输出。
举例：分别使用 innerHTML 和 textContent 获取和修改元素的内容；
<body> <h3 id="msg">来自<a href="#"><<新华社>></a>的消息</h3> <h3 id="msg2"></h3> <h3 id="msg3"></h3> <script> var h3Msg = document.getElementById("msg"); var h3Msg2 = document.getElementById("msg2"); var h3Msg3 = document.getElementById("msg3"); //试图获取h3Msg的innerHTML内容 console.log(h3Msg.innerHTML); //试图获取h3Msg的textContent内容 console.log(h3Msg.textContent); //试图修改h3Msg2的innerHTML内容为一段带有HTML片段的内容 var str = `来自<a href="#"><<新华社>></a>的消息`; h3Msg2.innerHTML = str; //试图修改h3Msg3的textContent内容为一段带有HTML片段的内容 h3Msg3.textContent = str; </script> </body>
获取与修改效果如下：
（3）获取或修改表单元素的内容
绝大多数表单元素都是 input 元素，而 input 元素是单标记，没有结束标签，所以不能使用 innerHTML 和 textContent 来获取和修改内容。想要获取或修改表单元素的值时，要用 value 代替 innerHTML 和 textContent。
2. 修改属性
（1）字符串类型的 HTML 标准属性
HTML 标准中规定的，属性值为字符串的属性，如 class, id, name, value, href, title, ...
a. 旧核心 DOM4 个函数：
i. 获取属性值：元素对象.getAttribute("属性名")
ii. 修改属性值：元素对象.setAttribute("属性名", "新值")
iii. 判断是否包含某个属性：元素对象.hasAttribute("属性名")
iv. 移除属性：元素.removeAttribute("属性名")
b.新的简化版HTML DOM：
新的 HTML DOM 已经将所有 HTML 标准属性，提前保存在了内存中的元素对象身上，只不过页面上暂时没用到的属性，默认值为""而已；今后只要操作 HTML 标准属性，就都可用".属性名"方式操作。
i. 获取属性值：元素对象.属性名
ii. 修改属性值：元素对象.属性名=属性值
iii. 判断是否包含某个属性：元素.属性名!==" " 说明包含该属性
iv. 移除属性：元素对象.属性名=""
但是并不是所有情况都适用于新简化版，ES6 基础语法中已经将 class 定义为关键字，有特殊功能，专门用于创建一种类型。所以 DOM 标准就不能重复使用 "class" 这个属性名；所以今后在 DOM 中用 . 获取或修改元素的class属性值时，必须换成".className"。
举例：使用核心 DOM 和 HTML DOM 两种方式操作 a 元素的属性；
<body> <a id="a1" href="http://tmooc.cn" title="Welcome to tmooc">go to tmooc</a> <script> var a1 = document.getElementById("a1"); //用console.log输出a1的标签 console.log(a1); //用console.dir输出a1对象在内存中的属性 console.dir(a1); //获取a1的title属性值 a1.getAttribute("title"); a1.title; //简化 //修改a1的title属性值为欢迎访问tmooc a1.setAttribute("title", "欢迎访问tmooc"); a1.title = "欢迎访问tmooc"; //简化 //判断是否包含target属性 a1.hasAttribute("target"); //false a1.target !== ""; //简化 //添加target属性 a1.setAttribute("target", "_blank"); a1.target = "_blank"; //简化 //判断是否包含target属性 a1.hasAttribute("target"); //true a1.target !== ""; //简化 //移除id属性 a1.removeAttribute("id"); a1.id = ""; //简化 //输出最后的a1 console.log(a1); </script>
案例：手风琴/伸缩菜单效果
HTML/CSS 结构与效果如下：
<ul class="tree"> <li> <span class="open">考勤管理</span> <ul> <li>日常考勤</li> <li>请假申请</li> <li>加班/出差</li> </ul> </li> <li> <span>信息中心</span> <ul> <li>通知公告</li> <li>公司新闻</li> <li>规章制度</li> </ul> </li> <li> <span>协同办公</span> <ul> <li>公文流转</li> <li>文件中心</li> <li>内部邮件</li> <li>即时通信</li> <li>短信提醒</li> </ul> </li> </ul>
li { list-style: none; } li span { padding-left: 20px; cursor: pointer; background: url("images/add.png") no-repeat center left; } li ul { display: none; } .open { background: url("images/minus.png") no-repeat center left; } .open+ul { display: block; }
页面结构如图：
页面效果如图：
需要通过 DOM 实现：点击加号按钮时菜单展开，加号变为减号，再次点击时菜单合并；
<script> //DOM 4步 //1. 查找触发事件的元素 // 本案例中触发事件的元素为ul下li下的span var spans = document.querySelectorAll("ul>li>span"); //2. 绑定事件处理函数 for (var span of spans) { span.onclick = function () { // 如果点击时span的属性不为open，说明该菜单未展开，执行展开 if (this.className !== "open") { //3. 查找要修改的元素 //4. 修改元素 // 先查找所有的span，清除所有span的open属性 var span = document.querySelectorAll("ul>li>span"); for (var span of spans) { // 清除所有span的open（让它们都闭合） span.className = ""; } // 点击时再展开 this.className = "open"; } else { //若点击时span的属性为open，说明菜单已经展开，执行关闭 this.className = ""; } } } </script>
展示效果如下：
（2）bool 类型的 HTML 标准属性
HTML标准中规定，不需要写属性值，只靠属性名就可发挥作用。
a：核心 DOM 函数
i. 添加 bool 类型的 HTML 标准属性:
标准：元素.setAttribute(“属性名”,”属性名”);
简写：元素.setAttribute(“属性名”,””);
举例：input.setAttribute(“disabled”,”disabled”); //禁用文本框
input.setAttribute(“disabled”,””); //禁用文本框
ii. 移除 bool 类型 HTML 标准属性
标准：元素.removeAttribute(“属性名”)
举例：input.removeAttribute(“disabled”) //启用文本框
iii. 判断元素当前处于何种状态
有哪个属性，就说明处于哪种状态；没有哪个属性，说明没有处于哪种状态。
标准：元素.hasAttribute(“属性名”)
举例：input.hasAttribute(“disabled”)//判断文本框是启用，还是禁用
b：新 HTML DOM
标准：元素.属性名（属性值必须是bool类型的true或false）
举例：判断元素现在处于何种状态；元素.属性名
修改状态；元素.属性名=bool值
举例：全选和取消全选
<body> <input id="txt" disabled="enabled"> <h2>管理员列表</h2> <table border="1px" width="500px"> <thead> <tr> <th><input type="checkbox" />全选</th> <th>管理员ID</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>Tester</td> <td>修改 删除</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>Manager</td> <td>修改 删除</td> </tr> <tr> <td><input type="checkbox" /></td> <td>3</td> <td>Analyst</td> <td>修改 删除</td> </tr> <tr> <td><input type="checkbox" /></td> <td>4</td> <td>Admin</td> <td>修改 删除</td> </tr> </tbody> </table> <script> //功能一，点上方checkbox，控制下方所有checkbox //DOM 4步 //1. 查找触发事件的元素 //本例中: 查找thead下的tr下的第一个th下的input var chbAll = document.querySelector( "thead>tr>th:first-child>input" ) //2. 绑定事件处理函数 chbAll.onclick = function () { //3. 查找要修改的元素 //本例中: 修改tbody下每个tr下第一个td中的input var chbs = document.querySelectorAll( "tbody>tr>td:first-child>input" ) //4. 修改元素 //本例中: 让tbody中每个checkbox的checked属性与当前点击的全选checkbox的选中状态（checked）相同 for (var chb of chbs) { chb.checked = this.checked; } } //功能二: 点tbody中每个checkbox，都可能影响thead中的全选checkbox //DOM 4步 //1. 查找触发事件的元素 // 本例中:查找tbody下每个tr下第一个td中的input var chbs = document.querySelectorAll("tbody>tr>td:first-child>input"); //2. 绑定事件处理函数 for (var chb of chbs) { chb.onclick = function () { //3. 查找要修改的元素 //本例中: 查找thead中tr下第一个th中的input var chbAll = document.querySelector("thead>tr>th:first-child>input"); //4. 修改元素 //尝试查找tbody中一个未选中的checkbox var unchecked = document.querySelector("tbody>tr>td:first-child>input:not(:checked)"); //如果找到未选中的checkbox，则thead中的全选checkbox就不能选中 if (unchecked != null) { chbAll.checked = false; } else { //否则如果没找到未选中的checkbox，则thead中的全选checkbox才能选中 chbAll.checked = true; } } } </script> </body>
补充：this 6种用法
（1）obj.fun() this->点前的obj对象；
（2）new Fun() this指new正在创建的新对象；
（3）类型名.prototype.共有方法=function(){ ... } ；将来谁调用函数，this就指谁；
（4）un() 和 回调函数 和 匿名函数自调 this默认指window；
（5）访问器属性中的this指当前访问器属性所在的对象；
（6）DOM和jQuery中事件处理函数中的this指当前正在触发事件的DOM元素对象本身。
| 全选 | 管理员ID | 姓名 | 操作 |
| 1 | Tester | 修改 删除 | |
| 2 | Manager | 修改 删除 | |
| 3 | Analyst | 修改 删除 | |
| 4 | Admin | 修改 删除 |
//功能一，点上方checkbox，控制下方所有checkbox
//DOM 4步
//1. 查找触发事件的元素
//本例中: 查找thead下的tr下的第一个th下的input
var chbAll = document.querySelector(
"thead>tr>th:first-child>input"
)
//2. 绑定事件处理函数
chbAll.onclick = function () {
//3. 查找要修改的元素
//本例中: 修改tbody下每个tr下第一个td中的input
var chbs = document.querySelectorAll(
"tbody>tr>td:first-child>input"
)
//4. 修改元素
//本例中: 让tbody中每个checkbox的checked属性与当前点击的全选checkbox的选中状态（checked）相同
for (var chb of chbs) {
chb.checked = this.checked;
}
}
//功能二: 点tbody中每个checkbox，都可能影响thead中的全选checkbox
//DOM 4步
//1. 查找触发事件的元素
// 本例中:查找tbody下每个tr下第一个td中的input
var chbs = document.querySelectorAll("tbody>tr>td:first-child>input");
//2. 绑定事件处理函数
for (var chb of chbs) {
chb.onclick = function () {
//3. 查找要修改的元素
//本例中: 查找thead中tr下第一个th中的input
var chbAll = document.querySelector("thead>tr>th:first-child>input");
//4. 修改元素
//尝试查找tbody中一个未选中的checkbox
var unchecked = document.querySelector("tbody>tr>td:first-child>input:not(:checked)");
//如果找到未选中的checkbox，则thead中的全选checkbox就不能选中
if (unchecked != null) {
chbAll.checked = false;
} else {
//否则如果没找到未选中的checkbox，则thead中的全选checkbox才能选中
chbAll.checked = true;
}
}
}
补充：this 6种用法
（1）obj.fun() this->点前的obj对象；
（2）new Fun() this指new正在创建的新对象；
（3）类型名.prototype.共有方法=function(){ ... } ；将来谁调用函数，this就指谁；
（4）un() 和 回调函数 和 匿名函数自调 this默认指window；
（5）访问器属性中的this指当前访问器属性所在的对象；
（6）DOM和jQuery中事件处理函数中的this指当前正在触发事件的DOM元素对象本身。
