高三笔记系列(十--十二章)
写在前面：暂时只是粗略的排版，之后还会整理。也可到 http://bulabula.top/高三笔记/笔记10-12.txt 下载TXT版javascript
10、 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文档时实时运行的查询。
11、 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、
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
}
}
}
css
- 1. MongoDB实战第二版笔记（14）第十三章笔记（系列终）
- 2. 随笔小记（二十三）
- 3. 高三笔记系列(七--九章)
- 4. 第二十二章：动画（十三）
- 5. PMBOK(第六版) PMP笔记——《十三》第十三章（项目干系人管理） PMBOK(第六版) PMP笔记——《十三》第十三章（项目干系人管理）
- 6. 【笔记】Linux就该这么学-第十三课第十一、十二（上）章
- 7. 【笔记】Linux就该这么学-第十四课第十二（下）、十三章
- 8. 笔记十二
- 9. PMBOK(第六版) PMP笔记——《十三》第十三章 项目干系人管理
- 10. Linux学习笔记(第十二章)
- 更多相关文章...
- • ASP.NET Razor - 标记 - ASP.NET 教程
- • XML DOM 高级 - XML 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • RxJava操作符（十）自定义操作符
-
每一个你不满意的现在，都有一个你没有努力的曾经。