久干AV在线,qj视频网站在线观看,久久 Av色

1.寫在前面

我們經(jīng)常使用document.getElementById去獲取DOM中的元素，也會使用childNodes來獲取子節(jié)點。那么Element和Node的區(qū)別是什么？而什么又是HTMLCollection,HTMLElement,和NodeList呢？

一個簡單的頁面：

<html>
  <body>
    <h1>China</h1>
    <!-- My comment ...  -->
    <p>China is a popular country with...</p>
    <div>
      <button>See details</button>
    </div>
  </body>
</html>

body里的直系子元素一共有三個：h,p,div。我們可以用document.body.childNodes查看, 結(jié)果如下:

問題來了：

1.這么會有這么多的#text？
2.注釋算節(jié)點？

在回答上面兩個問題之前，就有必要理解下什么是Node了。

2.Node vs Elemet

以下摘自MDN:

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

The following interfaces all inherit from Node its methods and properties: Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference.

簡單的說就是Node是一個基類，DOM中的Element，Text和Comment都繼承于它。
換句話說，Element，Text和Comment是三種特殊的Node，它們分別叫做ELEMENT_NODE,
TEXT_NODE和COMMENT_NODE。

所以我們平時使用的html上的元素，即Element是類型為ELEMENT_NODE的Node。

利用nodeType可以查看所有類型，如下圖：

到這里，我想我們就可以解釋上面兩個問題了。

實際上Node表示的是DOM樹的結(jié)構(gòu)，在html中，節(jié)點與節(jié)點之間是可以插入文本的，這個插入的空隙就是TEXT_NODE，即：

<body>
    we can put text here 1...
    <h1>China</h1>
    we can put text here 2...
    <!-- My comment ...  -->
    we can put text here 3...
    <p>China is a popular country with...</p>
    we can put text here 4...
    <div>
      <button>See details</button>
    </div>
    we can put text here 5 ...
</body>

這下就順理成章了，body的直系元素（3）＋ COMMENT_NODE(1) + TEXT_NODE(5) = 9

3.NodeList vs HTMLCollection

我們用childNodes找到了NodeList，但我們操作DOM時往往不想操作Node(我只想操作元素Element)，那么如何獲取ElementList呢？

其實我們經(jīng)常使用的getElementsByXXX返回的就是一個ElementList，只不過它的真實名字是ElementCollection。

就像NodeList是Node的集合一樣，ElementCollection也是Element的集合。但需要特別注意的是：

NodeList和ElementCollcetion都不是真正的數(shù)組

如果document.getElementsByTagName('a') instanceof Array，那么必然是false。

4.寫在最后

DOM(Document Object Model)簡稱文檔對象模型，它是html和xml是文檔編程的接口，它將文檔解析為樹結(jié)構(gòu)，這個樹的根部就是document,而document的第一個子節(jié)點(childeNodes[0])就是html，這才有了后面的一系列html元素。

最后附一張DOM圖，此刻再看這張圖是不是覺得回味無窮咧。