`
- 浏览:
17663 次
- 性别:
- 来自:
杭州
-
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()
分享到：
相关推荐
《DOM Scripting: Web Design with JavaScript and the Document Object Model》是由Jeremy Keith撰写的一本关于JavaScript和DOM编程的经典著作。这本书深入浅出地介绍了如何利用JavaScript动态操控网页内容，提升...
总之，《Web Design with JavaScript and the Document Object Model 2005》不仅是一本优秀的DOM编程入门书籍，也是一本深入了解JavaScript与DOM如何协同工作、构建现代Web应用的重要指南。对于想要学习前端开发的人...
《DOM Scripting: Web Design with JavaScript and the Document Object Model》第二版是一本由Jeremy Keith编写，Jeffrey Sambells合作完成的经典JavaScript教程。本书深入浅出地介绍了如何使用JavaScript与文档...
- **DOM操作**: DOM(Document Object Model)是文档对象模型的简称，它为HTML和XML文档提供了一种标准的编程接口，使得开发者可以通过JavaScript来访问和修改页面结构。 - **事件处理**: 如鼠标点击、键盘输入等...
8. **DOM操作**：JavaScript与HTML的交互主要通过DOM（Document Object Model）进行。书中解释了如何选择、修改和添加DOM元素，以实现动态网页效果。 9. **模块化**：随着应用复杂性的增加，模块化变得越来越重要。...
文档对象模型（Document Object Model，简称DOM）是一个跨平台的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM以树状结构的形式表示HTML或XML文档，它将文档视为一个节点树，每个节点代表文档...
Work with the document object model (DOM) and Ajax to dynamicall update your pages Add functionality to your apps using HTML5's powerful APIs Use Test Driven Development methodology to write more ...
DOM Scripting might appear to be more verbose than, say, CSS, but once you’ve got the hang of the syntax, you’ll find yourself armed with a powerful web development tool.
标题“DOM.Scripting.Web.Design.with.JavaScript.and.the.Document.Object.Model”直接指出了本书的主要内容和技术领域，即利用JavaScript和文档对象模型（Document Object Model，简称DOM）进行网页设计的技术方法...
As well as focusing on client-side JavaScript, you will also learn how to work with the Browser Object Model, the Document Object Model (DOM), how to use XML and JSON as well as communicate with ...
Msxml2.DOMDocument是Microsoft XML库（MSXML）中的核心组件，它实现了W3C的Document Object Model (DOM)接口。DOM是一种编程接口，允许程序和脚本动态地访问和更新XML文档的结构、内容和样式。DOMDocument对象提供...
英文原版DOM Scripting Web Design with JavaScript and the Document Object Model，语言通俗易懂，适合dom和javascript初学者。
DOM:document object model 文档对象模型 获取DOM节点（获取的元素都属于DOM对象）： 1.根据ID获取元素：document.getElementById 2.根据类名获取元素：document.getElementsByClassName 3.根据标签名获取...
DOM，全称为**文档对象模型**（Document Object Model），是HTML和XML文档的标准API。它将文档表示为节点和对象的树形结构，使得开发人员可以通过编程方式动态地访问、修改文档的内容、结构和样式。 1. **DOM模型的...