DOM基础一

JavaScript的组成

在了解DOM之前，我们先来了解一下JavaScritpt的组成，JavaScript由三个部分组成

ECMAScript （核心） DOM BOM

1. ECMAScript是一套标准，规定了最基本的语法、关键字、数据类型等，在ECMAScript的基础上，进行的扩展，使得ECMAScript拥有更强大功能。

2. DOM （Document Object Model）文档对象模型
   DOM是对ECMAScript的扩展，DOM给了ECMAScript访问并修改文档的内容、结构和样式的能力。

3. BOM （Browser Object Model） 浏览器对象模型
   BOM也是对ECMAScript的扩展，是由浏览器提供的一个接口， BOM给了ECMAScript操控浏览器窗口的能力。

W3C DOM 标准被分为 3 个不同的部分：

核心   DOM - 针对任何结构化文档的标准模型
XML   DOM - 针对 XML 文档的标准模型
HTML  DOM - 针对 HTML 文档的标准模型

下面内容说的DOM就是HTML DOM，是针对于HTML文档的一个接口

DOM的节点类型

DOM节点类型有12种，常见的有3种

    元素节点     nodeType   1

    属性节点     nodeType   2       

    文本节点     nodeType   3

通过以下属性可以获取节点类型，名称和节点值

元素.nodeType:只读  属性 当前元素的节点类型

元素.nodeName:只读  属性 当前元素的节点名称

元素.nodeValue:可读可写 属性 当前元素的节点值

子节点

1）元素.childNodes:只读 属性 子节点列表集合

childNde 属性在标准浏览器下包含了元素节点和其他类型节点（标准浏览器是指FF、Chrome、IE9+的浏览器），在非标准IE（IE8-）的浏览器中只包含元素节点

2）元素.children:只读 属性 子节点列表集合(只包含元素类型节点)

children属性是一个非标准属性，但是各个浏览器都支持它，children属性获取的是元素节点列表集合，值得注意的一点是children属性在非标准IE下会包含注释节点，而其他浏览器则不包含

兄弟节点

ElementTraversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素节点，而不包含元素节点之外的其他节点，如注释节点、文字节点等。这个规范给我们提供了快速、方便的方法来访问元素节点。在以前的方法中，我们使用firstChild、nextSibling、childNodes、children等方法来进行遍历，但要得到元素节点，我们还需要来判断节点的类型。
                                返回值
元素.firstElementChild          null
元素.lastElementChild           null
元素.previousElementSibling     null
元素.nextElementSibling         null
元素.childElementCount          0


                                返回值
元素.firstChild                   null
元素.lastChild                null
元素.previousSibling          null
元素.nextSibling              null

在非标准的IE下不支持ElementTraversal接口，所以我们需要做一下兼容性处理

<ul id="list">
    <li>  1 </li>
    <li>  2 </li>
    <li>  3 </li>
</ul>

var oUl=document.getElementById('list');

var oFirst=oUl.firstElementChild || oUl.firstChild;

oFirst.style.backgroundColor='red';