国产chinesehdxxxx野外,国产av无码专区亚洲av琪琪,播放男人添女人下边视频,成人国产精品一区二区免费看,chinese丰满人妻videos

<span id="wtp6i"></span>
<span id="wtp6i"></span><bdo id="wtp6i"><mark id="wtp6i"></mark></bdo>

<thead id="wtp6i"></thead><rt id="wtp6i"><noframes id="wtp6i">
<label id="wtp6i"></label>
<i id="wtp6i"></i>
<center id="wtp6i"><tr id="wtp6i"></tr></center>

  • 文檔樹

    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" >
          主頁
        </a>
      。
    </p>
    
    // 在選取元素節(jié)點后
    
    p.firstElementChild;       // <em>Xinyang</em>
    p.lastElementChild;        // <a  rel="external nofollow" target="_blank" >主頁</a>
    
    em.nextElementSibling;     // <a  rel="external nofollow" target="_blank" >主頁</a>
    em.previousElementSibling; // "Hello,"


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

    掃描二維碼

    下載編程獅App

    公眾號
    微信公眾號

    編程獅公眾號