首页 > 代码库 > JavaScript基础(六) DOM模型

JavaScript基础(六) DOM模型

一、文档对象模型

  DOM( Document Object Model)文档对象模型,它提供了访问、动态修改文档的借口,W3C指定了DOM规范,主流浏览器都支持。DOM由3部分组成,分别是CoreDom、XML DOM和HTML DOM。

  1、Core DOM:也称核心DOM变成,定义了一套标准的针对任何结构化文档的对象,包括HTML、XHTML和XML。

  2、XML DOM:定义了一套标准的针对XML文档的对象。

  3、HTML DOM:定义了一套标准的针对HTML文档的对象。

 

二、认识DOM节点树。

  

  DOM以树形结构组织HTML文档,文档中每个标签或者元素都是一个节点,各个节点之间都存在着关系。

 

三、访问DOM节点。

  1、使用getElement系列方法访问指定节点。

    (1)getElementById():返回对拥有指定id的对一个对象的引用。

<script type="text/javascript">function getValue(){  var x=document.getElementById("myHeader");  //点击标题,弹出标题的值。  alert(x.innerHTML);}</script><body><h1 id="myHeader" onclick="getValue()">这是标题</h1></body></html>

    (2)getElementsByName():返回带有指定名称的对象的集合。

<script type="text/javascript">function getElements()  {  var x=document.getElementsByName("myInput");   //获取页面中名字为myInput文本框的个数。数量为3  alert(x.length);  }</script><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()" value="名为 ‘myInput‘ 的元素有多少个?" />

    (3)getElementsByTagName():返回带有指定标签名的对象的集合。

<script type="text/javascript">function getElements()  {  var x=document.getElementsByTagName("input");  //获取页面中标签名字为input的文本框。数量为4  alert(x.length);  }</script><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()" value="How many input elements?" />

  

  2、使用层次关系访问节点。

  (1)访问根节点:

    有两种特殊的文档属性可用来访问根节点:

    document.documentElement:第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

    document.body:第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。

  (2)访问父节点

    parentNode:返回节点的父节点。

  (3)访问兄弟节点

    firstChild:返回节点的首个子节点。如果元素没有子节点则返回null。文本和属性节点没有子节点。如果是firefox浏览器会将空标签算在内。IE浏览器不计算空标签。

    lastChild:返回节点的最后一个字节点,同 firstChild。 如果是firefox浏览器会将空标签算在内。IE浏览器不计算空标签。

 

四、操作节点的属性值

  1、Core DOM的标准方法包括以下两种:

  getAttribute("属性名"):获取属性的值。

  setAttribute("属性名"):设置属性的值。

  2、HTML DOM标准方法可以直接获取dom.属性。例如:img.src直接获取图片src属性。

 

五、创建和增加节点。

  createElement(tagName):按照给定的标签名创建一个节点。

  appendChild(nodeName):在已经存在节点的末尾添加新的子节点。

  insertBefore(newNode,oldNode):向指定节点之前插入新的节点。其中newNode参数是必须的,表示新插入的节点;oldNode是可选的。

  cloneNode(deep):复制某个节点。其中deep参数是布尔值,当deep的值为true时,会复制指定的节点以及它的所有子节点。如果为false,则只复制当前节点和它的属性。

 

六、删除和替换节点

  removeChild(node):删除指定的节点。

  replaceChild(newNode,oldNode:将newNode替换为oldNode。

  

 

JavaScript基础(六) DOM模型