HTML DOM 基本知识总结
1.HTML DOM 访问
- 通过使用 getElementById() 方法 语法：node.getElementById("id");
- 通过使用 getElementsByTagName() 方法 语法:node.getElementsByTagName("tagname");
- 通过使用 getElementsByClassName() 方法 语法:document.getElementsByClassName("className");
b.nodeName 属性获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
nodeName 属性规定节点的名称。nodeName 是只读的, 元素节点的 nodeName 与标签名相同, 属性节点的 nodeName 与属性名相同, 文本节点的 nodeName 始终是 #text, 文档节点的 nodeName 始终是 #document。
c.nodeValue 属性
nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或 null,文本节点的 nodeValue 是文本本身,属性节点的 nodeValue 是属性值。
d.nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
3.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() 把指定属性设置或修改为指定的值。
4.HTML DOM 修改
document.getElementById("id").innerHTML="New text!";
document.getElementById("id").style.color="blue";
document.getElementById("id").style.fontFamily="Arial";
document.getElementById("id").style.fontSize="larger";
document.body.style.backgroundColor='black'
5.HTML DOM 导航
x=document.getElementsByTagName("tagName");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}