HTML DOM

HTML DOM

定义了访问和操作 HTML 文档的标准方法。
DOM：文档对象模型，以树形结构描述HTML。

HTML DOM 节点

节点类型	说明
文档节点	整个html文档
元素节点	html中的每个元素
文本节点	每个元素内的文本内容
属性节点	html中的每个属性
注释节点	html中的注释

HTML DOM 属性

在节点上获取或设置值

属性	说明
innerHTML	规定节点的文本内容
nodeName	规定节点的名称
nodeValue	规定节点的值
nodeType	返回节点的类型
parentNode	表示父节点
firstChild	表示第一个子节点
lastChild	表示最后一个子节点
documentElement	表示文档节点
body	表示文档的主体
childNodes	表示一个节点列表

HTML DOM 方法

在节点上执行的动作

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

常用操作

获取节点

利用元素的id获取html元素节点：

// 如果找到该元素，将以对象的形式返回该元素，否则返回null
document.getElementById(id_name);

利用类名获取html元素节点：

// 返回文档中所有指定类名的元素节点列表，作为 NodeList 对象
document.getElementByClassName(class_name);

利用name属性获取html元素节点：

// 返回带有指定名称的元素节点集合，作为Collection对象
document.getElementsByName(name);

利用标签名获取该元素节点集合：

// 返回带有指定标签名的元素节点集合，作为Collection对象
document.getElementsByTagName(tag_name);
或
// 返回指定id下的所有该标签的节点集合
var x = document.getElementById(id_name);
x.getElementsByTagName(tag_name);

向html输出内容：

// 向html输出流写入内容，若在html加载后写入，会覆盖整个html文档
document.write(text);

改变html元素的内容：

// innerHTML
var x = doucument.getElement..   // 用以上的方法获取html的元素
x.innerHTML = text;  // 利用text代替元素的原有内容
或
x.nodeValue = text;  // 利用节点的属性修改元素的内容

改变html元素的属性：

// 元素.属性 = 新属性值
var x = doucument.getElement..   // 用以上的方法获取html的元素
x.属性 = "新属性值";  // 用新属性值代替元素指定属性中的旧值

改变html元素的样式：

// 元素.style.CSS属性 = 新值
var x = doucument.getElement..   // 用以上的方法获取html的元素
x.style.CSS属性 = "新值";  // 用新值代替元素样式中指定CSS属性中的旧值

创建节点

// 创建元素节点
document.createElement(element);
// 创建文本节点
document.createTextNode(text);

添加节点

// 将节点添加到尾部
element.appendChild(other_element);
// 将节点插入到某节点之前
element.insertBefore(待插入节点, 某节点);

移除节点

// 移除子节点
element.removeChild(child_element);

替换节点

// 替换子节点
element.replaceChild(new_element, old_element);

HTML DOM Collection 元素集合对象

类似一个包含 HTML 元素的数组列表

// 集合属性，为集合的大小
collection.length;
// 集合方法，返回指定索引的元素
collection.item(index);
// 集合方法，返回指定id或name的元素
collection.namedItem(id/name);

HTML DOM NodeList 节点列表对象

// 获得节点列表
element.childNodes;
document.querySelectorAll(element);
// 列表大小
nodelist.length;
// 访问列表
nodelist[index];

DOM事件

事件	说明
onclick	点击html元素时，触发JS事件
onmousedown	鼠标按下时，触发事件
onmouseup	鼠标释放时，触发事件
onmouseover	鼠标移至标签区域时，触发事件
onmouseout	鼠标移出标签区域时，触发事件
onload	加载/进入html页面时，触发事件
onunload	离开html页面时，触发事件
onchange	输入域的内容改变时，触发事件

应用示例

// HTML元素
<element onclick="JS_fun()" ....
...
<script>
	// 触发后执行的方法
	function JS_fun(){
		code...
	}
</script>
或
// 直接在标签内写执行方法
<element onclick="JS code"...

事件监听器

// 添加事件监听器，向指定元素添加事件句柄
element.addEventListener(event, function, useCapture);
// 移除事件监听器
element.removeEventListener(event, function);

参数	说明
event	事件类型，上面表格中的去掉‘on’既是，如‘click’
function	触发后调用的函数，不必带括号
useCapture	元素触发的顺序，true为先触发内部在触发外部，false为先触发外部，在触发内部，默认为true

<script>
	var x = document.getElement... // 获取元素节点
	x.addEventListener("click", function_1);  // 向元素x添加事件句柄
	x.removeEventListener("click", function_1); // 移除元素x的事件句柄
	// 事件触发后执行的动作
	function function_1(){
		code...
	}
</script>