µ±Ç°Î»Ö㺠´úÂëÃÔ >> WebÇ°¶Ë >> DOM Level һѧϰ֮һ_¹ØÓÚNode
  Ïêϸ½â¾ö·½°¸

DOM Level һѧϰ֮һ_¹ØÓÚNode

Èȶȣº398   ·¢²¼Ê±¼ä£º2012-11-03 10:57:43.0
DOM Level 1ѧϰ֮һ_¹ØÓÚNode
½ñÌìÏë¿´¿´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>

ͨ¹ýÉÏÃæµÄ´úÂë¿ÉÒÔ¿´³öÔÚijЩÇé¿öÏÂoffsetParentºÍparentNodeÊDz»Í¬µÄ£¬µ±È»²»½ö½ö¾ÖÏÞÓÚ´ËÖÖÇé¿ö¡£

¶ÔÓÚparentElement£¬MSDNÉÏÓÐÕâôһ¸öÆÀÂÛ£º
Always use parentNode instead of parentElement
parentNode is standard and supported by most browsers, parentElement is proprietary

ËùÒԾͲ»ÓÃÈ¥Ñо¿ËüÁË£¬ÒâÒå²»ÊǺܴ󣬳ý·ÇÎÒÃÇÖ»¿ª·¢IE onlyµÄÍøÒ³¡£

¶ÔÓÚnodeÖÐÆäËûµÄ¶«Î÷»¹ÐèÒªÔÚƽʱµÄ¿ª·¢¹ý³ÌÖÐÂýÂý×ÁÄ¥ÁË£¬Ê×ÏÈÒªÖªµÀËüÌṩÁËÕâЩ·½·¨¸øÎÒÃÇʹÓá£
  Ïà¹Ø½â¾ö·½°¸