Javascript DOM 简单概述

Javascript DOM 简单概述

节点类型

1. 元素节点-NodeType ：1
2. 属性节点-NodeType ：2
3. 文本节点-NodeType ：3

---

选取DOM元素

遍历DOM选取

1. document.getElementById()。
2. document.getElementsByClass()。
3. document.getElementsByTagName()。

根据已知元素选取

1. element.nextSubling()，已知元素的下一个兄弟节点。
2. element.childNodes[index]，已知元素的下标为index的子节点。
3. element.firstChild/p.lastChild，已知元素的首/末子节点。

---

设置属性节点

使用DOM Core方法（不仅适用于 HTML，同时适用于XML等文档）

1. element.getAttribute(attrName);
2. element.setAttribute(attrName, value);

使用HTML DOM 属性节点-使用 . 法访问和设置

1. 一般属性节点，element.src / element.title等。
2. class属性节点，使用className
3. style属性节点，如果不是内联的样式无法访问，但可以通过style添加样式

---

设置文本节点

使用nodeValue，且需要选中该文本节点后才能获取和设置

element.firstChild.nodeValue = value;

---

动态设置元素节点

使用innerHTML / document.write()

1. 避免使用document.write()
2. 使用innerHTML无法得知是插入还是替换其中的内容

使用DOM方法

1. 创建元素
   1. document.createElement(TagName)，创捷元素节点
   2. document.createTextNode(text)，创建文本节点
2. 插入元素-需要获取其父节点parentNode
   1. parentNode.appendChild(child)，插入并成为父节点的firstChild
   2. parentNode.insertBefore(newElement, targerElement)，在目标元素前面插入新的元素