第九天 DOM

JS中常用的DOM操作

DOM：document object model 文档对象模型（提供一系列的属性和方法，供我们获取和操作DOM元素）

1.获取DOM的方式

• document.getElementById([元素的ID])：在整个文档中，根据元素的ID，获得这个元素对象
  • document是获取元素的上下文（获取元素的范围），getElementById方法的上下文只能是document
  • 获取到的结果是一个对象（堆内存：里面存储着很多内置的属性和方法）
• [context].getElementsByTagName([标签名])：在指定的上下文中，基于元素的标签名获取一组元素集合
  • 获取的结果是HTMLCollection元素集合
• [context].getElementsByClassName([样式类名])：在指定上下文中，基于样式类名获取对应的元素集合
  • 不兼容IE6~8低版本浏览器
• document.getElementsByName([NAME属性值])：根据元素的NAME属性值，在整个文档中获取一组元素集合
  • 在IE浏览器中（9及以下）只对表单元素作用
• document.documentElement：获取整个HTML元素对象（HTML是页面的根节点）
• document.body：获取整个BODY元素对象
• document.head：获取整个HEAD元素对象

不兼容IE6~8低版本浏览器，可以根据选择器（类似于CSS选择器）快速获取元素和元素集合的办法：

• [context].querySelector([SELECTOR]) 获取一个元素对象
• [context].querySelectorAll([SELECTOR]) 获取一组元素集合
  在不考虑兼容的情况下，这两个方法就足以获取我们需要的元素对象和元素集合了

2.获取DOM节点的属性和方法

我们认为在页面中所有呈现的内容，都是DOM文档中的一个节点（node），例如：元素标签是元素节点、注释的内容是注释节点、文本内容是文本节点、document是文档节点...

节点和节点之间的关系属性

描述节点和节点之间的关系属性，基于这些属性可以获取到指定的节点

• [CONTAINER].childNodes：获取当前容器中所有的子节点（包含各种类型的节点）
• [CONTAINER].children：获取当前容器中所有的元素子节点（只有元素标签的，在IE低版本浏览器中，也会把注释当做元素节点）
• [NODE].parentNode：获取某一个节点的父节点
• [NODE].previousSibling：获取某一个节点的上一个哥哥节点
• [NODE].previousElementSibling：获取某一个节点的上一个哥哥元素节点（不兼容IE低版本）
• [NODE].nextSibling：获取某一个节点的下一个弟弟节点
• [NODE].nextElementSibling：获取某一个节点的下一个弟弟元素节点（不兼容IE低版本）
• [CONTAINER].firstChild：获取容器中第一个子节点
• [CONTAINER].firstElementChild：获取容器中第一个元素子节点（不兼容IE低版本）
• [CONTAINER].lastChild：获取容器中最后一个子节点
• [CONTAINER].lastElementChild：获取容器中最后一个元素子节点（不兼容IE低版本）

3.关于DOM元素中的增加/删除/修改

• document.createElement([标签名])：动态创建一个DOM元素

• [CONTAINER].appendChild([元素])：把元素动态插入到指定容器的末尾

• [CONTAINER].insertBefore([新元素],[原始页面中的元素])：把新创建的元素放置到指定容器原始页面元素的前面 [原始页面中的元素]肯定在[CONTAINER]容器中

• [CONTAINER].removeChild([元素])：在指定容器中移除元素

• document.createTextNode()：创建一个文本节点

• ...

• 设置元素的属性/自定义属性

  • 元素.xxx=xxx
  • 元素.setAttribute(xxx,xxx) setAttribute/getAttribute/removeAttribute

4.修改DOM元素的样式

• 元素.style.xxx ：修改（获取）当前元素的行内样式
  • 操作的都是行内样式，哪怕把样式写在样式表中，只要没有写在行内上，也获取不到
• 元素.className：操作的是当前元素的样式类，基于样式类的管理给予其不同的样式

5.给DOM元素设置内容

• innerHTML / innerText：给非表单元素设置或者操作其内容
• value：操作表单元素的内容

给元素设置自定义属性

1. 每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可

• 元素.xxx = xxx 或者 元素[xxx]=xxx
• 对象键值对的操作

2. 每一个元素也是一个标签，我们可以操作其DOM结构，给结构上新增自定义的属性

• 元素.setAttribute('xxx', 'xxx')

两种方案的原理是不一样的，一个操作的是堆内存，一个操作的是DOM结构