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() | 把指定属性设置或修改为指定的值。 |
nodeName属性
nodeName属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName始终包含 HTML 元素的大写字母标签名。
nodeValue属性
nodeValue属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeType属性
nodeType属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
| 元素类型 | NodeType |
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
访问 HTML 元素（节点）
访问HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素：
- 通过使用 getElementById() 方法 getElementById() 方法返回带有指定 ID 的元素
- 通过使用 getElementsByTagName() 方法 getElementsByTagName() 返回带有指定标签名的所有元素。
- 通过使用 getElementsByClassName() 方法 查找带有相同类名的所有 HTML 元素，请使用这个方法
HTML DOM - 事件
HTML DOM 允许 JavaScript 对 HTML事件作出反应
HTML事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
onload和 onunload 事件
当用户进入或离开页面时，会触发 onload 和onunload 事件。
onload事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload和 onunload 事件可用于处理 cookies。
onchange事件
onchange事件常用于输入字段的验证。
onmouseover和 onmouseout 事件
onmouseover和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件
<!DOCTYPE html>
<html>
<body>
<div
οnmοusedοwn="mDown(this)"
οnmοuseup="mUp(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>
</body>
</html>
HTML DOM - 导航
HTMLDOM 节点列表
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
HTMLDOM 节点列表长度
length属性定义节点列表中节点的数量。
您可以使用 length 属性来循环节点列表
导航节点关系
您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。
childNodes 和 nodeValue
除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
获得第一个 button 元素的节点值：
document.getElementsByTagName("BUTTON")[0].childNodes[0].nodeValue;
定义和用法
nodeValue 属性设置或返回指定节点的节点值。
注释：如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值（element.childNodes[0].nodeValue）。
提示：nodeValue 属性的替代选择是 textContent 属性。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
