JS之DOM

l DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件

     D：文档 – html 文档 或 xml 文档

    O：对象 – document 对象的属性和方法

    M ：模型

 DOM 是针对xml(html)的基于树的API。

 DOM树:节点（node）的层次。

 DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

 DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

 

l 节点

   *  由结构图中我们可以看到，整个文档就是一个文档节点。

   *  而每一个 HMTL 标签都是一个 元素节点 。

   *  标签中的文字则是 文本节点 。

   *  标签的属性是 属性节点 。

   *  一切都是节点……

l 节点树

     节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……

 

l DOM 属性 -- nodeName

l文档里的每个节点都有以下属性。

lnodeName:一个字符串，其内容是给定节点的名字。

  var name = node.nodeName;

   * 如果节点是元素节点，nodeName返回这个元素的名称

   * 如果是属性节点，nodeName返回这个属性的名称

   * 如果是文本节点，nodeName返回一个内容为#text 的字符串

注:nodeName 是一个只读属性。

 

l DOM 属性 -- nodeType

lnodeType：返回一个整数，这个数值代表着给定节点的类型。

•nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：

•Node.ELEMENT_NODE    ---1    -- 元素节点

•Node.ATTRIBUTE_NODE  ---2    -- 属性节点

•Node.TEXT_NODE       ---3    -- 文本节点

• nodeType 是个只读属性

 

l DOM 属性 -- nodeValue

lnodeValue：返回给定节点的当前值（字符串）

• 如果给定节点是一个 属性节点，返回值是这个 属性的值。

•  如果给定节点是一个文本节点，返回值是这个文本节点的内容。

• 如果给定节点是一个 元素节点，返回值是 null

• nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，

    但 可以为文本节点的 nodeValue 属性设置一个值。

   var li = document.getElementById(“li”);

   if(li.firstChild.nodeType == 3)

      li.firstChild.nodeValue = “XXX”;