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.bgColor document.cookie document.domain document.lastModified document.location document.referrer document.title document.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 属性, 常见节点类型 Element Node.ELEMENT_NODE 1 Text Node.TEXT_NODE 3 Document Node.DOCUMENT_NODE 9 Comment Node.COMMENT_NODE 8 DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 Attr Node.ATTRIBUTE_NODE 2 -- - 上面这些常量在 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 // HTMLHtmlElement document.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(); } }