DOM技术简介之一_什么是DOM

一、DOM是什么

   DOM 就是Document Object Model，文档对象模型。

1. Document:

     网页文档---》文档对象

2.  Object: 

     JavaScript语言里的对象可以分为三种类型：

   （1）用户定义对象(user-defined object): 由程序员自行创建的对象

   （2）内建对象(native object): 内建在JavaScrip语言里的对象

   （3）宿主对象(host object): 由浏览器提供的对象

3.  Model:

（1）.为某种事物的表现形式。

（2）.可用"节点树"描述DOM

二、节点是什么

例子： <p id = "id_reminder" class = "class_reminder" title="a gentle reminder">Don't forget to buy this sturff.</p>

1.元素节点：

DOM的原子是元素节点，如<p>...</p>

2.文本节点

在内容为王的互联网上，绝大多数内容都是由文本提供的。

如Don't forget to buy this sturff.

3.属性节点

属性节点用来对元素做出更具体的描述

title="a gentle reminder"即为一个属性节点

三、获取元素

1.通过元素id

document.getElementById(id); 返回一个对象

例如document.getElemntById("id_reminder");

2.通过标签名字TagName

document.getElementsByTagName("p"); 返回一个对象数组

3.通过类名字ClasName(HTML5支持)

  document.getElementsByClassName("class_reminder"); 返回一个对象数组

四.获取和设置属性

1.getAttribute

  object.getAttribute(attribute);

2.setAttribute

  object.setAttribute(attribute,value);

五.节点的属性

1.childNodes属性

在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，

它是一个包含这个元素全部元素的数组

element.childNodes 返回的数组包含所有类型的节点，而不仅仅是元素节点

var body_element = document,getElemensByTagName("body")[0];

alert(body_element.childNodes);

2.nodeType属性

alert(body_element.nodeType);

①元素节点的nodeType属性值是1

②属性节点的nodeType属性值是2

③文本节点的nodeType属性值是3

3.nodeValule属性

  如果想改变一个文本节点的值，需使用此属性

4.firstChild和lastChild属性

node.firstChild 与 node.childNodes[0]等价

同理node.lastChild 与 node.childNodes[node.childNodes.length - 1]等价