HTML DOM 详解

DOM的简介

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM节点

HTML 文档中的所有内容都是节点：

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

DOM方法

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

DOM属性

Document直接属性

var html = document.documentElement;  //取得对<body>元素的引用

var body = document.body;   //取得对<body>元素的引用

var originalTitle = document.title;    //返回当前文档的标题

var url = document.URL;    //返回当前文档完整的URL

var domain = document.domain;    //返回当前文档的域名

var referrer = document.referrer;    //返回链接到当前页面的源页面的URL

var lastModified = document.lastModified;    //返回当前文档最后被修改的日期和时间

var cookie = document.cookie;    //返回与当前文档相关的所有cookie

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

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

document.write(txt);

nodeName 属性

nodeName 属性规定节点的名称。

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

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

var el =document.getElementById("intro");
document.write(el.firstChild.nodeValue);

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

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

DOM访问

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

document.getElementById("intro");

document.getElementsByTagName("p");

document.getElementById("main").getElementsByTagName("p");

document.getElementsByClassName("intro");

DOM – 修改

修改 HTML 元素

改变元素内容的最简答的方法是使用 innerHTML 属性。

document.getElementById("p1").innerHTML="New text!";

改变 CSS 样式

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

DOM - 元素

创建新的 HTML 元素 - appendChild()

var newEl=document.createElement("p");

var node=document.createTextNode("This is new.");

newEl.appendChild(node);

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

element.appendChild(newEl);

insertBefore()

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

element.insertBefore(para,child);

删除已有的 HTML 元素

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

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

parent.removeChild(child);

替换 HTML 元素

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

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

parent.replaceChild(para,child);

DOM - 事件

使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

<body onload="checkCookies()">

onchange 事件

onchange 事件常用于输入字段的验证。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

<div onmouseover="mOver(this)" onmouseout="mOut(this)">正常</div>
<script>
function mOver(obj) {  obj.innerHTML="鼠标来也" }
function mOut (obj) {  obj.innerHTML="鼠标去也" }
</script>

备注：本文参考于W3Scholl，链接：http://www.w3school.com.cn/htmldom/index.asp

目录