一. 查找:
1. 不需要查找就可以直接获得的元素
2. 按HTML特征查找:
3. 按节点间关系查找:
4. 按选择器查找: 2个函数:
(1). 只查找一个符合条件的元素:
a. var 一个元素对象=任意父元素.querySelector("选择器")
//查找 选择器
b. 意为: 在指定的父元素范围内，查找符合选择器要求的子元素
c. 返回值:
1). 如果找到符合条件的元素，则仅返回第一个符合条件的元素对象
2). 如果找不到符合条件的元素，会返回null
d. 强调:
1). .前可以写任意父元素，来限制只在这个父元素内查找，可缩小查找范围
2). 选择器必须相对于.前的父元素向下写，不能包含.前的父元素
比如: 在table下找tfoot下的最后一个td:
table.querySelector("tfoot td:last-child") √
table.querySelector(`table tfoot td:last-child`) ×
因为table下不会再有table，所以找不到！
(2). 查找多个符合条件的元素对象:
a. var 类数组对象=任意父元素.querySelectorAll("选择器")
b. 意为: 在指定父元素下，查找所有符合选择器要求的元素对象
c. 返回值:
1). 如果找到，返回包含多个符合条件的元素的类数组对象
2). 如果找不到，返回空类数组对象
d. 强调:
1). .前可以写任意父元素，来限制只在这个父元素内查找，可缩小查找范围
2). 选择器必须相对于.前的父元素向下写，不能包含.前的父元素
5. 示例: 购物车:
6. 总结: 何时使用按HTML特征查找，何时使用按选择器查找:
(1). 因为按HTML特征查找功能虽然简单，但是效率高！所以，如果查找条件简单，单靠按HTML查找，就能找到符合条件的元素时，一定首选按HTML特征查找
(2). 如果查找条件复杂，使用多个按HTML特征查找效率反而低！不如换成用选择器查找一步到位！效率反而高！
二. 修改元素: 拿到一个元素后，我们可修改它的三样东西！
1. 可获取或修改元素的内容
(1). 获取或修改原始的HTML内容: 元素.innerHTML
a. 获取原始HTML内容时: HTML代码里边写的是什么，我们拿到的就是什么！
b. 修改原始HTML内容时: 如果给一段HTML代码片段，则代码片段会被浏览器解析，将解析后的结果显示到页面上给人看！
(2). 获取或修改纯文本内容: 元素.textContent
// 内容
a. 获取纯文本内容: 将HTML代码片段去掉内嵌的标签和特殊符号，只保留纯文本的内容。
b. 修改纯文本内容: 要修改内容中即使包含HTML片段，也不会被浏览器编译，而是将HTML代码片段直接显示到页面上。
(3). 获取或修改表单元素的值:
a. 问题: 表单元素多数是单标记，没有结束标签，一个标签就能起作用，所以既没有innerHTML，又没有textContent
b. 今后只要获取或修改表单元素的值，都用: 元素.value
2. 可获取或修改元素的属性
(1). 字符串类型的HTML标准属性:
a. 什么是HTML标准属性: HTML标准中规定的所有元素默认都有的属性
b. 可用早期的核心DOM函数获取或修改HTML标准属性: 4个函数
1). 元素.getAttribute("属性名") //获得当前元素上指定属性的属性值
获得Html元素上的属性值
2). 元素.setAttribute("属性名", "新属性值") //修改元素上的指定属性值为新值
修改 Html元素上的属性值
3). 元素.removeAttribute("属性名") //移除元素上指定名称的属性
移除 Html元素上的属性值
4). 元素.hasAttribute("属性名") //判断当前元素上是否包含指定名称的属性
(是否)有 Html元素上的属性值
d. 简写： 出了可以使用核心DOM4个函数之外，其实DOM提供了简化的方式
1). HTML DOM: 对常用的属性提供的简化访问方式
2). 其实HTML DOM标准已经将HTML标准属性，提前放在了内存中的元素对象身上！只不过属性值暂时为""
3). 其实所有字符串类型的标准属性，都可以用"元素.属性名"方式直接访问！
|
原理: 网页中的每个元素经过浏览器扫描后，都会在js程序内存中创建一个对应的元素对象存储元素的属性值。 只不过连未提供属性值的其他HTML标准属性，也一起提前放在内存中的元素对象上备用，只不过这些暂时无效的HTML标准属性值暂时为""。 |
4). 包括:
i. 获取属性值: 元素.属性名
ii. 修改属性值: 元素.属性名="新值"
iii. 移除属性值: 元素.属性名=""
iv. 判断是否包含该属性: 元素.属性名!==""
5). 特例: class属性:
i. 问题: ECMAScript标准中已经规定了class是js语言的关键词，所以DOM标准无法继续使用"class"来表示元素的class属性
ii. 解决: 今后只要想在DOM中访问元素的class属性，必须更名为className
元素.className="xxx" 就等效于操作<元素 class="xxx">
(2). Bool类型的HTML标准属性
a. 什么是Bool类型的HTML标准属性: 不需要给属性值，直接放在HTML元素上就起作用的属性。
比如: <button disabled></button>
禁用
<input type="checkbox" checked/>
勾选
<select>
...
<option selected></option>
被选中
...
<input type="text" readonly/>
读 只
只 读
<select multiple>
多个
b. 原理: 浏览器扫描元素时，发现这种属性，就会在内存中创建元素对象时，自动设置这个属性的值为true。反之，如果在扫描时，没有发现元素上写有这种属性，也会在内存中的对象身上添加这个属性，只不过，属性值默认为false
c. 问题: 核心DOM 4个函数只能操作字符串格式的属性，无法操作bool类型的属性，所以，核心DOM 4个函数不能操作bool类型的标准属性
d. 解决: 只能用HTML 打.方式来访问! 且属性值必须是bool类型的true/false
e. 示例: 分别使用核心DOM函数和HTML DOM操作bool类型的标准属性
|
<body> <input id="chb" type="checkbox"/> <script> var chb=document.getElementById("chb"); //获得chb是否被选中: //错误: console.log(chb.getAttribute("checked")); //正确: console.log(chb.checked);//false //用程序选中chb //错误:chb.setAttribute("checked",true); //正确: chb.checked=true; console.log(chb.checked);//true //用程序再次将chb取消选中 //错误: chb.setAttribute("checked",false); chb.checked=false; console.log(chb.checked);//false </script> </body> |
f. CSS中匹配不同状态的伪类:
1). :checked 匹配勾选的元素
2). :disabled 匹配禁用的元素
3). :selected 匹配选中的下拉列表项
(3). 自定义扩展属性
3. 可获取或修改元素的样式
(1). 修改一个元素的内联样式:
a. js中: 元素.style.css属性="属性值"
b. 相当于在HTML中手动为元素添加style属性，其中定义css属性值
<元素 style="css属性:属性值">
2. 修改:
(1). 内容:
a. 如果获取或修改元素的内容，几乎都首选innerHTML
b. 只有在希望获得纯文本内容时，才被迫选择textContent
c. 如果获取或修改表单元素的值，都用.value
(2). 属性:
a. 字符串类型的HTML标准属性:
1). 核心DOM4个函数:
元素.getAttribute("属性名")
元素.setAttribute("属性名","属性值")
元素.removeAttribute("属性名")
元素.hasAttribute("属性名")
2). HTML DOM简写: ——首先
元素.属性名
元素.属性名="新值"
元素.属性名=""
元素.属性名!==""
b. bool类型的HTML标准属性:
1). 不能用核心DOM 4个函数来访问
2). 只能用"元素.属性名"方式来访问
3. 添加/删除
4. 事件绑定:
元素.on事件名=function(){
//this->当前正在触发事件的这个元素对象
//强调: 尽量不要使用外部的变量来获取当前元素
}