`

DOM模型

    博客分类：
  • XML
BBSHTMLXMLBlog 
阅读更多

转自:

http://www.scriptwebs.com/blog/post/287.html

DOM模型(Document Object Module,即文档对象模型)

结点的类型

   在XML（HTML）文档中，不仅每个闭合的标记是一个结点，而且闭合标记中的文本、标记内的属性也都是结点，分别称为元素结点、文本结点和属性结点

  <span >何永</span>,整个内容构成了标记为span的元素结点，id="a"组成了一个属性结点，而"何永"这段文本构成了一个文本结点。这里的属性和文本结点都可以看作是元素结点的子节点。

处理DOM中的结点

   在DOM模型中引用一个结点的方式

   1、document.getElementById();  //引用指定ID的结点

   2、document.getEleMentsByTagName()  //引用指定标记名称的结点

间接引用结点

  1、引用子结点：每个结点都有一个childNodes集合属性，类型是数组对象，表示该结点的所有子结点的集合

  document.childNodes[0];  //引用HTML文档的根结点

  document.childNodes[0].childNodes[0]  //引用<head>结点

  document.childNodes[0].childNodes[1]  //引用<body>结点

  2、引用父结点

  element.parentNode

 

  3、引用兄弟结点

  element.nextSibling;  //引用上一个兄弟结点

  element.previousSibling  //引用下一个兄弟结点

获取结点信息

 

  1、使用ndeName属性获取结点的名称

  Node.nodeName;

  元素结点：返回标记的名称，如<span></span>;返回"span"

  属性结点：返回属性名称，如id="a",返回"id"

  文本结点：返回文本的内容

 

  2、使用nodeType属性获取结点类型

  Node.nodeType;

  元素结点：返回1

  属性结点：返回2

  文本结点：返回3

 

  3、使用nodeValue属性获取结点的值

  Node.nodeValue;

  文本结点：返回文本内容（仅适用于文本结点）

  4、使用hasChildNodes()方法判断给定结点是否有子结点

  Node.hasChildNodes();

  有子结点：返回True

  没子结点:返回false

  处理属性结点：属性结点作为一个特殊的结点，是依赖元素结点而存在

  1、获取和设置属性结点的值

  事实上每个属性结点都是元素结点的一个属性

  元素结点.属性名称

  如<img src="bg.gif" alt="" />

  <!--

  var imgNode = document.getElementById("a");

  imgNode.src="back.gif";

  -->

  2、使用setAttribute()方法添加一个属性

  elementNode.setAttribute(attributeName,attributeValue);

  elementNode:要添加属性的结点

  attributeName:要添加的属性名称

  attributeValue:要添加的属性值

  3、使用getAttribute()方法获取一个属性值

  elementNode.getAttribute(attributeName)



改变文档的层次结构

 

  使用document.createElement方法创建元素结点

  document.createElement(elementName);

  创建一个<div>结点

  var divElement = document.createElement("div");

  使用document.createTextNode方法创建文本结点（同上）

使用appendChild方法添加结点

  创建结点后，可以用appendChild方法将其添加到文档层次结构中

  parentElement.appendChild(childEleMent);

  例：<dl >

        <dt>dt1</dt>

        <dd>dd1</dd>

      </dl>

 

      <!--

      var dla = document.getElementById("dla");

      var dd = document.createElement("dd");

      var tn = document.createTextNode("dd2");

      dd.appendChild(tn);  //将创建的文本结点作为<dd>的子结点

      dla.appendChild(dd);

      //--

您要是对此篇日志感兴趣，其实在http://www.51wsc.com/bbs上可以查看到更多的信息。

分享到：
| MyEclipse8.5如何安装svn
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics