所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。

var element = document.getElementById(“intro”); var elements = document.getElementsByTagName(“p”); var elems = document.getElementById(“main”).getElementsByTagName(“p”); // id为mian的元素的后代p元素 var elements = document.getElementsByClassName(“intro”);

常用的 HTML DOM 方法： • getElementById(id) - 获取带有指定 id 的节点（元素） • appendChild(node) - 插入新的子节点（元素） • removeChild(node) - 删除子节点（元素）

一些 DOM 对象方法： getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。 createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。

一些常用的 HTML DOM 属性： • innerHTML - 节点（元素）的文本值 • parentNode - 节点（元素）的父节点 • childNodes - 节点（元素）的子节点 • attributes - 节点（元素）的属性节点

nodeName 属性 nodeName 属性规定节点的名称。 • nodeName 是只读的 • 元素节点的 nodeName 与标签名相同 • 属性节点的 nodeName 与属性名相同 • 文本节点的 nodeName 始终是 #text • 文档节点的 nodeName 始终是 #document 注释：nodeName 始终包含 HTML 元素的大写字母标签名。

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

获取元素的值获取元素值

Hello World!

nodeType 属性元素类型 NodeType 元素 1 属性 2 文本 3 注释 8 文档 9

———————————————————– DOM 访问 —————————————————

———————————————————— DOM 修改 —————————————————–

内容 document.getElementById(“p1”).innerHTML=“New text!”; 样式 document.getElementById(“p2”).style.color=“blue”; document.getElementById(“p2”).style.fontFamily=“Arial”; document.getElementById(“p2”).style.fontSize=“larger”; 属性创建元素 var para=document.createElement(“p”); // 如需向

元素添加文本，您首先必须创建文本节点。 var node=document.createTextNode(“This is new.”);para.appendChild(node); var element=document.getElementById(“d1”);element.appendChild(para);

// 上面默认选择作为父元素的最后一个子元素添加，可以选择插入点
var para=document.createElement("p");var node=document.createTextNode("This is new.");para.appendChild(node);var element=document.getElementById("div1");var child=document.getElementById("p1");element.insertBefore(para,child);

删除元素

This is a paragraph.

This is another paragraph.

替换元素

This is a paragraph.

This is another paragraph.

改变事件（处理程序） HTML DOM 允许您在事件发生时执行代码。

<input type="button" onclick="document.body.style.backgroundColor='lavender';"value="Change background color" />

—————————————- 事件 ————————————————- HTML 事件的例子： • 当用户点击鼠标时

请点击这段文本!

• 当网页已加载时 • 当图片已加载时 • 当鼠标移动到元素上时 • 当输入字段被改变时 • 当 HTML 表单被提交时 • 当用户触发按键时

HTML事件属性： 1

使用 HTML DOM 来分配事件

<button id="myBtn">试一试</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。

Table of Contents

请点击这段文本!