写在前面：暂时只是粗略的排版，以后还会整理。也可到 http://bulabula.top/高三笔记/笔记10-12.txt 下载TXT版
十、 DOM
1)、DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
10.1 节点层次
10.1.1 Node类型
1)、JavaScript 中的所有节点类型都继承自Node 类型。所有节点类型都共享着相同的基本属性和方法。
2)、每个节点都有一个nodeType 属性，用于表明节点的类型。
节点类型由在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)。
1. nodeName 和nodeValue 属性
1)、使用nodeName 和nodeValue 属性可以了解节点的具体信息。
2)、 对于元素节点，nodeName 中保存的始终都是元素的标签名，而nodeValue 的值则始终为null。
2. 节点关系
1)、每个节点都有一个childNodes 属性，其中保存着一个NodeList 对象。NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
访问NodeList中的节点可以通过方括号，也可以使用item()方法。栗子：someNode.childNodes[0]; 或 someNode.childNodes.item(0);
2)、每个节点都有一个parentNode 属性，该属性指向文档树中的父节点。包含在childNodes 列表中的所有节点都具有相同的父节点，因此它们的parentNode 属性都指向同一个节点。
previousSibling和nextSibling 属性可以访问childNodes 列表中某个节点的同胞节点。
父节点的firstChild 和lastChild属性分别指向其childNodes 列表中的第一个和最后一个节点。
3)、hasChildNodes()方法在节点包含一或多个子节点的情况下返回true。用来检测节点是否包含其他节点。
4)、ownerDocument属性指向表示整个文档的文档节点。
3. 操作节点
1)、appendChild()方法用于向childNodes 列表的末尾添加一个节点。添加完成后childNodes会即时更新，并返回appendChild()新增的节点。如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。
2)、insertBefore()方法用于把节点放在childNodes 列表中某个特定的位置上，而不是放在末尾。该方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。
3)、replaceChild()方法用于替换并移除节点。方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。
4)、removeChild()方法用于移除节点。方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值。
4. 其他方法
1)、cloneNode()方法用于创建调用这个方法的节点的一个完全相同的副本。方法接受一个布尔值参数，表示是否执行深复制；为true时，复制节点及其整个子节点树；为false时只复制节点本身。复制后返回的节点副本属于文档所有，手动指定父节点。
10.1.2 Document类型
1)、JavaScript 通过Document 类型表示文档。在浏览器中，document 对象是HTMLDocument（继承自Document 类型）的一个实例，表示整个HTML 页面。而且，document 对象是window 对象的一个属性，因此可以将其作为全局对象来访问。
Document 节点具有下列特征：
nodeType 的值为9；
nodeName 的值为"#document"；
nodeValue 的值为null；
parentNode 的值为null；
ownerDocument 的值为 null；
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。
1. 文档的子节点
1)、虽然DOM 标准规定Document 节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment。
document.documentElement、document.childNodes[0]和document.firstChild都可以取到html元素，但通过documentElement更快捷更直接。
document.body 属性可以取得对<body>的引用。
document.doctype属性可以取得对<!DOCTYPE>的引用。
2. 文档信息
1)、document.title;//取得文档标题。document.title = "New Title";//设置新标题。
2)、document.URL;//取得完整的URL
3)、document.domain;//取得域名 注：由于document.domain 字符串不一样，内外两个页面之间无法相互访问对方的JavaScript 对象。但如果将这两个页面的document.domain 值都设置为"wrox.com"，它们之间就可以通信了。
4)、document.referrer;// 取得来源页面的URL
3. 查找元素
1)、getElementById()方法接收一个参数：要取得的元素的ID。如果找到相应的元素则返回该元素，如果不存在带有相应ID 的元素，则返回null。若有N个元素的ID相同，则返回第一次出现的元素。注：IE7 及较低本最好不让表单字段的name 特性与其他元素的ID 相同。
2)、getElementsByTagName()方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的NodeList。在HTML 文档中，这个方法会返回一个HTMLCollection 对象，作为一个“动态”集合，该对象与NodeList 非常类似。
HTMLCollection 对象还有一个方法，叫做namedItem()，使用这个方法可以通过元素的name特性取得集合中的项。
栗子： var images = document.getElementsByTagName("img");
var myImage = images.namedItem("myImage");
3)、getElementsByName()方法会返回带有给定name 特性的所有元素。
4. 特殊集合
1)、除了属性和方法，document 对象还有一些特殊的集合。这些集合都是HTMLCollection 对象，为访问文档常用的部分提供了快捷方式，包括：
document.anchors，包含文档中所有带name 特性的<a>元素；
document.applets，包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素，所以这个集合已经不建议使用了；
document.forms，包含文档中所有的<form>元素，与document.getElementsByTagName("form")得到的结果相同；
document.images，包含文档中所有的<img>元素，与document.getElementsByTagName("img")得到的结果相同；
document.links，包含文档中所有带href 特性的<a>元素。
5. DOM 一致性检测
1)、document.implementation 属性就是为此提供相应信息和功能的对象，与浏览器对DOM的实现直接对应。
6. 文档写入
1)、write()、writeln()、open()和close()。
10.1.3 Element类型
1)、Element 类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
Element 节点具有以下特征：
nodeType 的值为1；
nodeName 的值为元素的标签名；
nodeValue 的值为null；
parentNode 可能是Document 或Element；
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection 或EntityReference。
2)、访问元素的标签名，可以使用nodeName 属性，也可以使用tagName 属性，返回值相同。
1. HTML 元素
1)、每个HTML元素中都存在的下列标准特性：
id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），也很少使用。
className，与元素的class 特性对应，即为元素指定的CSS类。
2. 取得特性
1)、getAttribute()方法主要用于取得自定义特性。传递给getAttribute()的特性名与实际的特性名相同。栗子：div.getAttribute("data-zidingyi")。
3. 设置特性
1)、setAttribute()方法接受两个参数：要设置的特性名和值。。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()则创建该属性并设置相应的值。
2)、removeAttribute()方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。
4. attributes 属性
1)、Element 类型是使用attributes 属性的唯一一个DOM 节点类型。attributes 属性中包含一个NamedNodeMap，与NodeList 类似，也是一个“动态”的集合。
5. 创建元素
1)、document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。
2)、appendChild()、insertBefore()或replaceChild()方法可以把新元素添加到文档树。
栗子： var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
或者：
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
然后添加:
document.body.appendChild(div);
6. 元素的子节点
1)、childNodes 属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。
10.1.4 Text类型
1)、文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含HTML 代码。
Text 节点具有以下特征：
nodeType 的值为3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
parentNode 是一个Element；
不支持（没有）子节点。
2)、可以通过nodeValue 属性或data 属性访问Text 节点中包含的文本，这两个属性中包含的值相同。对nodeValue 的修改也会通过data 反映出来，反之亦然。
使用下列方法可以操作节点中的文本。
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 为止处的字符串。
1. 创建文本节点
1)、document.createTextNode()用来创建新文本节点，这个方法接受一个参数——要插入节点中的文本。
栗子： var element = document.createElement("div");// 创建一个div元素
element.className = "message";// 给div添加class
var textNode = document.createTextNode("Hello world!");// 创建文本节点
element.appendChild(textNode);// 把文本节点添加到div元素
document.body.appendChild(element);// 最后把div元素添加到body
2. 规范化文本节点
1)、normalize()方法可以合并同胞文本节点。
3. 分割文本节点
1)、：splitText()方法用来分割文本节点。
10.1.5 Comment类型
1)、注释在DOM中是通过Comment 类型来表示的。Comment 节点具有下列特征：
nodeType 的值为8；
nodeName 的值为"#comment"；
nodeValue 的值是注释的内容；
parentNode 可能是Document 或Element；
不支持（没有）子节点。
2)、Comment 类型与Text 类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。与Text 类型相似，也可以通过nodeValue 或data 属性来取得注释的内容。
3)、document.createComment()方法传入递注释文本也可以创建注释节点。
10.1.6 CDATASection类型
1)、CDATASection 类型只针对基于XML 的文档，表示的是CDATA 区域。与Comment 类似，CDATASection 类型继承自Text 类型，因此拥有除splitText()之外的所有字符串操作方法。
CDATASection 节点具有下列特征：
nodeType 的值为4；
nodeName 的值为"#cdata-section"；
nodeValue 的值是CDATA 区域中的内容；
parentNode 可能是Document 或Element；
不支持（没有）子节点。
2)、document.createCDataSection()来创建CDATA 区域，只需为其传入节点的内容即可。
10.1.7 DocumentType类型
1)、DocumentType类型包含着与文档的doctype 有关的所有信息，它具有下列特征：
nodeType 的值为10；
nodeName 的值为doctype 的名称；
nodeValue 的值为null；
parentNode 是Document；
不支持（没有）子节点。
10.1.8 DocumentFragment类型
1)、在所有节点类型中，只有DocumentFragment 在文档中没有对应的标记。DOM 规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。
DocumentFragment 节点具有下列特征：
nodeType 的值为11；
nodeName 的值为"#document-fragment"；
nodeValue 的值为null；
parentNode 的值为null；
子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection 或EntityReference。
2)、document.createDocumentFragment()方法可以创建文档片段。
10.1.9 Attr类型
1)、元素的特性在DOM 中以Attr 类型来表示。
特性节点具有下列特征：
nodeType 的值为2；
nodeName 的值是特性的名称；
nodeValue 的值是特性的值；
parentNode 的值为null；
在HTML 中不支持（没有）子节点；
在XML 中子节点可以是Text 或EntityReference。
10.2 DOM 操作技术
10.2.1 动态脚本
1)、使用<script>元素可以向页面中插入JavaScript 代码，一种方式是通过其src 特性包含外部文件，另一种方式就是用这个元素本身来包含代码。
动态加载script文件到页面:
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
10.2.2 动态样式
1)、能够把CSS 样式包含到HTML 页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。
动态加载CSS样式到页面：
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);
}
10.2.3 操作表格
1)、为了方便构建表格，HTML DOM 还为<table>、<tbody>和<tr>元素添加了一些属性和方法。
为<table>元素添加的属性和方法如下：
caption：保存着对<caption>元素（如果有）的指针。
tBodies：是一个<tbody>元素的HTMLCollection。
tFoot：保存着对<tfoot>元素（如果有）的指针。
tHead：保存着对<thead>元素（如果有）的指针。
rows：是一个表格中所有行的HTMLCollection。
createTHead()：创建<thead>元素，将其放到表格中，返回引用。
createTFoot()：创建<tfoot>元素，将其放到表格中，返回引用。
createCaption()：创建<caption>元素，将其放到表格中，返回引用。
deleteTHead()：删除<thead>元素。
deleteTFoot()：删除<tfoot>元素。
deleteCaption()：删除<caption>元素。
deleteRow(pos)：删除指定位置的行。
insertRow(pos)：向rows 集合中的指定位置插入一行。
为<tbody>元素添加的属性和方法如下：
rows：保存着<tbody>元素中行的HTMLCollection。
deleteRow(pos)：删除指定位置的行。
insertRow(pos)：向rows 集合中的指定位置插入一行，返回对新插入行的引用。
为<tr>元素添加的属性和方法如下：
cells：保存着<tr>元素中单元格的HTMLCollection。
deleteCell(pos)：删除指定位置的单元格。
insertCell(pos)：向cells 集合中的指定位置插入一个单元格，返回对新插入单元格的引用。
10.2.4 使用NodeList
1)、理解NodeList 及其“近亲”NamedNodeMap 和HTMLCollection都是“动态的”；换句话说，每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息。从本质上说，所有NodeList 对象都是在访问DOM文档时实时运行的查询。
十一、 DOM 扩展
1)、对DOM 的两个主要的扩展是Selectors API（选择符API）和HTML5。
11.1 选择符API
11.1.1 querySelector()方法
1)、querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
11.1.2 querySelectorAll()方法
1)、querySelectorAll()方法接收的参数是一个CSS 选择符，返回的是一个NodeList 的实例(类似数组)。
11.1.3 matchesSelector()方法
1)、matchesSelector()方法接收一个参数，即CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
11.2 元素遍历
1)、Element Traversal API 为DOM元素添加了以下5 个属性。
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild 的元素版。
lastElementChild：指向最后一个子元素；lastChild 的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。
11.3 HTML5
11.3.1 与类相关的扩充
1. getElementsByClassName()方法
getElementsByClassName()方法可以通过document对象及所有HTML 元素调用该方法。
栗子： document.getElementsByClassName("className");
div.getElementsByClassName("className");
2. classList 属性
1)、classList 属性是新集合类型DOMTokenList 的实例。包含如下方法：
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
11.3.2 焦点管理
1)、document.activeElement 属性，这个属性始终会引用DOM 中当前获得了焦点的元素。
2)、document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
11.3.3 HTMLDocument的变化
1. readyState 属性
1)、 Document 的readyState 属性有两个可能的值：
loading，正在加载文档；
complete，已经加载完文档。
2. 兼容模式
1)、document.compatMode 的属性获取浏览器采用了哪种渲染模式。
3. head 属性
1)、document.head 属性用来引用文档的<head>元素。
栗子：var head = document.head || document.getElementsByTagName("head")[0];
11.3.4 字符集属性
11.3.5 自定义数据属性
1)、HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-。可以通过元素的dataset 属性来访问自定义属性的值。
11.3.6 插入标记
1. innerHTML 属性
1)、在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML 标记。
在写模式下，innerHTML 会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
2. outerHTML 属性
1)、在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。
在写模式下，outerHTML会根据指定的HTML 字符串创建新的DOM 子树，然后用这个DOM子树完全替换调用元素。
3. insertAdjacentHTML()方法
1)、insertAdjacentHTML()接收两个参数：插入位置和要插入的HTML 文本。第一个参数必须是下列值之一：
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素。
11.3.7 scrollIntoView()方法
1)、scrollIntoView()可以在所有HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true 作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false 作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐。
11.4 专有扩展
11.4.1 文档模式
1)、要强制浏览器以某种模式渲染页面，可以使用HTTP 头部信息X-UA-Compatible，或通过等价的<meta>标签来设置：<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">。
十二、
12.2.3 元素大小
1. 偏移量
1)、通过下列4 个属性可以取得元素的偏移量：
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
2)、计算元素在页面上的偏移量：
//左偏移量
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
//上偏移量
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
return actualTop;
}
2. 客户区大小
1)、客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小。
2)、clientWidth 属性是元素内容区宽度加上左右内边距宽度。
3)、clientHeight 属性是元素内容区高度加上上下内边距高度。
3. 滚动大小
1)、滚动大小（scroll dimension），指的是包含滚动内容的元素的大小。有些元素（例如<html>元素），即使没有执行任何代码也能自动地添加滚动条；但另外一些元素，则需要通过CSS 的overflow 属性进行设置才能滚动。
以下是4 个与滚动大小相关的属性。
scrollHeight：在没有滚动条的情况下，元素内容的总高度。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
4. 确定元素大小
1)、IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 为每个元素都提供了一个getBoundingClientRect()方法。这个方法返回会一个矩形对象，包含4 个属性：left、top、right 和bottom。
由于该方法各浏览器实现不一致，故给出如下兼容各浏览器的方法：
function getBoundingClientRect(element) {
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if (element.getBoundingClientRect) {
if (typeof arguments.callee.offset != "number") {
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
}
}
扫一扫
4402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
