javascript: The Document Object Model(DOM)

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()