DOM Level 1学习之一_关于Node

bazhuang

浏览: 149322 次
性别:
来自: 杭州

最近访客更多访客>>

love720720

fany1213

liuzhiqiang19890403

q451234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

IE HTML CSS XHTML

今天想看看nodeType到底有几种情况，搜索到http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html，就仔细看了一下，把interface Node这段摘录如下：

interface Node {
  // NodeType
  const unsigned short      ELEMENT_NODE       = 1;
  const unsigned short      ATTRIBUTE_NODE     = 2;
  const unsigned short      TEXT_NODE          = 3;
  const unsigned short      CDATA_SECTION_NODE = 4;
  const unsigned short      ENTITY_REFERENCE_NODE = 5;
  const unsigned short      ENTITY_NODE        = 6;
  const unsigned short      PROCESSING_INSTRUCTION_NODE = 7;
  const unsigned short      COMMENT_NODE       = 8;
  const unsigned short      DOCUMENT_NODE      = 9;
  const unsigned short      DOCUMENT_TYPE_NODE = 10;
  const unsigned short      DOCUMENT_FRAGMENT_NODE = 11;
  const unsigned short      NOTATION_NODE      = 12;

  readonly attribute  DOMString            nodeName;
           attribute  DOMString            nodeValue;
                                                 // raises(DOMException) on setting
                                                 // raises(DOMException) on retrieval
  readonly attribute  unsigned short       nodeType;
  readonly attribute  Node                 parentNode;
  readonly attribute  NodeList             childNodes;
  readonly attribute  Node                 firstChild;
  readonly attribute  Node                 lastChild;
  readonly attribute  Node                 previousSibling;
  readonly attribute  Node                 nextSibling;
  readonly attribute  NamedNodeMap         attributes;
  readonly attribute  Document             ownerDocument;
  Node                      insertBefore(in Node newChild, 
                                         in Node refChild)
                                         raises(DOMException);
  Node                      replaceChild(in Node newChild, 
                                         in Node oldChild)
                                         raises(DOMException);
  Node                      removeChild(in Node oldChild)
                                        raises(DOMException);
  Node                      appendChild(in Node newChild)
                                        raises(DOMException);
  boolean                   hasChildNodes();
  Node                      cloneNode(in boolean deep);
};

其实nodeType有好多种啊，我只记得1和3，这2个比较常见。
这里有有个parentNode这个属性，那我们就来看一下对它的说明了：
The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a parent. However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null.

平常还会看到offsetParent、parentElement这些，那这3个有什么区别么？
在W3C上对offsetParent的说明如下：
The offsetParent attribute, when called on element A, must return the element determined by the following algorithm:

If any of the following holds true return null and stop this algorithm:

A does not have an associated CSS layout box.
A is the root element.
A is the HTML body element.
The computed value of the position property for element A is fixed.
If A is an area HTML element which has a map HTML element somewhere in the ancestor chain return the nearest ancestor map HTML element and stop this algorithm.

Return the nearest ancestor element of A for which at least one of the following is true and stop this algorithm if such an ancestor is found:

The computed value of the position property is not static.
It is the HTML body element.
The computed value of the position property of A is static and the ancestor is one of the following HTML elements: td, th, or table.Return null.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
<script>
function check(){
	var el = document.getElementById("test");
	alert(test.offsetParent.tagName+"::::"+test.parentNode.tagName);
}
</script>
 <body>
  <table width="100">
  <tr><td id="test">sss</td></tr>
  </table>
  <button onclick="check()">check</button>
 </body>
</html>

通过上面的代码可以看出在某些情况下offsetParent和parentNode是不同的，当然不仅仅局限于此种情况。

对于parentElement，MSDN上有这么一个评论：
Always use parentNode instead of parentElement
parentNode is standard and supported by most browsers, parentElement is proprietary

所以就不用去研究它了，意义不是很大，除非我们只开发IE only的网页。

对于node中其他的东西还需要在平时的开发过程中慢慢琢磨了，首先要知道它提供了这些方法给我们使用。

分享到：

AJAX的缺陷以及解决方案 | eval部分替代方法

2010-06-08 15:26
浏览 1280
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论