DOM 节点的类型及判定

浏览器在解析 HTML 文档后,会将它转化为一个由各种节点组成的文档树。例如下面的 HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <title>hello this</title>
  </head>
  <body>
    <h1>some heading</h1>
    <div>
      <p>some content</p>
    </div>
  </body>
</html>

转化的 DOM 文档树基本是这样的(忽略一些空白文本节点):

HTMLDocument document
|---DocumentType <!doctype html>
|---HTMLHtmlElement <html>
|-------HTMLHeadElement <head>
|-----------HTMLTitleElement <title>
|---------------Text "hello this"
|---HTMLBodyElement <body>
|-------HTMLHeadingElement <h1>
|-----------Text "some heading"
|-------HTMLDivElement <div>
|-----------HTMLParagraphElement <p>
|---------------Text "some content"

DOM 节点都是继承自 Node 对象,而 Node 对象继承自 Object 对象。基本的继承关系如下:

Node
|---Document 9
|   |--- HTMLDocument
|---DocumentType 10
|---Element 1
|   |---HTMLElement
|       |---HTMLHtmlElement
|       |---HTMLHeadElement
|       |---HTMLTitleElement
|       |---HTMLBodyElement
|       |---HTMLHeadingElement
|       |---HTMLDivElement
|       |---HTMLParagraphElement
|---Text 3

其中 Element,Text,Document 和 DocumentType 直接继承自 Node 对象,它们的 nodeType 分别为 1,3,9 和 10。通过这个 nodeType 属性我们可以区分不同类型的节点。

如果要判定一个 JavaScript 对象是否 DOM 元素,最简单的方法是下面的方式:

if (obj instanceof Element) alert("it is a dom element");

但是在 IE6 和 IE7 中没有 Element 对象,所以不能这样判定。所以只能用下面这种不太可靠的方式:

if (obj.nodeType) alert("it is a dom element");

参考资料:
[1] Document Object Model (DOM) Technical Reports
[2] Gecko DOM Reference | MDN
[3] Node.nodeType - Document Object Model (DOM) | MDN
[4] How do you check if a Javascript Object is a DOM Object?
[5] Checking Types in Javascript

原文地址:https://www.cnblogs.com/zoho/p/2889581.html