JavaScript DOM 笔记

/** * 很久没写 blog 了; 毕业离开学校快一个月了，工作也快一个月了； * 离开学校侯发现：没有那种学习氛围了，每天不看书不会有罪过感了，很多时候也是工作一天看不下去了。 * 真的希望不那么快就钝化掉，我还没有学明白呢 :) * 最近买了几本书，自己买了没看的书也堆积了几本，希望能保持不断的学习。 */// 回归主题/** * DOM，Document Object Model，文档对象模型 * 一个 DOM 就是一个 API，他定义了如何访问组成一个文档的对象，W3C 定义了一个标准的 DOM， * 在绝大部分现代浏览器里得到很好的支持，W3C 的 DOM API 是定义在 XML 和 HTML 的， * 当然也有 HTML 专有的借口( HTMLDocument API)； * W3C DOM 定义了一个 Document API，提供了可用于 HTML 和 XML 的通用档功能,以及一个专门的 HTMLDocument API * XHTML 也是 XML 文档，只不过他是一些元素的名字和组合受限的 XML，又因为 XHTML 是 HTML 的 extended， * 所以 XHTML 可以使用 W3C 的 DOM API * * W3C 定义的 DOM 是针对浏览器的，因此是操作 XML，HTML, XHTML 的借口；但是 DOM 只是一个模型，一个规范， * 其他语言可以实现； * W3C 实现的 DOM API 是针对浏览器文档的，而 JavaScript 是浏览器客户端编程的主要语言，因此 W3C 的 DOM API * 在 JavaScript 中得好很好支持；JavaScript 的一个重要功能也是操作浏览器文档(脚本化文档)。 * * W3C 的 DOM API 经历一个不断变化的过程，通常被称为 0级，1级，2级 DOM * * 这篇笔记主要记录下： * - W3C 的 DOM API 变化 * - 遗留 DOM 的接口 * - W3C DOM 的接口 *////** * 遗留的 DOM API - 0 级 DOM */// 0 级 DOM 是在 Netscape2 和 Netscap3 实现的一个简单的 DOM// 也被作为 0级 DOM 正式纳入 W3C 标准// 0级 DOM 定义了 Document 类，document 对象(习惯称为 Document 对象)是他的一个实例，他的大多数功能是针对 HTMLDocument 的,//// -- 方法:document.write( 'hello world' );document.write( 'hello', 'world');document.writeln( 'hello world'); // 配合 <pre> 使用document.open();document.close();//// -- 属性document.bgColordocument.cookiedocument.domaindocument.lastModifieddocument.locationdocument.referrerdocument.titledocument.URL//// -- wendang 对象集合 document.anchors[]document.applets[]document.forms[] // 每个 form 对象有个 elements[] 集合，他是 input 元素的集合document.images[]document.links[] - 这些对象集合中的对象是可以脚本化的，但是他们没有谁会允许改变wendang的结构 - 遗留 DOM 不允许重新编排wendang//

// -- W3C 标准 DOM - HTML 文档的嵌入标记的层级结构，在 DOM 中表示对象的一颗树, 这棵树包含了表示 - HTML 标记和元素的节点，以及表示文本的串的节点 - DOM 树由不同种类的 NODE 对象组成 - NODE 接口定义了遍历和操作树的属性和方法:-- - childNodes[] - firstChild - lastChild - nextSibling - previousSibling - parentNode-- - appendChild() - removeChild() - replaceChild() - insertBefore()//// 每个 NODE 对象都有一个 nodeType 属性, 常见节点类型ElementNode.ELEMENT_NODE1TextNode.TEXT_NODE3DocumentNode.DOCUMENT_NODE9CommentNode.COMMENT_NODE8DocumentFragmentNode.DOCUMENT_FRAGMENT_NODE11AttrNode.ATTRIBUTE_NODE2-- - 上面这些常量在 IE 中不存在，可以自己定义一下if( ! window.Node){window.Node = {ELEMENT_NODE:1,TEXT_NODE:3,DOCUMENT_NODE:9,COMMENT_NODE:8,DOCUMENT_FRAGMENT_NODE:11,ATTRIBUTE_NODE:2}}// - DOM 树根的 NODE 是 Document 对象,一个 DOM 树中只有一个 Document 对象 - Document对象 ( document ) 并不是 Element 对象，但是通过它可以获取 html 对象 - document 和 html 对象间的转化关系document // HTMLDocument, HTMLDocument 是 Document 接口的子接口,专门针对 HTML 的接口document.documentElement // HTMLHtmlElementdocument.documentElement.parentNode == document // true - 因此 document.documentElement 是 document 的子元素 - 也就是 html 元素是 document 对象的子元素//// Element 接口的方法 - getAttribute() - setAttribute() - removeAttribute()//// HTMLDocument 接口 - HTMLDocument 接口定义了 id, style, title, lang, dir, className 属性-- - document.implementation.hasFeature() // 查询一个 DOM 实现是否实现了某个DOM特性 - document.getElementById() - document.getElementsByTagName() // 传递 '*' 参数获取所有 Element 对象,排列顺序为他们在文档中的顺序 - document.getElementsByName() // 通过 name 属性获取 Element 对象-- - Element 对象也实现了 getElementsByTagName() 方法 - document.createElement() // 创建 Element 对象， - document.createTextNode() // 创建文本节点-- wen本节点的方法 - appendData() - insertData() - deleteData() - replaceData()//// DocumentFragment 对象 - 特殊类型的节点，本身不出现在文档中，只作为连续节点集合的临时容器, - 并允许将这些节点作为一个对象来操作;当把一个 DocumentFragment 对象插入文档时，插入的不是 - DocumentFragment 自身，而是他的所有子节点-- - document.createDocumentFragment()///////** * 查询选定的文本 */ function getSelectedText(){if( window.getSelection){return window.getSelection().toString();}else if( document.getSelection){return document.getSelection();}else if( document.selection ){return document.selection.createRange().text();}}