前端学习之dom

1. dom
   定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
   关于如何获取、修改、添加或删除 HTML 元素的标准。

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

节点彼此拥有层级关系。
常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系.

节点的 innerHTML 属性来访问文本节点的值。

2. dom方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。
HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法
getElementById() 方法返回带有指定 ID 的元素：
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

属性
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

3. DOM属性

获取元素内容的最简单方法是使用 innerHTML 属性。

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

4. DOM访问

5. DOM修改

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

6. 元素

(1) 创建新的 HTML 元素 - createElement()
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

这段代码创建了一个新的<p> 元素：
var para=document.createElement(“p”);

首先必须创建文本节点。这段代码创建文本节点：
var node=document.createTextNode(“这是一个新段落。”);

然后必须向 <p> 元素追加文本节点：
para.appendChild(node);

这段代码查找到一个已有的元素：
var element=document.getElementById(“div1”);

这段代码向这个已存在的元素追加新元素：
element.appendChild(para);

(2) 创建新的 HTML 元素 -insertBefore()

element.insertBefore(para,child);

(3) 删除已有的 HTML 元素

var parent=document.getElementById(“div1”);
var child=document.getElementById(“p1”);
parent.removeChild(child);

(4) 替换 HTML 元素

parent.replaceChild(para,child);

7. DOM事件