DOM - 简书

DOM

概念：HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 将 HTML 文档表达为树结构。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点

父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

1.访问 HTML 元素（节点）

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素：html中， 对应js中var element=document.getElementById("intro");

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。document.getElementsByTagName("p");

getElementsByClassName() 方法

查找带有相同类名的所有 HTML 元素document.getElementsByClassName("intro");

getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

2.innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

Hello World,获取元素内容：

var txt = document.getElementById("intro").innerHTML;

document.getElementById("intro").innerHTML = “可替换的文字”;

3.nodeName 属性

nodeName 属性规定节点的名称。nodeName 是只读的，元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document，nodeName 始终包含 HTML 元素的大写字母标签名。例如<button>对应的nodeName是“BUTTON”

4.nodeValue 属性

nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或 null,文本节点的 nodeValue 是文本本身,属性节点的 nodeValue 是属性值

5.改变 HTML 样式

Hello world!

document.getElementById("p2").style.color="blue";

6.appendChild创建新的 HTML 元素,如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

var para=document.createElement("p");这段代码创建了一个新的

元素：

var node=document.createTextNode("This is new.");//如需向

元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：

para.appendChild(node);//然后您必须向

元素追加文本节点：

var element=document.getElementById("d1");

element.appendChild(para);最后，您必须向已有元素追加这个新元素。

insertBefore()

var child=document.getElementById("p1");

element.insertBefore(para,child);

removeChild()

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

replaceChild()

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.replaceChild(para,child);

最后编辑于：2018.04.23 10:42:02