- 什么是DOM:
- DOM树:
- 查找元素
一. 什么是DOM: Document Object Model（文档 对象 模型）
- 什么是: 专门操作网页内容的一套对象和函数的集合。
-
何时: 今后只要想操作网页内容，都必须用DOM
dom1.png
- DOM标准: W3C负责制定并维护的一套国际标准。几乎所有浏览器100%兼容。
4. 包括: 5件事: 增删改查+事件绑定
二. DOM树:
- 什么是: 专门在内存中保存一个网页的所有内容的树形结构。
- 为什么: 因为网页中的元素都是上下级包含关系，而树形结构是最适合保存上下架包含关系的结构。最直观。
-
如何:
dom2.png
三. 查找元素: 4种:
强调: 所有元素对象，必须找到才能使用！没有任何一个节点/元素可以直接使用！
- 不需要查找就可快速获得的元素: 4种:
(1). 树根节点对象: document对象
(2). <html>: document.documentElement
(3). <head>: document.head
(4). <body>: document.body
总结: DOM 4步:
1. 先查找触发事件的元素
2. 再为元素绑定事件处理函数
3. 查找要修改的元素
4. 修改元素
总结: DOM 5件事: 增删改查+事件绑定:
//不要背！用到时，来查找，复制粘贴就行了！
1. 查找元素: 4种
(1). 不需要查找就可直接获得的元素对象: 4种:
document 根节点 document
document.documentElement —— <html>
document.head —— <head>
document.body —— <body>
1. 查找 2. 修改
一. 查找:
1. 按节点间关系查找:
(1). 何时: 如果我们已经提前获得了一个元素，想找它周围附近的关系比较紧密的元素时，都用按节点间关系查找。
(2). 节点树:
a. 什么是: 包含所有网页内容的完整树结构。
b. 2大类关系: 6个属性:
**1). 父子关系: 4个属性: **
i. 获得一个元素的父元素: 元素对象.parentNode父 节点对象
ii. 获得一个元素下的所有直接子元素: 元素对象.childNodes子 节点对象们
iii. 获得一个元素下的第一个直接子元素: 元素对象.firstChild
第一个孩子
iv. 获得一个元素下的最后一个直接子元素: 元素对象.lastChild
最后一个孩子
2). 兄弟关系: 2个属性
i. 获得当前元素的前一个兄弟元素: 元素对象.previousSibling
前一个 兄弟
ii. 获得当前元素的后一个兄弟元素: 元素对象.nextSibling
后一个兄弟
c. 问题: 节点树会把看不见的空字符(空格、换行、Tab)也看成是DOM树上的节点对象。但是，开发时我们从不关心看不见的空节点对象，只关心可以看见的元素节点对象。所以，节点树最大的缺点是干扰我们的查找！所以，将来节点树几乎不用！
**(3). 元素树: **
a. 什么是: 只包含元素节点对象的树结构。
b. 好处: 没有多余的对象干扰查找结构。
c. 2大类关系: 6个属性
1). 父子关系: 4个属性
i. 获得一个元素的父元素: 元素对象.parentElement
父 元素
ii. 获得一个元素的所有直接子元素: 元素对象.children
孩子们
返回: 类数组对象，其中包含这个元素的所有直接子元素对象
iii. 获得一个元素下第一个直接子元素:
元素对象.firstElementChild
第一个 元素 孩子
iv. 获得一个元素下最后一个直接子元素
元素对象.lastElementChild
最后一个元素 孩子
2). 兄弟关系: 2个属性:
i. 获得当前元素的前一个兄弟元素: 元素对象.previousElementSibling 前一个 元素 兄弟
ii. 获得当前元素的后一个兄弟元素: 元素对象.nextElementSibling
后一个元素 兄弟
(4). 示例: 使用元素树关系，查找想要的元素
1_domTree.html
<!DOCTYPE HTML>
<html>
<head>
<title>DOM Tree</title>
<meta charset="utf-8" />
</head>
<body>
<span id="s1">Hello</span>
<h1>标题一</h1>
<script>
//输出DOM树结构
console.log(document);
console.log(document.documentElement);
console.log(document.head);
console.log(document.body);
//输出一个对象自己身上的属性结构:
console.dir(document);
console.dir(document.documentElement);
console.dir(document.head);
console.dir(document.body);
//想获得body下所有直接子元素:
//错误:
// var childNodes=document.body.childNodes;
// console.log(childNodes);
//正确:
var children=document.body.children;
console.log(children);
//获得body下第一个直接子元素: span
//错误:
// var span=document.body.firstChild;
//正确:
var span=document.body.firstElementChild;
console.log(span);
//想获得h1
//错误:
// var h1=span.nextSibling;
//正确:
var h1=span.nextElementSibling;
//children[1]
console.log(h1);
</script>
</body>
</html>
运行结果:
[图片上传失败...(image-6a66ab-1627540705608)]
2. 按HTML特征查找：
(1). 问题: 如果要找的元素距离当前的元素比较远，或藏的层级很深，如果用节点间关系查找，步骤很繁琐
(2). 解决: 今后，还可以按元素身上的HTML特征来查找任意位置的元素.
(3). 包括: 4个函数
a. 按id名查找一个元素对象:
1). var 一个元素对象=document.getElementById("id名");
在整个网页中查找元素
按id名
2). 返回值:
i. 如果找到指定id名的元素，则返回这个元素的对象
ii. 如果没找到指定id名的元素，则返回null
3). 强调:
i. .前必须是document
ii. 因为注定只能返回一个元素，所以，方法名中的Element是单数，没有s结尾。
4). 问题: 一次注定只能查找一个元素
b. 按标签名查找多个元素:
1). var 类数组对象=任意父元素.getElementsByTagName("标签名")
在任意父元素下查找元素们
按标签名
2). 返回值:
i. 如果找到指定标签名称的元素，就会放在一个类数组对象中返回。
ii. 如果没找到指定标签名称的元素，就返回空类数组对象:
{ length:0 } 不同于null
3). 强调:
i. .前可以写任意一个父元素，表示只在这个父元素内查找符合要求的元素。选择合适的父元素缩小查找范围，有助于提高查找速度！当然，如果确实需要在整个网页范围查找元素，.前也可以写document。
ii. 因为按标签名查找完全有可能找到多个元素，所以，函数名中Elements是复数形式，s结尾，表示多个。
iii. 不但在直接子元素中查找，而且还会在所有后代中查找符合要求的元素。
iv. 如果只找到一个符合要求的元素，也会返回一个类数组对象，然后，把唯一找到的元素，放在类数组对象中第一个[0]位置的元素。又因为，我们最终要操作的是元素对象，不是类数组对象，所以，如果想获得找到的唯一的一个元素对象，必须手工加[0]才能取出0位置的一个元素对象来继续操作。
c. 按class名查找多个元素:
1). var 类数组对象=任意父元素.getElementsByClassName("class名")
在任意父元素下获取多个元素
按class名
2). 返回值:
i. 如果找到指定class名的元素，就会放在一个类数组对象中返回。
ii. 如果没找到指定class名的元素，就返回空类数组对象:
{ length:0 } 不同于null
3). 强调:
i. .前可以写任意一个父元素，表示只在这个父元素内查找符合要求的元素。选择合适的父元素缩小查找范围，有助于提高查找速度！当然，如果确实需要在整个网页范围查找元素，.前也可以写document。
ii. 因为按class名查找完全有可能找到多个元素，所以，函数名中Elements是复数形式，s结尾，表示多个。
iii. 不但在直接子元素中查找，而且还会在所有后代中查找符合要求的元素。
iv. 如果只找到一个符合要求的元素，也会返回一个类数组对象，必须手工加[0]才能取出0位置的一个元素对象来继续操作。
v. 如果一个元素同时被多个class修饰，则只需要其中任意一个class，就可找到这个元素。
d. 按name名查找多个元素:
1). 何时: 今后如果查找带有name名的表单元素，都用按name名查找
2). 如何:
var 类数组对象=document.getElementsByName("name名")
在整个页面中查找多个元素
按Name名
3). 返回值:
i. 如果找到指定name名的元素，就会放在一个类数组对象中返回。
ii. 如果没找到指定name名的元素，就返回空类数组对象:
{ length:0 } 不同于null
4). 强调:
i. .前必须写document。
ii. 因为按name名查找完全有可能找到多个元素，所以，函数名中Elements是复数形式，s结尾，表示多个。
iii. 如果只找到一个符合要求的元素，也会返回一个类数组对象，必须手工加[0]才能取出0位置的一个元素对象来继续操作。
(4). 示例: 使用按HTML特征查找获取想要的元素
2_iterator.html
<!DOCTYPE HTML>
<html>
<head>
<title>遍历节点树</title>
<meta charset="utf-8"/>
</head>
<body>
<span>Hello World !</span>
<ul id="nav">
<li class="item parent">电影</li>
<li class="item parent">综艺
<ul>
<li class="item child active">跑男</li>
<li class="item child">爸爸</li>
<li class="item child">极限</li>
</ul>
</li>
<li class="item parent">剧集</li>
</ul>
<form>
用户名:<input name="uname"><br/>
性别:<label><input type="radio" name="sex" value="1">男</label>
<label><input type="radio" name="sex" value="0">女</label>
</form>
<script>
//查找id为nav的ul
var ulNav=document.getElementById("nav");
console.log(ulNav);
//查找id为navy的元素(不存在)
var navy=document.getElementById("navy");
console.log(navy);
//查找ulNav元素下所有li元素
var lis=ulNav.getElementsByTagName("li");
console.log(lis);
//查找ulNav下唯一内嵌的一个ul
//错误: 得不到ul元素对象，只能得到一个大的类数组对象
// var ul=ulNav.getElementsByTagName("ul");
var ul=ulNav.getElementsByTagName("ul")[0];
console.log(ul);
//查找ulNav下的td元素(不存在)
var tds=ulNav.getElementsByTagName("td");
console.log(tds);
//查找ulNav下所有class为child的元素
var children=ulNav.getElementsByClassName("child");
console.log(children);
//只查找ulNav下一个class为active的元素
//错误:
// var active=ulNav.getElementsByClassName("active")
var active=
ulNav.getElementsByClassName("active")[0];
console.log(active);
//查找name名为sex的所有表单元素
var radios=document.getElementsByName('sex');
console.log(radios);
//查找name名为uname的一个文本框对象
//错误:
// var txt=document.getElementsByName("uname");
var txt=document.getElementsByName("uname")[0];
console.log(txt);
</script>
</body>
</html>
运行结果:
3. 按选择器查找:
(1). 问题: 如果元素藏的很深，无法用一个条件一次性找到，则用以上两种方式查找，代码会很繁琐。
(2). 解决: 今后，只要无法凭借一个查询条件就能直接获得元素，都可以用选择器查找。
(3). 如何: 2个函数
a. 只查找一个符合要求的元素
1). var 一个元素对象=任意父元素.querySelector("任意css3选择器");
在任意父元素下查找元素
按选择器
2). 返回值:
i. 如果找到符合要求的元素，就返回一个元素对象
ii. 如果没找到返回null
3). 强调:
i. 可以用任意父元素作为.前的主语用来缩小查找范围。当然也可以用document。
ii. 不止查找直接子元素，而且在所有后代中查找。
b. 查找多个符合要求的元素:
1). var 类数组对象=任意父元素.querySelectorAll("任意css3选择器")
在任意父元素下查找 所有符合要求的元素
按选择器
2). 返回值:
i. 如果找到符合要求的元素，则返回一个类数组对象
ii. 如果没找到符合要求的元素，则返回空类数组对象: { length:0 }
3). 强调:
i. 可以用任意父元素作为.前的主语用来缩小查找范围。当然也可以用document。
ii. 不止查找直接子元素，而且在所有后代中查找。
4. 示例: 购物车效果
(1). 所有DOM效果，都可以标准的DOM4步来实现:
a. 先查找触发事件的元素
b. 为元素绑定事件处理函数
c. 再查找要修改的元素
d. 修改元素
(2). 点按钮，修改数量
a. 先查找触发事件的元素: 本例中查找table下所有button元素
b. 为元素绑定事件处理函数:
1). 什么是事件: 浏览器自动触发的或用户手工触发的页面中内容或状态的改变。
2). 什么是事件处理函数: 当事件发生时，我们希望自动执行的一个个任务函数。
3). 何时: 今后，只要希望每当元素上发生一个事件时，都能自动执行一项操作，都用事件处理函数
4). 如何: 都要提前将一个函数，保存到元素对象身上的一个专门的事件属性上。——事件绑定:2种
i. 在HTML中: 2步
先在<script>中定义一个函数(也可以放在<body>结尾)
再在<body>中HTML元素上为元素添加事件属性，并将函数调用语句保存在事件属性上。
<元素 on事件名="函数名()">
问题: 因为只能手工添加，所以极其不便于维护。
ii. 在js中绑定:
先在js中查找到要触发事件的元素
再为元素对象的事件属性赋值一个事件出路函数
元素对象.on事件名=function(){ ... }
优点: 可以用程序批量自动完成！
5). 结果: 每当浏览器侦测到这个元素上发生了一个事件/改变时，都会自动在这个元素身上查找与当前事件匹配的事件属性。然后，自动调用这个事件属性上提前保存的事件处理函数。
6). 问题: 在事件处理函数中，想获取当前触发事件的元素本身。如果使用事件处理函数外的全局变量，不靠谱。因为事件处理函数是在将来单击时才触发执行，而在元素被单击之前，全局遍历可能早就发生变化了！
7). 解决: 今后，只要想在事件处理函数内，自动获得正在触发事件的当前元素对象，可用this关键字！而不要用全局变量！
8). 扩展: 为什么改成let不好:
c. 再查找要修改的元素: （要放在事件处理函数内）
本例中: 查找当前按钮的爹的第二个孩子span
d. 修改span元素的内容:
1). 先获取span元素的内容，转为整数
2). 修改span元素的内容:
如果当前按钮的内容是+
就将整数+1
否则如果当前按钮的内容是-，并且整数的还值>1
才能整数-1
3). 最后，将计算出的新值再放回span的内容中
e. 示例: 实现点击按钮修改数量:
shoppingCart_0.html
(3). 数量修改，计算小计
a. 查找触发事件的元素——已完成
b. 绑定事件处理函数——已完成
c. 查找要修改的元素——要写在事件处理函数中
d. 修改元素——要写在事件处理函数中
(4). 小计修改，计算总价
a. 查找触发事件的元素——已完成
b. 绑定事件处理函数——已完成
c. 查找要修改的元素——要写在事件处理函数中
d. 修改元素——要写在事件处理函数中
e. 示例: 实现小计变化，计算总价:
shoppingCart.html
<!DOCTYPE HTML>
<html>
<head>
<title>使用Selector API实现购物车客户端计算</title>
<meta charset="utf-8" />
<style>
table {
width: 600px;
text-align: center;
border-collapse: collapse;
}
td,
th {
border: 1px solid black
}
td[colspan="3"] {
text-align: right;
}
/*想让tbody下每行最后一个td背景变为粉色*/
tbody td:last-child{
background-color:pink
}
/*想让tfoot下最后一个td背景变为黄色*/
tfoot td:last-child{
background-color:yellow
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>¥4488.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4488.00</td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>¥5288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥5288.00</td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>¥4288.00</td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥4288.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: </td>
<td>¥14064.00</td>
</tr>
</tfoot>
</table>
<script>
//DOM 4步:
//1. 查找触发事件的元素:
//本例中：查找table下的所有button元素
//1.1 先查找id为data的table
var table=document.getElementById("data");
//1.2 再查找table下所有button元素
var buttons=table.getElementsByTagName("button");
console.log(buttons);
//2. 为元素绑定单击事件:
//遍历查找结果buttons中每个按钮对象
for(var button of buttons){
//每遍历一个按钮对象button，就为当前按钮赋值一个事件处理函数
button.onclick=function(){
//希望点哪个按钮，让哪个按钮的内容变小花
//错误:全局变量button，在循环结束后已经指向最后一个按钮
// button.innerHTML="❀";
//正确:
// this.innerHTML="❀";
//3. 查找要修改的元素
//本例中: 查找当前按钮的爹的第二个孩子
var span=this.parentElement.children[1];
//4. 修改元素
//4.1 先获取span元素中的旧内容，转为数字
var n=parseInt(span.innerHTML);
//4.2 再对数字+1或-1
//如果当前按钮的内容是+
if(this.innerHTML=="+"){
n++;//就n++;
}else if(n>1){
//否则如果当前按钮的内容是-，并且n的值还>1
n--;//才n--;
}
//4.3 再将计算出来的新数字放回span元素的内容中
span.innerHTML=n;
/*功能二, 数量修改，计算小计*/
//3. 查找要修改的元素
//本例中：查找当前按钮的爹的下一个兄弟
var tdSub=this.parentElement.nextElementSibling
//4. 修改元素:
//4.1 先获得单价
var price=parseFloat(
this //当前按钮
.parentElement //当前按钮所在td
.previousElementSibling //当前td的前一个兄弟td
.innerHTML //前一个td的内容
.slice(1) //选取除了开头¥以外的剩余字符串
);
//4.2 单价*数量算出小计
var sub=price*n;
//4.3 将小计放入小计单元格的内容中
tdSub.innerHTML=`¥${sub.toFixed(2)}`;
/*功能三: 修改小计，计算总计*/
//3. 查找要修改的元素
//本例中: 最终要修改tfoot中最后一个总价单元格的内容
var tdTotal=document.querySelector(
"tfoot td:last-child"
);
console.log(tdTotal);
//4. 修改元素
//4.1 先获得tbody中每行最后一个小计td
var tds=document.querySelectorAll(
"tbody td:last-child"
)
console.log(tds);
//4.2 遍历查找结果中每个小计td
//先定义一个变量total=0，准备临时保存累加的总价
var total=0;
for(var td of tds){
//每遍历一个td,就获得当前td的内容，去掉¥，转数字后累加成总价
total+=parseFloat(td.innerHTML.slice(1));
}
//4.3 将总价放入到tfoot中最后一个总价单元格中。
tdTotal.innerHTML=`¥${total.toFixed(2)}`;
}
}
</script>
</body>
</html>
运行结果:
二. 修改: 3种东西: 内容，属性，样式
1. 内容: 3种
(1). 获取或修改元素开始标签到结束标签之间的原始的HTML内容
元素.innerHTML
内部 HTML
(2). 获取或修改元素开始标签到结束标签之间的纯文本内容:
a. 元素.textContent
文本 内容
b. 获取时: 比innerHTML多做2件事:
1). 去掉了内嵌的标签
2). 将特殊符号翻译为正文。
c. 修改时:
1). .innerHTML，会先将内容交给浏览器解析，然后显示解析后的可以给人看的结果
2). .textContent，不会将内容交给浏览器解析，而是无论多难看，都原样显示！
d. 总结: 建议:
1). 如果要操作的内容中包含HTML元素或特殊符号，首先innerHTML
2). 如果要操作的内容中不包含HTML元素或特殊符号，则innerHTML和textContent都行！
(3). 获取和修改表单元素的值:
a. 问题: 大部分表单元素，比如input，都是单标记，没有结束标签，所以无法使用innerHTML或textContent获取或修改元素的内容
b. 解决: 今后，只要先获取或修改任何一个表单元素的值，统一都用.value属性。
(4). 示例: 获取和修改各种元素的内容，比较差别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="msg1">来自<<<a href="#">新华社</a>>>的消息</h3>
<h3 id="msg2"></h3>
<h3 id="msg3"></h3>
<input id="txt"><button id="btn">百度一下</button>
<script>
//用两种方式获取msg1的内容
var msg1=document.getElementById("msg1");
console.log(msg1.innerHTML);
console.log(msg1.textContent);
//分别给两个h3赋值相同带有内嵌HTML标签的内容:
var msg2=document.getElementById("msg2");
var msg3=document.getElementById("msg3");
msg2.innerHTML=`来自<<<a href="#">新华社</a>>>的消息`;
msg3.textContent=`来自<<<a href="#">新华社</a>>>的消息`;
//想点击按钮，就能获得文本款中的内容，执行搜索操作
var btn=document.getElementById("btn");
btn.onclick=function(){
var txt=document.getElementById("txt");
console.log(`搜索${txt.value}相关的内容...`);
}
</script>
</body>
</html>
运行结果:
(5). 示例: 实现开关门效果：
0_door.html
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
div {
float: left;
height: 100px;
line-height: 100px;
}
#d1,
#d3 {
background-color: #ccff00;
}
#d2 {
cursor: pointer;
background-color: #ffcc00;
}
</style>
</head>
<body>
<div id="d1">树形列表</div>
<div id="d2"><<</div>
<div id="d3">内容的主体</div>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 查找id为d2的div
var d2=document.getElementById("d2");
//2. 绑定事件处理函数
d2.onclick=function(){
//3. 查找要修改的元素
//本例中: 查找id为d1的div
var d1=document.getElementById("d1");
//4. 修改元素
//如果当前d2的箭头<<，说明当前d1是开着的
if(this.innerHTML=="<<"){
//就把d1关上(隐藏)
//HTML中手工隐藏:
//<元素 style="display:none">
//js中:
d1.style.display="none";
//将当前d2的箭头改为>>
this.innerHTML=">>"
}else{//否则当前d2的箭头>>，说明当前d1是关着的
//就把d1打开
//HTML中手工显示:
//<元素 style="display:block">
//js中:
d1.style.display="block";
//将当前d2的箭头改为<<
this.innerHTML="<<";
}
}
</script>
</body>
</html>
运行结果：
2. 属性: 3种
(1). 字符串类型的HTML标准属性
a. 什么是: HTML标准中规定的，属性值为字符串类型的属性:
b. 比如: name, class, id, title, href, src, ...
c. 如何: 2种:
1). 旧DOM中的核心函数:4个
i. 获取一个属性的值: 元素.getAttribute("属性名")
获取 属性 值
ii. 修改一个属性的值: 元素.setAttribute("属性名", "属性值")
修改 属性 值
iii. 判断一个元素是否包含某个属性: 元素.hasAttribute("属性名")
是否有 这个属性
iv. 移除一个元素上的某个属性: 元素.removeAttribute("属性名")
移除 属性
2). 新HTML DOM中提供了一组简写:
i. 前提: HTML DOM中已经将所有字符串类型的HTML标准属性提前保存在了内存中元素对象身上。只不过暂时没有用的属性值默认为空字符串""
ii. 如何用HTML DOM实现以上四个功能：
获取一个属性的值: 元素.属性名
修改一个属性的值: 元素.属性名=属性值
判断元素是否包含某个属性: 元素.属性名!==""
移除一个属性: 元素.属性名=""
3). 示例: 分别使用核心DOM和HTML DOM操作元素的属性:
1_attribute.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a id="a1" href="http://tmooc.cn">go to tmooc</a>
<script>
var a1=document.getElementById("a1");
//旧核心DOM 4个函数
// //想获得a1的href属性值
// console.log(a1.getAttribute("href"));
// //想修改a1的target属性值
// a1.setAttribute("target","_blank");
// //想判断a1中是否包含id属性
// console.log(a1.hasAttribute("id"));//true
// //想移除a1的id属性
// a1.removeAttribute("id");
// //再次判断a1中是否包含id属性
// console.log(a1.hasAttribute("id"));//false
//新HTML DOM
console.dir(a1);
//想获得a1的href属性值
console.log(a1.href);
//想修改a1的target属性值
a1.target="_blank";
//想判断a1中是否包含id属性
console.log(a1.id!=="");//true
//想移除a1的id属性
a1.id="";
//再次判断a1中是否包含id属性
console.log(a1.id!=="");//false
console.log(a1);
</script>
</body>
</html>
运行结果:
总结: DOM4步
- 查找触发事件的元素
2. 绑定事件处理函数
3.查找要修改的元素 - 修改元素
总结: DOM 5件事: 增删改查+事件绑定:
//不要背！用到时，来查找，复制粘贴就行了！
1. 查找元素: 4种
(1). 不需要查找就可直接获得的元素对象: 4种:
document 根节点 document
document.documentElement —— <html>
document.head —— <head>
document.body —— <body>
(2). 如果已经获得一个元素对象，找周围附近的元素对象时，就用按节点间关系查找：2大类关系，6个属性
a. 父子关系: 4种
1). 元素的父元素: 元素.parentElement
2). 元素下的所有直接子元素: 元素.children
3). 元素下的第一个直接子元素: 元素.firstElementChild
4). 元素下的最后一个直接子元素: 元素.lastElementChild
b. 兄弟关系: 2种
1). 元素的前一个兄弟: 元素.previousElementSibling
2). 元素的后一个兄弟: 元素.nextElementSibling (3). 如果用一个特征就能找到想要的元素，就用按HTML特征查找：4个方法:
a. 按id查找:
var 一个元素对象=document.getElementById("id名");
b. 按标签名查找:
var 类数组对象=任意父元素.getElementsByTagName("标签名")、
c. 按class名查找:
var 类数组对象=任意父元素.getElementsByClassName("class名")
d. 按name名查找表单元素:
var 类数组对象=document.getElementsByName("name名")
(4). 如果通过复杂的查找条件，才能找到想要的元素时，就用按选择器查找: 2个方法
a. 只查找一个符合条件的元素:
var 一个元素=任意父元素.querySelector("任意选择器")
b. 查找多个符合条件的元素:
var 类数组对象=任意父元素.querySelectorAll("任意选择器")
总结: 查找函数的返回值规律: 3种
1. 如果原函数返回的是下标位置i， 则如果找不到-1
2. 如果原函数返回的是一个数组或一个对象，则如果找不到返回null
3. 如果原函数返回的是类数组对象，则如果找不到，返回空类数组对象: {length:0 }
|
2. 修改元素: 3种东西可修改
(1). 修改内容: 3种内容可修改:
a. 获取或修改元素的HTML内容:
元素.innerHTML
b. 获取或修改元素的纯文本内容:
元素.textContent
c. 获取或修改表单元素的值:
表单元素.value
(2). 修改属性: 3种
a. 字符串类型的HTML标准属性: 2种:
1). 旧核心DOM: 4个函数
i. 元素.getAttribute("属性名");
ii. 元素.setAttribute("属性名", "属性值")
iii. var bool=元素.hasAttribute("属性名")
iv. 元素.removeAttribute("属性名")
优点: 万能, 缺点: 繁琐
2). 新HTML DOM:
i. 元素.属性名
ii. 元素.属性名="属性值"
iii. 元素.属性名!==""
i. 元素.属性名=""
优点: 简单, 缺点: 不万能
总结: this 6种:
2. new Fun() this->new正在创建的新对象
3. 类型名.prototype.共有方法=function(){... }
this->将来谁调用这个函数，就指谁
将来调用这个函数的.前的某个子对象
4. fun() 和回调函数 和匿名函数自调 this->默认指window
- 访问器属性中的this指访问器属性所在的当前对象
6. 在DOM的事件处理函数内的this->当前正在触发事件的DOM元素对象
