DOM
文档对象模型，是W3C组织推荐的处理可扩展标记语言（XTML或者XML）的标准编程接口。
DOM树
- 文档
- 根元素
- 元素 属性
- 文本
- 文档：一个页面就是一个文档，DOM使用document表示。
- 元素：页面中的所有标签都是元素，DOM中使用element表示。
- 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示。
DOM把以上内容都看作是对象。
获取元素
DOM主要用来操作元素。
方法
-
根据ID获取
使用getElementById（）方法获取带有ID的元素对象。
参数 id是大小写敏感的字符串。
返回值：是一个元素对象。
console.dir（）；打印返回的元素对象。（查看属性和方法）
-
根据标签名获取
使用getElementsByTagName（‘div（li）’）方法获取带有指定标签名的对象的集合。
返回值：获取到的元素的集合（以伪数组的形式存储）。
-
通过HTML新增的方法获取
使用getElementByClassName（‘类名’）方法：根据类名返回元素对象集合。
使用querySelector（‘。box #nav li’）方法：根据指定选择器返回第一个元素对象。
**使用querySelectorAll（‘。box #nav li’）方法：****返回指定选择器的所有元素对象集合
-
特殊元素获取（body，html）
获取body元素
document.body;
获取html元素
document.documentElement;
事件基础
-
事件：触发—响应机制
-
事件三要素：事件源，事件类型，事件处理程序
事件源：事件被触发的对象。
事件类型：如何触发，什么事件
事件处理程序：通过一个函数赋值的方式完成
-
执行事件的步骤
获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式0
操作元素
JavaScript中的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容和属性等（注意：都是属性）
操作元素内容
- **element.innerText：**从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会去掉。
- **element.innerHTML：**起始位置到终止位置的所有内容，包括HTML标签，同时保留空格和换行。
常用元素的属性操作
- innerText，innerHTML 改变元素内容
- src，href
- id，alt，title
表单元素的属性操作
利用DOM操作如下表单元素的属性
- type，value，checked，selected，disabled
- **核心算法：**利用flag变量，来判断flag的值，
样式属性操作
通过JS修改元素的大小，颜色，位置等属性。
-
element.style：行内样式操作
-
element.className：类名样式操作 （this.className=‘change’ change为style中的属性）
-
注意：JS里面的样式采取驼峰命名法，比如:fontSize，BackgroundColor。
JS修改style样式操作，产生的是行内样式，css权重比较高。
-
onfocus：获得焦点事件
-
onblur：失去焦点事件
-
注意：如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性。
className会直接更改元素的类名，会覆盖原先的类名。
自定义属性的操作
获取属性值
- element . 属性：获取内置属性值（元素本身自带的属性）
- element . getAttribute（‘属性’）：获取自定义的属性。
设置属性值
-
element . 属性 = ‘值’
-
element . setAttribute（‘属性’，‘属性值’）；
备注：class特殊，里面只能写class，不能写其他。
移除属性值
- element . removeAttribute( ‘ 属性 ’ )
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
注意：H5自定义属性：data-开头作为属性名并且赋值。
获取H5自定义属性：element . dataset .index或者element .dataset [ ‘ index ’ ]
节点操作
节点
网页中的所有内容都是节点（标签，属性，文本。注释等），在DOM中，节点使用node来表示。
一般而言，节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）这三个基本属性
- 元素节点：nodeType为1
- 属性节点：nodeType为2
- 文本节点：nodeType为3（文本节点包含文字，空格，换行）
注意：节点操作主要操作的是元素节点。
节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
-
父级节点
node . parentNode，得到的是离元素最近的父级节点。找不到父节点返回null
-
子节点
parentNode . childNodes(标准)：返回包含指定节点的子节点的集合，该集合为即时跟新的集合。
parentNode . child（非标准）：是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
parentNode . firstChild ：返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
parentNode . lastChild ：返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
parentNode . firstElementChild ：返回第一个子元素节点，找不到则返回null。
parentNode . lastElementChild ：返回最后一个子元素节点，找不到则返回null。
实际开发中，既没有兼容性问题又返回第一个（最后一个子元素）子元素
console.log(ol.children[0]); console.log(ol.children[ol.children.length-1]); -
兄弟节点
node . nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包含所有的节点。
node . previousSibling：返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点。
node . nextElementSibling：返回当前元素的下一个兄弟元素节点，找不到则返回null。
node . previousElementSibling：返回当前元素的上一个兄弟元素节点，找不到则返回null。
解决兼容性问题的函数（自己封装）
function getNextElementSibling(element){ var el=element; while(el=el.nextSibling){ if(el.nodeType===1){ return el; } }return null; }
创建节点
-
document . createElement( ‘ tagName ’ )
此方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
-
node. appendChild(child) node父级 child子级
此方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
-
node . insertBefore(child , 指定元素)
此方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。
-
node . removeChild(child)
此方法从DOM中删除一个子节点，返回删除的节点。
小技巧：阻止链接跳转 javascript：void（0）或者 javascript：；
复制节点（克隆节点）
-
node . cloneNode
此方法调用该方法的节点的一个副本，也称为克隆节点 / 拷贝节点。
如果括号参数为空或者是false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为true，则是深拷贝，即复制标签复制里面的内容等。
三种动态创建元素区别
-
document.write()
直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
-
element.innerHTML
是将内容写入某个DOM节点，不会导致页面重绘。
创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
-
document.createElement()
创建多个元素效率稍微低一点点，但是结构更清晰。
关于DOM操作，主要针对元素的操作。主要有创建，增，删，改，查，属性操作，事件操作。
每日一句
母爱是一缕阳光，让你的心灵即便在寒冷的冬天也能感受到温暖如春；母爱是一泓清泉，让你的情感即使蒙上岁月的风尘仍然清澈澄净
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
