第十章 DOM
1、Node类型：12种数值常量——Node.ELEMENT_NODE(1), Node.ATTRIBUTE_NODE(2), Node.TEXT_NODE(3),Node.CDATA_SECTION_NODE(4),Node.ENTITY_REFERENCE_NODE(5),Node.ENTITY_NODE(6),Node.PROCESSING_INSTRUCTION_NODE(7),Node.COMMENT_NODE(8),Node.DOCUMENT_NODE(9),Node.DOCUMENT_TYPE_NODE(10),Node.DOCUMENT_FRAGMENT_NODE(11),Node.NOTATION_NODE(12)；每个节点都有一个nodeType属性
1）节点关系：每个节点都有一个childNodes属性，其中保存着一个NodeList对象，可以通过方括号以及item()方法来访问NodeList，可以通过length属性来表示访问NodeList那一刻的节点数量；每个节点都有一个parentNode属性，该属性指向文档树中的父节点；通过使用childNodes列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点，childNodes列表中的第一个节点的previousSibling属性值为null，childNodes列表中的最后一个节点的nextSibling属性值为null；父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点；每个节点都有一个ownerDocument属性，该属性指向表示整个文档的文档节点
2）操作节点：appendChild()方法用于向childNodes列表的末尾添加一个节点，添加节点后，childNodes的新增节点、父节点和以前的最后一个子节点的关系指针就会相应地得到更新，更新完成后，appendChild()返回新增节点；insertBefore()方法用于向childNodes列表中的某个特定位置之前添加一个节点，接收两个参数——要插入的节点和作为参照的节点，如果参照节点是null，则insertBefore()与appendChild()执行相同的操作；replaceChild()用于向childNodes列表中的某个特定位置替换一个节点，接收两个参数——要插入的节点和要替换的节点；remove()用于向childNodes列表中的某个特定位置移除一个节点，接收一个参数——要移除的节点，remove()返回被移除的节点，被移除的节点仍然为文档所有，只不过在文档中已经没有位置
3）其他方法：cloneNode()用于创建这个方法的节点的一个完全相同的副本，接收一个布尔值参数，表示是否执行深复制，在参数为true的情况下执行深复制，复制节点及整个子节点树，否则执行浅复制，只复制节点本身；normalize()用于处理文档树中的文本节点，如果找到空文本节点就删除它，如果找到相邻的文本节点就将它们合并为一个文本节点
2、Document类型：用于表示HTML页面或基于XML的文档以及作为HTMLDocument实例的document对象
1）Document节点：nodeType的值为9；nodeName的值为”#document”；nodeValue的值为null；parentNode的值为null；ownerDocument的值为null；其子节点可能是一个DocumenType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment
2）文档的子节点：document.documentElement属性用于指向HTML页面中的<html>元素；document.body属性用于指向HTML页面中的<body>元素；document.doctype属性用于指向HTML页面中的<!DOCTYPE>元素
3）文档信息：document.title属性包含<title>元素的文本；document.URL属性包含页面完整的URL（地址栏中显示的URL）；document.domain属性包含页面的域名，可以手动设置，不过不能由loose转为tight；document.referrer属性包含链接到当前页面的那个页面的URL
4）查找元素：document.getElementsById()接收一个参数——要取得的元素的ID（区分大小写），如果找到相应的元素则返回该元素，否则返回null；document.getElementsByTagName()接收一个参数——要取得的元素的标签名，返回的是包含零或多个元素的NodeList，在HTML文档中返回一个HTMLCollection对象，可以通过方括号中传入数值或字符串形式的索引值或者通过对数值数值索引调用item()、对字符串索引调用namedItem()取得元素；document.getElementsByTagName()接收一个参数——要取得的元素的name，常常用于取得单选按钮，返回一个HTMLCollection对象
5）特殊集合：document.anchors包含文档中所有带name特性的<a>元素；document.applets包含文档中所有的<applet>元素；document.forms包含文档中所有的<form>元素；document.images包含文档中所有的<img>元素；document.links包含文档中所有带href特性的<links>元素；
6）DOM一致性检测：document.implementation属性用于提供DOM的信息和功能，与浏览器对DOM的实现相对应；DOM1只为document.implementation规定了一个方法hasFeature()，接收两个参数——要检测的DOM功能的名称和版本号，如果浏览器支持给定名称和版本的功能，则返回true
7）文档写入：write()和writeln()方法都接收一个字符串参数——要写入到输出流中的文本，write()会原样写入，writeln()则会在字符串的末尾添加一个换行符；open()和close()分别用于打开和关闭网页的输出流，如果是在页面加载期间
3、Element类型：用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问
1）Element节点：nodeType的值为1；nodeName的值为元素的标签名；nodeValue的值为null；parentNode可能是Document或Element；其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
2）标准特性：id表示元素在文档中的唯一标识符；title表示有关文档的附加信息；lang表示元素内容的语言代码；dir表示语言的方向，值为ltr或rtl；className与元素的class特性对于
3）操作特性：getAttribute()接收一个参数——要取得的特性名，取得实际特性或自定义特性的值；setAttribute()接收两个参数——要设置的特性名和值；removeAttribute()接收一个参数——要删除的特性名
4）attributes属性：Element类型是使用attributes属性的唯一一个DOM节点类型，attributes属性中包含一个NamedNodeMap对象；getNamedItem(name)返回nodeName属性等于name的节点；removeNamedItem(name)从列表中删除nodeName属性等于name的节点；setNamedItem(node)向列表中添加节点，以节点nodeName属性为索引；item(pos)返回位于数字pos位置处的节点
5）创建元素：document.createElement()用于创建一个新元素，接收一个参数——要创建的元素的标签名；要把新元素添加到文档树中，可以使用appendChild()、insertBefore()、replaceChild()方法
6）元素的子节点：元素的childNodes属性中包含了它的所有的子节点
4、Text类型：包含的是可以按照字面解释的纯文本内容
1）Text节点：nodeType的值为3；nodeName的值为”#text”；nodeValue的值为节点所包含的文本；parentNode是一个Element；不支持子节点
2）操作文本节点：appendData(text)将text添加到节点的末尾；deleteData(offset,count)从offset指定的位置开始删除count个字符；insertData(offset,text)在offset指定的位置插入text；replaceData(offset,count,text)用text替换从offset指定的位置开始到offset+count为止处的文本；splitText(offset)从offset指定的位置将当前文本节点分成两个文本节点；subStringData(offset,count)提取从offset指定的位置开始到offset+count为止处的字符
3）创建文本节点：document.createTextNode()创建新文本节点，接收一个参数——要插入节点中的文本
4）规范文本节点：element.normalize()将相邻地同胞文本节点合并
5）分割文本节点：splitText()将一个文本节点分成两个文本节点，接收一个参数——要分割的位置，原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本
5、Comment类型：用于表示注释
1）Comment节点：nodeType的值为8；nodeName的值为”#comment”；nodeValue的值为注释的内容；parentNode可能是Document或Element；不支持子节点
2）Comment类型与Text类型继承自相同的基类，因此拥有除splitText()之外的所有字符串操作方法
6、CDATASection类型：只针对基于XML的文档，表示的是CDATA区域
7、DocumentType类型：包含着与文档的doctype有关的所有信息
1）nodeType的值为10；nodeName的值为doctype的名称；nodeValue的值为null；parentNode可能是Document；不支持子节点
8、DocumentFragment类型：用于包含和控制节点，但不会占用额外的资源
1）DocumentFragment节点：nodeType的值为11；nodeName的值为”#document-fragment”；nodeValue的值为null；parentNode的值为null；其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
2）创建文档片段：document.createDocumentFragment()用于保存将来可能要添加到文档中的节点
3）添加文档片段：appendChild()或insertBefore()用于将文档片段中的所有子节点添加到相应文职
9、Attr类型：用于表示元素的特性
1）Attr节点：nodeType的值为2；nodeName的值为特性的名称；nodeValue的值为特性的值；parentNode的值为null；在HTML中不支持子节点；在XHTML中子节点可以是Text或EntityReference
10、DOM操作技术
1）动态脚本：创建动态脚本的方式——插入外部文件和直接插入JavaScript代码；
插入外部文件：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
直接插入JavaScript代码：
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;
}
document.body.appendChild(script);
}
2）动态样式：创建动态样式的方式——<link>元素包含来自外部的文件和<style>元素指定嵌入的样式；
<link>元素包含来自外部的文件：
function loadStyles(url){
var link = document.createElement("link");
link.rel = “stylesheet”;
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
<style>元素指定嵌入的样式：
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
} catch (ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
3）操作表格
//创建表格
var table = document.createElement(“table”);
table.border = 1;
table.width = “100%”;
//创建tbody
var tbody = document.createElement(“tbody”);
table.appenChild(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 2,1”));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode(“cell 1,2”));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode(“cell 2,2”));
//将表格添加到文档主体中
document.body.appendChild(table);
4）使用NodeList
第11章 DOM扩展
1、选择符API（Selectors API）
1）querySelector()方法：接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null
2）querySelectorAll()方法：接收一个CSS选择符，返回与该模式匹配的一个NodeList对象；要取得返回的NodeList对象中的每一个元素，可以使用item()方法，也可以使用方括号语法
3）matchesSelector()方法：接收一个CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false
2、元素遍历：Element Traversal API为DOM元素添加了5个属性
1）childElementCount：返回子元素（不包括文本节点和注释）的个数；
2）firstElementChild：指向第一个子元素；
3）lastElementChild：指向最后一个子元素；
4）previousElementSibling：指向前一个同辈元素；
5）nextElementSibling：指向后一个同辈元素；
3、HTML5
1）与类相关的扩充：
getElementsByClassName()方法接收一个参数——包含一或多个类名的字符串（类名的顺序无关），返回带有给定类的所有元素的NodeList对象；
classList属性添加、删除、替换类名，add(value)将给定的的字符串添加到列表中，如果存在就不添加；contain(value)表示列表中是否存在给定的值，如果存在返回true，否则返回false；remove(value)从列表中删除给定的字符串；toggle(value)如果列表中已经存在给定的值就删除它，如果列表中没有存在给定的值就添加它
2）焦点管理：
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用；文档加载期间，document.activeElement的值为null；
document.hasFocus()方法用于确定文档是否获得了焦点
3）HTMLDocument的变化
document.readyState属性表示文档的加载状态，值为loading表示正在加载文档，值为complete表示已经加载完文档；
document.compatMode属性用于检测页面的兼容模式，值为CSS1Compat表示标准模式，值为BackCompat表示混杂模式；
document.head属性用于引用文档的<head>元素
4）字符集属性：document.charset自定义字符集；document.defaultCharset表示根据默认浏览器及操作系统的设置字符集
5）自定义数据属性：为元素提供与渲染无关的信息，或者提供语义信息；需要添加前缀data-；通过元素的dataset属性来访问自定义数据属性的值
6）插入标记：
innerHTML属性：在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记；在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点
outerHTML属性：在读模式下，innerHTML属性返回与调用元素本身及所有子节点（包括元素、注释和文本节点）对应的HTML标记；在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素
insertAdjacentHTML()方法：接收两个参数——插入位置（beforebegin、afterbegin、beforeend、afterend）和要插入的HTML文本
4、专有扩展