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: 
"form" action="">

   2:   name: "text" name="name" value="admin">

   3:   password: "password" name="password" value="123456">

   4:   "submit" value="submit">

   5:  

   6:  

   7:  

   8: 
Return the value of each element in the form:

   9: 

    输入如下：

四、html DOM 属性

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

    1、属性 innerHTML

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

   1: 
"main">

   2:  

   3: 

    输出：hello world

    2、nodeName、nodeValue、nodeType 分别指 节点的名称，节点的值，与节点的类型。

    当中：（1）

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

    （2）

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

    （3）nodeType 属性返回节点的类型。nodeType 是只读的。节点的类型有元素、属性、文本、注释、文档等。

    Demo：

   1: 
"text">这是是文本节点

   2:  

   3: