【JavaScript高级程序设计】第10章（文档对象模型DOM）

10. DOM

10.1 节点层次

1. Node

DOM1 定义了一个Node 接口
在JavaScript中是作为Node类型实现的
JavaScript中所有节点类型都继承自Node类型

Node常量	值	描述
ELEMENT_NODE	1	元素
TEXT_NODE	3	文本
PROCESSING_INSTRUCTION_NODE	7	处理指令
COMMENT_NODE	8	注释
DOCUMENT_NODE	9	文档
DOCUMENT_TYPE_NODE	10	文档类型
DOCUMENT_FRAGMENT_NODE	11	文档片段
ATTRIBUTE_NODE	2	属性
CDATA_SECTION_NODE	4	Unparsed Character Data 不经XML解析器进行解析的文本数据
ENTITY_REFERENCE_NODE	5	实体引用
ENTITY_NODE	6	实体
NOTATION_NODE	12

属性
- nodeType
  - Node类型中由12个数值常量，任何节点类型必居其一
  - DOM4中废弃了2、4、5、6、12
- nodeName 和 nodeValue
  - 元素节点，nodeName都是标签名, nodeValue都是null
- childNodes
  - 每个节点都有一个childNodes，里面保存着NodeList类数组对象
  - NodeList是基于DOM结构动态执行查询的结果
  - DOM结构的变化能自动反映在NodeList对象中
  - 是有呼吸有生命的对象，而不是我们第一次访问他们的某个瞬间的快照
  - 访问NodeList中的节点，可以通过方括号，也可以使用item()
  - Array.prototype.slice.call(类数组) 可以转换为数组
- parentNode
  - firstChild
  - lastChild
- nextSibling
  - 最后一个节点的nextSibling == null
- previousSibling
  - 第一个节点的previousSibling == null
- ownerDocument
  - 指向整个文档的文档节点document

// Array.prototype.slice 在 IE8 之前不支持
function convertToArray(arrayLike){
	var array = [];
	try{
		array = Array.prototype.slice.call(arrayLike);
	} catch(ex){
		for(let i = 0; i < arrayLike.length; i++){
			array.push(arrayLike[i]);
		}
	}
	return array;
}

方法
- hasChildNodes()
- appendChild()
  - 传入原文档中不存在的节点，向childNodes列表的末尾添加一个节点
  - 传入已存在的节点，会将其从原来位置转移到新位置
- insertBefore(newNode, existNode)
- replaceChild(newNode, existNode)
- removeChild()
- cloneNode(boolean) 是否深复制
  - 只复制特性、子节点
  - 不会复制添加到DOM中的JavaScript属性，例如事件处理程序
- normalize()
  - 可能会有文本节点不包含文本
  - 可能会接连出现两个文本节点
  - normalize()处理文档树中的文本节点

2. Document

在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面
document对象是window对象的一个属性，可以作为全局变量访问
Document节点具有下列特征
- nodeType == 9
- nodeName == "#document"
- nodeValue == null
- parentNode == null
- ownerDocument == null
- 其子节点可能是一个DocumentType/Element/ProcessingInstruction/Comment
文档子节点
- documentElement 指向 <html>元素
- body 指向 <body>元素
- doctyoe
文档信息
- title —> <title>
- URL
- domain
  - 修改domain一致，来通信
  - loose 和 tight
- referrer 连接到当前页面的那个页面的URL
查找元素
- document.getElementById()
- document.getElementsByTagName()
  - HTMLCollection 与NodeList类似，namedItem()
- getElementsByName() 只有HTMLDocument类型才有
特殊集合
- 特殊集合都是HTMLCollection对象
- document.anchors 所有带name的<a>
- document.applets 所有<applet>
- document.forms 所有<form>
- document.images 所有<img>
- document.links 所有带href的<a>
DOM一致性检测
- document.implementation
- write()/writeln()/open()/close()

3. Element

Element节点具有以下特征：
- nodeType == 1
- nodeName == 元素标签名 == tagName
- nodeValue == null
- parentNode == Document或Element
- 其子节点可能是Element/Text/Comment/ProcessingInstuction/CDATASection/EntityRenference
tagName 返回元素的标签名 —> 在HTML中标签名始终全部大写，"DIV"
HTML元素
- HTMLElement 标准特性
  - id 唯一标识
  - title 附加说明，工具提示条显示
  - lang 语言
  - dir 文字方向
  - className 类名
操作特性
- getAttribute() 得到自定义特性的值
- setAttribute()
- removeAttribute()
- on-xxx 事件处理程序
attributes
- Element类型是使用attributes属性的唯一一个DOM节点类型
创建元素
- createElement(tagName)

4. Text

Text节点具有以下特征：
- nodeType == 3
- nodeName == #text
- nodeValue == data 文本
- parentNode 是一个Element
- 不支持子节点
- appendData(text)
- deleteData(offset, count)
- insertData(offset, text)
- replaceData(offset, count, text)
- splitText(offset)
- substringData(offset, count)
创建文本节点
- createTextNode()
规范化文本节点
- normalize()
分割文本节点
- splitText()

5. Comment

Comment节点类型：
- nodeType == 8
- nodeName == "#comment"
- nodeValue == 注释的内容
- parentNode == Document/Element
- 不支持子节点

6. CDATASection

只出现在XML文档

7. DocumentType

name —> <!DOCTYPE之后的文本
entities
notations

8. DocumentFragement

文档片段，是一种轻量级文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源

9. Attr

name
value
specified

10.2 DOM操作技术

1. 动态脚本

动态添加<script>

// 动态加载外部脚本
function loadScript(url){
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;
	document.body.appendChild(script);
}
// 动态加载字符串代码
var scrip = document.createElement("script");
script.type = "text/javascript";
var text = document.createTextNode(
	"function hello(){ console.log('hello world')}"
);
script.appendChild(text);
document.body.appendChild(script);

2. 动态样式

<link rel="stylesheet" type="text/css" href="styles.css">
必须是head标签中

// link
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "xxx.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
// style
var style = document.createElement("style");
style.type = "text/css";
var text = document.createTextNode("body{background-color: red}");
style.appendChild(text);
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

3. 操作表格

insertRow
insertCell
rows
cells

var table = document.createElement("table");
table.border = 1;
table.width = "100%";
var tbody = document.createElement("tbody");
table.appendChild(tbody);
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell(1,1)"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell(1,2)"));