3.什么是html dom,html DOM 基础

Technorati 标签: DOM,html

想深入去学习 javascript ，有必要去知道一些关于 DOM 的知识。

一、那什么是 DOM 呢？？？

DOM 定义了 html 和 xml 文档的标注：w3c 文档对象模型(DOM)是中立与平台和语言的接口，它允许程序或脚本动态的访问和修改文档的内容、结构和样式。

w3c DOM 标准分为以下 3 个部分：

(1)core DOM：针对于结构化文档的标准模型

(2)xml DOM： 针对 xml 文档的标注模型

(3)html DOM：针对 html 文档的标准模型

接着我们可能会问，什么是 html DOM呢？？

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

二、html DOM 树

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改，也可以创建或删除节点。

现在来理解一下几个基本概念，根节点，子节点、父节点、同胞节点。这些节点的理解其实理解二叉树的节点差不过。下面做一个基本介绍：

父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。 在节点树中，顶端节点被称为根(root)

每个节点都有父节点、除了根(它没有父节点)

一个节点可拥有任意数量的子

同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

三、html DOM 的方法

html DOM 常用方法总结如下： 方法 描述

getElementById() 返回带有指定 ID 的元素。

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

appendChild() 把新的子节点添加到指定节点。

removeChild() 删除子节点。

replaceChild() 替换子节点。

insertBefore() 在指定的子节点前面插入新的子节点。

createAttribute() 创建属性节点。

createElement() 创建元素节点。

createTextNode() 创建文本节点。

getAttribute() 返回指定的属性值。

setAttribute() 把指定属性设置或修改为指定的值。

Demo：

(1)getElementById(”id“)

var x=document.getElementById("main");

(2)getElementByTagName(”tagName”)

var y=x.getElementsByTagName("a");

(3)getElementByClassName(“className”)

document.getElementsByClassName("group");

注意：IE 9 及 以上才支持 getElementByClassName 的使用。在以前的版本里可自定义 getElementByClassName 方法。

(4)另外谈一下一种对象集合访问方法，如下：

1:

2: name:

3: password:

4:

5:

6:

7:

8:

Return the value of each element in the form:

9:

10: var x=document.getElementById("form");

11: for (var i=0;i

12: {

13: document.write(x.elements[i].value);

14: document.write("
");

15: }

16:

输入如下：

四、html DOM 属性

主要了解了解一下 html DOM 四个属性 innerHTML，nodeName，nodeValue，nodeType

1、属性 innerHTML

属性 innerHTML 用来获取元素节点的内容。如下：

1:

2:

3:

4: document.getElementById("main").innerHTML = "hello world";

5: