DOM对象概述

一、DOM:Document Object Model(文档对象模型)，是由W3C组织制定的一套操作文档的

应用编程接口。

   W3C(World Wide Web Consortium):万维网联盟，该组织的主要是制定Web技术的标准，其中DOM只是其中的一项标准，的标准还有CSS,XML,XHML等等。

二、DOM分类：Core DOM, HTML DOM等等。Core DOM在所有的标记语言上都可以使用所以可以利用Core DOM来操作HTML文档，当然我们也可以利用HTML DOM提供的一些特殊的方法来操作HTML文档，但是要注意HTML DOM只能针对HTML文档使用，而不能用于其他的文档，比如XML文档等等。现在我们一起来学习Core DOM里面的一些常用的属性和方法。

三、在正式学习Core DOM的属性和方法之前，先来了解一下HTML文挡的一些基本概念。

    任何一篇HTML文档被浏览器加载到计算机的内存后，都会被解析为一颗内存树。这颗树是由一个一个的节点构成的。其中节点有12种类型，但是最常用的只有3种，分别是元素节点、属性节点、文本节点。例如：

  

    test.html

   

           

          

           

       

                   

This is my first demo!

                 hello world!

       

   

   

其节点分解图如下：

Html：（元素节点）

Body：（元素节点）

head：（元素节点）

title：（元素节点）

DOM Example：（文本节点）

div：（元素节点）

font：（元素节点）

 

属性节点：style="width:800px"

文本节点：This is my first demo!

属性节点：color=”red”

文本节点：hello world!

练习：

     

This is my content.

画出其节点分解图

四、DOM里的常见属性和方法

getElementById:根据Id获得某个元素

getElementsByTagName:获得指定标签名的所有元素

getElementsByName:获得制定名称的所有元素

nodeName:节点的名字

nodeValue:节点的值

nodeType:节点的类型（元素节点：1;属性节点：2;文本节点：3）

ownerDocument:指向这个节点所属的文档

firstChild:指向第一个子节点

lastChild:指向最后一个子节点

childNodes:获得所有的子节点

previousSibling:指向前一个兄弟节点

nextSibling:指向下一个兄弟节点

parentNode:指向父节点

hasChildNodes:当前节点是否有子节点

attributes:返回元素节点的所有属性(返回的是一个数组)

     

append:附加，添加

appendChild(node):将node添加到childNodes的末尾

removeChild(node):将node从childNodes中删除

replaceChild(newNode, oldNode):将childNodes中的oldNode替换成newNode

insertBefore(newNode, refNode):在childNodes中的refNode之前插入newNode

      因为元素节点才有属性，所以只有元素节点才能调用

getAttribute,setAttribute, removeAttribute

getAttribute：获得元素的指定属性值

setAttribute：为元素的指定属性赋值

setAttribute(属性名，属性值)

removeAttribute:删除元素的指定属性

createElement:创建元素节点

createTextNode:创建文本节点

五、例子

Document.getElementsByTagName(“p”);

Document.getElementsByName(“myName”);

document.getElementsByTagName(“ 标签名字”);

     

     

     

          

aaa

          

bbb

          

ccc