DOM Level 1学习之一_关于Node

最新推荐文章于 2024-08-27 15:48:31 发布

原创最新推荐文章于 2024-08-27 15:48:31 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #HTML #CSS #XHTML

javascript 专栏收录该内容

24 篇文章

订阅专栏

本文详细解析了NodeType的概念及其多种情况，并对比了offsetParent、parentNode与parentElement的区别，深入理解DOM操作原理。

今天想看看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中其他的东西还需要在平时的开发过程中慢慢琢磨了，首先要知道它提供了这些方法给我们使用。