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