HTML DOM 方法
方法：我们可以在节点（HTML 元素）上执行的动作
编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法 是您能够执行的动作（比如添加或修改元素）。
属性 是您能够获取或设置的值（比如节点的名称或内容）。
HTML DOM 对象 - 方法和属性
➡️一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
➡️一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
举例：某个人是一个对象。
人的 方法 可能是 eat(), sleep(), work(), play() 等等。
所有人都有这些方法，但会在不同时间执行它们。
一个人的 属性 包括姓名、身高、体重、年龄、性别等等。
所有人都有这些属性，但它们的值因人而异。
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
HTML DOM 属性
属性 是节点（HTML 元素）的值，您能够获取或设置。
innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
实例
下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
输出结果：
Hello World!
Hello World!
getElementById 是方法， innerHTML 是属性。
innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>
nodeName 属性
nodeName 属性 规定节点的名称。
nodeName 是 只读 的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
✳️：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性 规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
获取元素的值
下面的例子会取回 <p id="intro"> 标签的文本节点值：
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
输出结果：
Hello World!
Hello World!
nodeType 属性
nodeType 属性 返回节点的类型。nodeType 是 只读 的。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
HTML DOM 访问
访问 HTML DOM - 查找 HTML 元素
➡️访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
➡️➡️访问 HTML 元素的不同的方式：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
➡️➡️➡️getElementById() 方法
返回带有指定 ID 的元素
语法：node.getElementById("id");
获取 id="intro" 的元素：document.getElementById("intro");
➡️➡️➡️getElementsByTagName() 方法
返回带有指定标签名的所有元素
语法：node.getElementsByTagName("tagname");
返回包含文档中所有 <p> 元素的列表：document.getElementsByTagName("p");
返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：document.getElementById("main").getElementsByTagName("p");
➡️➡️➡️getElementsByClassName() 方法
查找带有相同类名的所有 HTML 元素
document.getElementsByClassName("intro");
上面的例子返回包含 class="intro"的所有元素的一个列表：
⚠️注释：getElementsByClassName()在 Internet Explorer 5,6,7,8 中无效。
网友评论