一个元素可以修改它的内容、属性和样式。
目录
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元素对象本身。