JS操作DOM

JS操作DOM(Document Object Model–文档对象模型)

个人觉得JS操作DOM与JS操作BOM最大的不同之处是JS操作DOM是针对于HTML文档结构树来操作文档对象的，而操作BOM就和浏览器之间的操作多一点。比如说弹出窗口、提示框等等，BOM与用户交互更近一些。而DOM就和HTML文档近一些，通过操作节点和节点的属性来改变元素的一些样式。DOM也可以起到与用户交互更好的作用。

---

操作分类：

• DOM-Core(核心)
• HTML-DOM

• CSS-DOM

  1. DOM-Core是JS用来操作DOM的核心。类似于document.getElementById()都是属于DOM-Core的。
  2. HTML-DOM就是操作HTML节点的。类似于document.form这些都是属于HTML-DOM的。
  3. CSS-DOM就是通过JS操作css样式来动态的改变一些节点的文本内容。例如说：
     element.style.color=”red”；

---

节点之间的关系

1. 整个HTML文档是一个文档节点。
2. 每个HTML标签是一个元素节点。
3. 包含在HTML元素中的文本是一个文本节点。
4. 每个HTML属性是一个属性节点。
5. 注释属于注释节点。

注意：做一些节点操作时，HTML文档的空格有时会影响节点操作。比如我们在有些时候追求美观好看，把HTML页面写的很开，空格较多，有时获取下一个节点时，由于空格就会找不着。而且这种错误很难被忽略。

---

访问节点：

使用DOM-Core访问节点有两种方式：
1. 使用getElement系列方法访问。
2. 根据当前节点的层次关系来访问。

getElement系列：

1. getElementById()：按照id查找。
2. getElementsByName()：按照name查找指定元素集合
3. getElementsByTagName()：按照标签名称查找指定元素集合。

getElement系列有很多，但意思大都简单明了。很好使用。需要注意的是获取的是唯一一个节点还是节点集合。

根据节点层次访问节点：

1. parentsNode 节点的父节点
2. childNodes 节点的子节点的集合
3. firstchild 节点的第一个子节点
4. lastchild 节点的最后一个子节点
5. nextSibling 节点的下一个兄弟节点
6. previousSibling 节点的上一个兄弟节点

节点操作都很好理解，需要注意的是由于浏览器之间的兼容性问题，操作节点可能有些会不支持导致错误。这时用到的这几个节点可以：

1. firstElementChild 节点的第一个子节点
2. lastElementChild 节点的最后一个子节点
3. nextElementSibling 节点的下一个兄弟节点
4. previousElementSibling 节点的上一个兄弟节点

访问节点信息

1. nodeName 节点名称
2. nodeValue 节点值
3. nodeType 节点类型

节点类型所对应的值：
元素Element：     1
属性attr：     2
文本text：     3
注释comments：     8
文档document：     9

---

操作节点

操作节点的属性：

getAttribute(“属性名”)
setAttribute(“属性名”,”属性值”)

创建和插入节点：

createElement(tagName)
父节点 . appendchild（B）
父节点 . insertBefore（A，B）
cloneNode(true/false)true表示复制节点下的所有节点。false表示只赋值该节点和其属性。

删除和替换节点：

父节点 . removeChild(node)

---

操作节点样式

JS有两种来动态的改变css属性值：

1. 使用样式的style属性：
   HTML元素 . style . 样式属性：=“值”；

注意样式属性要去掉css样式的“-”并且“-”后的单词要大写。类似于Java中的驼峰命名法

1. 使用className属性：
   HTML元素 . className =” css样式名称”

---

获取元素位置

触发事件：

onscroll：用于捕捉页面追至或水平的滚动

对象：

currentstyle：获取元素属性值时判断是否为IE浏览器。

这个属性通常在不同浏览器兼容性判断时用到。

offsetLeft：当前元素到上级元素左边界的距离。
offsetTop：当前元素到上级元素上边界的距离。
offsetHeight：元素高度。
offsetWidth：元素宽度。
offssetParent：元素最近的动态定位的包含元素的引用。
scrollTop：元素滚动条的垂直距离。
scrollLeft：元素滚动条的水平距离。
clientWidth：元素可见宽度。
clientHeight：元素课课可见高度。