Document Object Model (DOM) 为文档对象模型，
    它使用对象的表示方式来表示对应的文档结构及其中的内容。

    下面为一个样例 元素在文档中的对象所包含的所有属性。

    1. p#targetaccessKey: ""
    2. align: ""
    3. attributes: Named
    4. NodeMapbaseURI: ""
    5. childElementCount: 0
    6. childNodes: NodeList[1]
    7. children: HTMLCollection[0]
    8. classList: DOMTokenList[0]
    9. className: ""
    10. clientHeight: 0
    11. clientLeft: 0
    12. clientTop: 0
    13. clientWidth: 0
    14. contentEditable: "inherit"
    15. dataset: DOM
    16. StringMapdir: ""
    17. draggable: false
    18. firstChild: text
    19. firstElementChild: null
    20. hidden: false
    21. id: "target"
    22. innerHTML: "Hello, World!"
    23. innerText: "Hello, World!"
    24. isContentEditable: false
    25. lang: ""
    26. lastChild: text
    27. lastElementChild: null
    28. localName: "p"
    29. namespaceURI: "http://www.w3.org/1999/xhtml"
    30. nextElementSibling: null
    31. nextSibling: null
    32. nodeName: "P"
    33. nodeType: 1
    34. nodeValue: null
    35. offsetHeight: 0
    36. offsetLeft: 0
    37. offsetParent: null
    38. offsetTop: 0
    39. offsetWidth: 0
    40. onabort: null
    41. onautocomplete: null
    42. onautocompleteerror: null
    43. onbeforecopy: null
    44. onbeforecut: null
    45. onbeforepaste: null
    46. onblur: null
    47. oncancel: null
    48. oncanplay: null
    49. oncanplaythrough: null
    50. onchange: null
    51. onclose: null
    52. oncontextmenu: null
    53. oncopy: null
    54. oncuechange: null
    55. oncut: null
    57. ondrag: null
    58. ondragend: null
    59. ondragenter: null
    60. ondragleave: null
    61. ondragover: null
    62. ondragstart: null
    63. ondrop: null
    64. ondurationchange: null
    65. onemptied: null
    66. onended: null
    67. onerror: null
    68. onfocus: null
    69. oninput: null
    70. oninvalid: null
    71. onkeydown: null
    72. onkeypress: null
    73. onkeyup: null
    74. onload: null
    75. onloadeddata: null
    76. onloadedmetadata: null
    77. onloadstart: null
    78. onmousedown: null
    79. onmouseenter: null
    80. onmouseleave: null
    81. onmousemove: null
    82. onmouseout: null
    83. onmouseover: null
    84. onmouseup: null
    85. onmousewheel: null
    86. onpaste: null
    87. onpause: null
    88. onplay: null
    89. onplaying: null
    90. onprogress: null
    91. onratechange: null
    92. onreset: null
    93. onresize: null
    94. onscroll: null
    95. onsearch: null
    96. onseeked: null
    97. onseeking: null
    98. onselect: null
    99. onselectstart: null
    100. onshow: null
    101. onstalled: null
    102. onsubmit: null
    103. onsuspend: null
    104. ontimeupdate: null
    105. ontoggle: null
    106. onvolumechange: null
    107. onwaiting: null
    108. onwebkitfullscreenchange: null
    109. onwebkitfullscreenerror: null
    110. outerHTML: "<p id="target">Hello, World!</p>"
    111. outerText: "Hello, World!"
    113. parentElement: null
    114. parentNode: null
    115. prefix: null
    116. previousElementSibling: null
    117. previousSibling: null
    118. scrollHeight: 0
    119. scrollLeft: 0
    120. scrollTop: 0
    121. scrollWidth: 0
    122. shadowRoot: null
    123. spellcheck: true
    124. style: CSSStyle
    125. DeclarationtabIndex: -1
    126. tagName: "P"
    127. textContent: "Hello, World!"
    128. title: ""
    129. translate: true
    130. webkitdropzone: ""
    131. __proto__: HTMLParagraphElement

    通过使用 DOM 提供的 API (Application Program Interface)
    可以动态的修改节点（node），也就是对 DOM 树的直接操作。
    浏览器中通过使用 JavaScript 来实现对于 DOM 树的改动。

    • DOM Core
    • DOM HTML
    • DOM Style
    • DOM Event

    在元素节点中提取自己所需的节点，并予以操作。

    1. // Document.getElementsByTagName()
    2. // 更具标签名找到目标节点的集合，此例中为 <h1>My header</h1>
    3. var node = document.getElementsByTagName('h1')[0];
    5. // Node.parentNode;
    6. // 获得目标节点的父节点，此例中为 body 元素
    7. node.parentNode;
    9. // Node.firstChild
    10. // 获得目标节点的第一个子节点，此例中为 "My header"
    11. node.firstChild;
    13. // Node.lastChild
    14. // 获得目标节点的最后一个子节点，此例中为 "My header"
    15. node.lastChild;
    17. // Node.previousSibling;
    18. // 获得目标节点的前一个相邻节点
    19. node.previousSibling;
    21. // Node.nextSibling;
    22. // 获得目标节点的下一个相邻节点
    23. node.nextSibling;

    常用节点类型

    • ELEMENT_NODE 可使用 Document.createElement('elementName'); 创建
    • TEXT_NODE 可使用 Document.createTextNode('Text Value'); 创建
    • COMMENT_NODE
    • DOCUMENT_TYPE_NODE

    不同节点对应的NodeType类型

    此值可以通过 Node.nodeType 来获取。

    NOTE：此处需要清楚节点和元素的区别。我们平常说的元素
    其实指的是节点中得元素节点，所以说节点包含元素，节点还包括文本节点、实体节点等。

    1. // 在选取元素节点后
    3. p.firstElementChild;       // <em>Xinyang</em>
    4. p.lastElementChild;        // <a href="http://li-xinyang.com">主页</a>