javascript: The Document Object Model(DOM)

來源:互聯網
上載者:User
DOM
  • 節點類型的12個常量:
    • Node.ELEMENT_NODE
    • Node.ATTRIBUTE_NODE
    • Node.TEXT_NODE
    • Node.CDATA_SECTION_NODE
    • Node.ENTITY_REFERENCE_NODE
    • Node.ENTITY_NODE
    • Node.PROCESSING_INSTRUCTION_NODE
    • Node.COMMENT_NODE
    • Node.DOCUMENT_NODE
    • Node.DOCUMENT_TYPE_NODE
    • Node.DOCUMENT_FRAGMENT_NODE
    • Node.NOTATION_NODE
  • Node
    的方法/特徵:nodeName, nodeValue, nodeType, ownerDocument, firstChild,
    lastChild, childNodes, previousSibling, nextSibling, hasChildNodes(),
    attributes, appendChild(node), removeChild(node), replaceChild(newnode,
    node), insertBefore(newnode, node).
  • HTMLElement,
    如HTMLDivElement代表了<div>
  • document.documentElement=<html>,
    document.body = <body>
  • element的attributes其實是NamedNodeMap,
    可以用下列方法操作: getNamedItem(name), removeNamedItem(name),
    setNamedItem(node), item(pos).[這些方法都是返回一個Attr節點]. shortcuts:
    • getAttribute(name)
      = attributes.getNamedItem(name).value.
    • setAttribute(name,
      newvalue) = attribute.getNamedItem(name).value
    • removeAttribute(name)
      = attribute.removeNamedItem(name).
  • 訪問指定節點:
    • getElementsByTagName()
    • getElementsByName()[ie
      6和Opera 7.5在這個方法的實現上有些錯誤: 1. 還會返回id等於給定名稱的元素.2.
      他們僅僅檢查<input/>和<img/>元素]
    • getElementById()[ie6有類似bug,
      id, name不分]
  • 建立和動作節點
    • createElement(),
      createTextNode(), appendChild()
    • 所有dom操作必須在頁面完全下載完之後才能進行,因為頁面正在載入
      時,dom樹還沒有完全構建.所以必須使用onload事件.
    • removeChild(), replaceChild(),
      insertBefore()
    • createDocumentFragment().避免多次重新整理document.

 


HTML DOM特徵

 

  •  element.getAttribute("src")
    == element.src, element.getAttribute("border") == element.border.
    例外是class, 因為class在ECMAScript中是一個保留字,所以element.getAttribute("class") ==
    element.className.
  • table元素的額外屬性.
    • <table>:
      caption, tBodies, tFoot, tHead, rows, createTHead(), createTFoot(),
      createCaption(), deleteTHead/TFoot/Caption(), deleteRow(position),
      insertRow(position).
    • <tbody>: rows, deleteRow(pos),
      insertRow(pos)
    • <tr>: cells, deleteCell(pos),
      insertCell(pos).

 


遍曆DOM
NodeIterator(
深度優先搜尋):
  • document.createNodeIterator(root, whatToShow,
    filter, entityReferenceExpansion)
  • whatToShow可以是:
    • NodeFilter.SHOW_ALL,
      SHOW_ELEMENT, SHOW_ATTRIBUTE, SHOW_TEXT, SHOW_CDATA_SECTION,
      SHOW_ENTITY_REFERENCE, SHOW_ENTITY, SHOW_PROCESSING_INSTRUCTION,
      SHOW_COMMENT, SHOW_DOCUMENT, SHOW_DOCUMENT_TYPE, SHOW_DOCUMENT_FRAGMENT,
      SHOW_NOTATION.
  • iterator.nextNode(), previousNode().
  • NodeFilter
    子類, acceptNode()是唯一的方法,顯示則返回NodeFilter.FILTER_ACCPET,
    過濾則返回NodeFilter.FILTER_REJECT.

TreeWalker
  • 繼承
    NodeIterator,添加了:

    • parentNode()
    • firstChild()
    • lastChild()
    • nextSibling()
    • previousSibling()
  • document.createTreeWalker()
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.