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: