DOM（二）修改元素内容、属性

        一个元素可以修改它的内容、属性和样式。

---

目录

DOM修改元素

1. 修改内容

2. 修改属性

---

DOM修改元素

1. 修改内容

（1）获取从修改元素开始标签到结束标签之间的原始的 HTML 内容

元素对象.innerHTML

innerHTML 获取元素内容时，原样返回 HTML 代码中的 html 内容，不做任何加工；修改元素内容时，innerHTML 会先将字符串内容交给浏览器解析，解析后显示在页面上。

（2）获取或修改元素开始标签到结束标签之间的纯文本内容

元素对象.textContent

获取元素内容时，textContent 去掉内嵌的标签，并将特殊符号转为正文，然后返回修改后的内容；修改元素内容时，不会将字符串内容交给浏览器解析，而是直接保持字符串的原样内容输出。

举例：分别使用 innerHTML 和 textContent 获取和修改元素的内容；

来自<<新华社>>的消息

 

获取与修改效果如下：

（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 元素的属性；

go to tmooc

---

案例：手风琴/伸缩菜单效果

HTML/CSS 结构与效果如下：

考勤管理
日常考勤
请假申请
加班/出差
信息中心
通知公告
公司新闻
规章制度
协同办公
公文流转
文件中心
内部邮件
即时通信
短信提醒
 

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 实现：点击加号按钮时菜单展开，加号变为减号，再次点击时菜单合并；

展示效果如下：

---

（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值

举例：全选和取消全选

管理员列表
全选
管理员ID
姓名
操作
1
Tester
修改 删除
2
Manager
修改 删除
3
Analyst
修改 删除
4
Admin
修改 删除
 

补充：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元素对象本身。