HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 是 Document Object Model(文档对象模型)。定义了访问 HTML 和 XML 文档的标准。
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型。XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。
- HTML DOM - 针对 HTML 文档的标准模型。HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。
HTML DOM方法
一些常用的 HTML DOM 方法:
一些常用的 HTML DOM 属性:
- innerHTML - 获取或替换 HTML 元素的内容
- parentNode - 获取节点(元素)的父节点
- childNodes - 获取节点(元素)的子节点
- attributes - 获取节点(元素)的属性节点
//创建 HTML 内容
document.getElementById("p1").innerHTML="New text!";
//改变 CSS 样式
document.getElementById("p2").style.color="blue";
//改变 HTML 属性
//创建新的 HTML 元素
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
//删除已有的 HTML 元素
<div id="div1">
<p id="p1">This is a paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
或者
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
//改变事件(处理程序)
<script>
function ChangeBackground(){
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />