javascript: The Document Object Model(DOM)
2013年10月12日
⁄ 综合
⁄ 共 2272字 ⁄ 字号
小 中 大
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()