文檔樹

2018-07-10 14:30 更新

Table of Contents generated with DocToc

文檔樹

Document Object Model (DOM) 為文檔對象模型， 它使用對象的表示方式來表示對應的文檔結(jié)構(gòu)及其中的內(nèi)容。

下面為一個樣例 p 元素在文檔中的對象所包含的所有屬性。

<p id="target">Hello, World!</p>

p#targetaccessKey: ""
align: ""
attributes: Named
NodeMapbaseURI: ""
childElementCount: 0
childNodes: NodeList[1]
children: HTMLCollection[0]
classList: DOMTokenList[0]
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
dataset: DOM
StringMapdir: ""
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: "target"
innerHTML: "Hello, World!"
innerText: "Hello, World!"
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: null
localName: "p"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "P"
nodeType: 1
nodeValue: null
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onautocomplete: null
onautocompleteerror: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<p id="target">Hello, World!</p>"
outerText: "Hello, World!"
ownerDocument: document
parentElement: null
parentNode: null
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
shadowRoot: null
spellcheck: true
style: CSSStyle
DeclarationtabIndex: -1
tagName: "P"
textContent: "Hello, World!"
title: ""
translate: true
webkitdropzone: ""
__proto__: HTMLParagraphElement

通過使用 DOM 提供的 API (Application Program Interface) 可以動態(tài)的修改節(jié)點（node），也就是對 DOM 樹的直接操作。 瀏覽器中通過使用 JavaScript 來實現(xiàn)對于 DOM 樹的改動。

DOM 包含

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

HTML 轉(zhuǎn)換 DOM 樹

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My title</title>
  </head>
  <body>
    <a href="">My Link</a>
    <h1>My header</h1>
  </body>
</html>

節(jié)點遍歷

在元素節(jié)點中提取自己所需的節(jié)點，并予以操作。

// Document.getElementsByTagName()
// 更具標簽名找到目標節(jié)點的集合，此例中為 <h1>My header</h1>
var node = document.getElementsByTagName('h1')[0];

// Node.parentNode;
// 獲得目標節(jié)點的父節(jié)點，此例中為 body 元素
node.parentNode;

// Node.firstChild
// 獲得目標節(jié)點的第一個子節(jié)點，此例中為 "My header"
node.firstChild;

// Node.lastChild
// 獲得目標節(jié)點的最后一個子節(jié)點，此例中為 "My header"
node.lastChild;

// Node.previousSibling;
// 獲得目標節(jié)點的前一個相鄰節(jié)點
node.previousSibling;

// Node.nextSibling;
// 獲得目標節(jié)點的下一個相鄰節(jié)點
node.nextSibling;

節(jié)點類型

常用節(jié)點類型

  • ELEMENT_NODE 可使用 Document.createElement('elementName'); 創(chuàng)建
  • TEXT_NODE 可使用 Document.createTextNode('Text Value'); 創(chuàng)建

不常用節(jié)點類型

  • COMMENT_NODE
  • DOCUMENT_TYPE_NODE

不同節(jié)點對應的NodeType類型

此值可以通過 Node.nodeType 來獲取。

節(jié)點編號節(jié)點名稱
1Element
2Attribute
3Text
4CDATA Section
5Entity Reference
6Entity
7Processing Instrucion
8Comment
9Document
10Document Type
11Document Fragment
12Notation

NOTE：此處需要清楚節(jié)點和元素的區(qū)別。我們平常說的元素 其實指的是節(jié)點中得元素節(jié)點，所以說節(jié)點包含元素，節(jié)點還包括文本節(jié)點、實體節(jié)點等。

元素遍歷

元素節(jié)點符合 HTML DOM 樹規(guī)則，所以它與 DOM 中存在的節(jié)點相似。

<p>
  Hello,
    <em>Xinyang</em>!
  回到
    <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      主頁
    </a>
  。
</p>

// 在選取元素節(jié)點后

p.firstElementChild;       // <em>Xinyang</em>
p.lastElementChild;        // <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >主頁</a>

em.nextElementSibling;     // <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >主頁</a>
em.previousElementSibling; // "Hello,"


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號