正课:
查找:
修改:
查找:
按节点间关系查找: 何时: 如果已经获得一个元素，要找周围元素时 如何: 节点树: 包含所有网页内容(元素,文本等)的树结构 2大类:
父子关系: node.parentNode 获得node的父节点 node.childNodes 获得node的所有直接子节点 node.firstChild 获得node的第一个直接子节点 node.lastChild 获得node的最后一个直接子节点兄弟关系: node.previousSibling 获得node的前一个兄弟 node.nextSibling 获得node的后一个兄弟 问题: 会受到看不见的空字符的干扰！ 元素树: 仅包含元素节点的树结构 优点: 不包含空字符节点，不受空字符干扰！ 强调: 元素树不是一棵新树，只是节点树的子集 包括: 2大类:父子关系: node.parentElement 获得node的父元素 node.children 获得node的所有直接子元素 node.firstElementChild 获得node的第一个直接子元素 node.lastElementChild获得node的最后一个直接子元素兄弟关系: node.previousElementSibling 获得node的前一个兄弟元素 node.nextElementSibling 获得node的后一个兄弟元素 鄙视: 遍历指定父元素下所有子节点: 2步:先仅遍历直接子节点 问题: childNodes和children返回的是动态集合 动态集合: 不实际存储属性值，每次访问集合，都重新查找DOM树 优: 首次查找速度快，因为不必返回所有数据 缺: 反复访问集合，会导致反复查找DOM树 所以: for(var i=0;i<children.length;i++) 不好 解决: for(var i=0,len=children.length;i<len;i++)对每个直接子节点，调用和父节点完全相同的函数按HTML查找: 4个:
按id查找: var elem=document.getElementById(“id”) 强调: 1. 只能用document调用 2. 每次只能找到一个元素对象
按标签名查找: var elems=parent.getElementsByTagName(“标签名”) 强调: 1. 可在任意父元素上调用 2. 返回动态集合 3. 不仅查找直接子元素，且查找所有后代元素
按name属性查找: var elems=document.getElementsByName(“name”) 强调: 1. 只能在document上调用 2. 专门用于查找表单元素 3. 返回动态集合
按class属性查找: var elems=parent.getElementsByClassName(“class”) 强调: 1. 可在任意父元素上调用 2. 返回动态集合 3. 不仅查找直接子元素，且查找所有后代元素 4. 只要用修饰当前元素的多个class中任意一个class，都可找到当前元素。
按选择器查找:
仅查找一个元素: var elem=parent.querySelector(“选择器”)
查找多个元素 var elems=parent.querySelectorAll(“选择器”) 强调：1. 可在任意父元素上调用 2. 不仅查找直接子元素，且查找所有后代 3. 受制于浏览器的兼容性限制 4. 返回非动态集合 非动态集合: 返回完整数据的集合，即使反复访问集合，也不会反复查找DOM树 优: 即使反复访问集合，也不会反复查找DOM树 缺: 首次查找效率低
鄙视: 按HTML vs 按选择器, 如何选择:
返回值: 按HTML查找，返回动态集合 按选择器查找，返回非动态集合
首次查找效率: 按HTML查找，效率高 按选择器查找，效率低
易用性: 按选择器查找，简单好用 按HTML查找，繁琐 总结: 如果只靠一个条件就可找到元素时，首选按HTML找 如果查找条件复杂，首选按选择器查找
修改: 3种: 内容: 3种:
元素的HTML代码片段内容: .innerHTML
元素的纯文本内容: .textContent vs .innerHTML: 删除内嵌标签 并 转移字符翻译为正文
表单元素的值: .value 属性: 3种:
HTML标准属性:2种:
核心DOM API: .getAttribute(“属性名”) .setAttribute(“属性名”,“值”) .hasAttribute(“属性名”) .removeAttribute(“属性名”)
HTML DOM API: 对核心DOM中常用的API进行的简化 HTML DOM已经提前将所有标准属性做成了内存中元素对象的属性，默认值都是"": elem.属性名 特例: class ES标准中已经有了class属性 所以DOM中将网页的class属性，更名为className
状态属性: enabled disabled selected checked 值是bool类型！不能用核心DOM操作 只能用HTML DOM打.操作
自定义扩展属性 什么是: 程序员自发添加的自定义属性 何时: 2个场景:
在客户端临时缓存业务数据
代替元素/class等选择器，用于查找元素绑定事件 元素和class做选择器添加行为的弊端: 元素和class极有可能频繁修改，导致js程序失效 解决: 今后，所有事件绑定都要查找自定义属性 如何: 添加自定义扩展属性: 在开始标签中: data-属性名=“值” 访问自定义扩展属性: 肯定不能用HTML DOM，因为内存中的对象上，没有！ 2种:
用核心DOM:
HTML5标准: elem.dataset.自定义属性名 dataset可自动收集开始标签中的data-开头的自定义属性 样式: 只有一种样式可修改: 内联样式 elem.style.css属性=“值” 相当于:<elem style=“css属性:值” css属性名都要去横线变驼峰 z-index => zIndex 获取样式: 不能用.style，仅能获得内联样式 解决: 获得计算后的完整样式: var style=getComputedStyle(elem) var value=style.css属性 限制: 计算后的属性禁止修改！因为来源不确定！可能牵一发而动全身！ 总结: 如果修改样式: .style.css属性 如果获取样式: getComputedStyle(elem)
