HTML DOM随笔

编程接口

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

getElementById() 方法返回带有指定 ID 的元素.

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）
• appendChild(node) - 插入新的子节点（元素）
• removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

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

一些 DOM 对象方法中的常用方法：

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

属性是节点（HTML 元素）的值，您能够获取或设置。

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

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

nodeName 属性

nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

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

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

以不同的方式来访问 HTML 元素：

• 通过使用 getElementById() 方法
• 通过使用 getElementsByTagName() 方法
• 通过使用 getElementsByClassName() 方法

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

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

使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

• 在元素上点击
• 加载页面
• 改变输入字段

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图片已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户触发按键时