[TOC]
JavaScript高級程序設(shè)計(jì)
第一章 JavaScript簡介
- 文檔對象模型DOM：針對XML但經(jīng)過擴(kuò)展用于HTML的應(yīng)用程序編程接口，把整個頁面映射為一個多節(jié)點(diǎn)結(jié)構(gòu)。
DOM不只是針對JavaScript的，很多別的語言也都實(shí)現(xiàn)了DOM。但在Web瀏覽器中，基于ECMAScript實(shí)現(xiàn)的DOM已經(jīng)成為JavaScript的重要組成部分。 - 瀏覽器對象模型BOM
第二章 在HTML中使用JavaScript
2.1 script元素
1. 使用<!-- <script>元素嵌入JavaScript代碼時，指定type屬性，type="text/javascript"
2. <script></script>如果放在head中，則必須等到全部JavaScript代碼都被下載解析和執(zhí)行完成才開始呈現(xiàn)界面，所以現(xiàn)在很多都放在Body的最后面，從而感覺打開頁面速度加快
3. defer屬性，表明腳本在執(zhí)行時不會影響頁面構(gòu)造，等整個頁面都解析完畢后再運(yùn)行
4. async 適用于外部腳本文件，告訴瀏覽器立即下載，但不保證按指定的先后順序執(zhí)行
5. < 來代替小于號(<)
###2.2 嵌入代碼與外部文件
1. 引入JavaScript有兩種方式：
- 讓腳本與標(biāo)記混合在一起
- 包含外部的JavaScript文件 將src屬性設(shè)置為指向相應(yīng)文件的URL
##第三章 基本概念
###3.4 數(shù)據(jù)類型 Undefined Null Boolean Number String Object
1. 可以用typeof操作符來檢測給定變量的數(shù)據(jù)類型
alert(typeof(message));
2. 非數(shù)值轉(zhuǎn)換為數(shù)值：
Number() 【可以用于任何數(shù)據(jù)類型】
parseInt() 、parseFloat() 【專用于把字符串轉(zhuǎn)換成數(shù)值】
###3.5 操作符
1. 一元操作符（只能操作一個值的操作符）如++ -- + -
在對非數(shù)值應(yīng)用一元加操作時，該操作符會像Number()轉(zhuǎn)型函數(shù)一樣對這個值執(zhí)行轉(zhuǎn)換，即為：布爾值false 和 true 會被轉(zhuǎn)換為0和1，字符串會被解析；
對象則是先調(diào)用valueOf()或 toString()方法
2. 位操作符
NOT(按位非)
AND(按位與)
XOR(按位異或)
左移(<<)[右填0，相當(dāng)于乘2]
有符號右移(>>)[保持符號位，相當(dāng)于除2]
無符號右移(>>>)[正數(shù)相同，負(fù)數(shù)非常大]
3. 布爾操作符 NOT AND OR
4. 乘性操作符 * / %
5. 加性操作符 + -
6. 關(guān)系操作符 < > <= >=
7. 相等操作符 == != ===(全等，兩操作數(shù)未經(jīng)轉(zhuǎn)換就相等的情況下返回true)
8. 條件操作符 variable = boolean_expression ? true_value : false_value
9. 賦值操作符 = *= /= %= += -= <<= >>= >>>=
10. 逗號操作符 ,
###3.7 函數(shù)
1. 函數(shù)內(nèi)可以通過arguments來訪問這個參數(shù)數(shù)組，從而獲取傳遞給函數(shù)的每一個參數(shù)
2. Array.prototype.slice.call先將其轉(zhuǎn)為數(shù)組。
3. 函數(shù)定義不存在重載，如果一個名字定義了兩次，則是后面一個
##第四章 變量、作用域和內(nèi)存問題
###4.1 基本類型和引用類型的值
1. 基本類型值： 簡單的數(shù)據(jù)段 Undefined Null Boolean Number String 【固定大小，保存在棧內(nèi)存中】
引用類型值： 多個值構(gòu)成的對象 【保存在堆內(nèi)存中】==>實(shí)際上不是對象本身，而是一個指向?qū)ο蟮闹羔?2. 確定一個值是哪種引用類型，使用instanceof
###4.2 執(zhí)行環(huán)境及作用域
1. 延長作用域鏈
全局環(huán)境 局部環(huán)境
1. try-catch語句
2. with語句
將指定的對象添加到作用域鏈中
2. 沒有塊級作用域
聲明變量會自動添加到最接近的環(huán)境中。
先在局部變量中找，層級向外找該標(biāo)識符，即為若局部環(huán)境中存在同名標(biāo)識符，就不會使用位于父環(huán)境中的標(biāo)識符。
###4.3 垃圾收集
1. 自動垃圾收集機(jī)制，無需開發(fā)人員關(guān)心內(nèi)存分配和回收機(jī)制
2. 兩種自動垃圾收集算法：標(biāo)記清除、引用計(jì)數(shù)
1. 標(biāo)記清除
2. 引用計(jì)數(shù)
##第五章 引用類型
###5.1 Object類型
1. 建議使用.來訪問屬性，除非屬性名中含有" "空格
###5.2 Array類型
1. 檢測數(shù)組
1. instanceof
arr instanceof Array
假定單一的全局執(zhí)行環(huán)境 若網(wǎng)頁包含多個框架，世界存在兩個不同的全局執(zhí)行環(huán)境...
2. Array.isArray(arr)
2. 轉(zhuǎn)換方法
toLocaleString() 返回?cái)?shù)組中每個值的字符串拼接而成由逗號隔開的字符串
toString() 返回?cái)?shù)組中每個值的字符串拼接而成由逗號隔開的字符串
alert(arr)默認(rèn)調(diào)用toString()方法
valueOf() 返回?cái)?shù)組中每個值的字符串拼接而成由逗號隔開的字符串
join("|") 可以使用不同的分隔符來構(gòu)建這個字符串
3. 棧方法
push() pop()
4. 隊(duì)列方法
shift() 獲得數(shù)組中的第一項(xiàng)
unshift() 在數(shù)組前端添加任意幾項(xiàng)
5. 重排序方法
reverse() 對數(shù)組的順序進(jìn)行反轉(zhuǎn)，也是排好序的
sort() 默認(rèn)小值放前面
```
function compare(value1,value2) {
if(value1<value2) {
return -1;
}else {
return 1;
}
}
values.sort(compare)
```
或者直接values.sort(value2-value1);
6. 操作方法
concat() 復(fù)制原數(shù)組，并添加新的參數(shù)，返回新數(shù)組
參數(shù):一或多個數(shù)組
var arr = ["a","b"];
var arr2 = arr.concat("c",["d,"e]);
//arr2 :["a","b","c"÷,"d","e"];
slice() 基于當(dāng)前數(shù)組，返回?cái)?shù)組
一個參數(shù):返回從該參數(shù)指定位置到數(shù)組末尾的所有項(xiàng)
兩個參數(shù):返回起始和末尾位置之間的一項(xiàng)，但不包括末位位置項(xiàng)，若參數(shù)為負(fù)數(shù)，則為數(shù)組長度加上該負(fù)數(shù)的位置
arr.slice() //[0,end]
arr.slice(begin) //[begin, end]
arr.slice(begin,end) //[begin,end)
splice()
刪除:兩個參數(shù)，要刪除的第一項(xiàng)的位置、刪除項(xiàng)數(shù)
插入:三個參數(shù)，起始位置、0(刪除項(xiàng)數(shù))、要插入的項(xiàng)(可插入多個，為第四、五個參數(shù))
替換:三個參數(shù)，起始位置、刪除項(xiàng)數(shù)、要插入的任意項(xiàng)數(shù)， 會先刪除，再插入
7. 位置方法
indexOf() 兩個參數(shù)：要查找的項(xiàng)，查找起點(diǎn)的索引(可選) 從數(shù)組開頭向后查
lastIndexOf() 兩個參數(shù)：要查找的項(xiàng)，查找起點(diǎn)的索引(可選) 從數(shù)組最后向前查
8. 迭代方法
兩個參數(shù):每一項(xiàng)上運(yùn)行的函數(shù)、運(yùn)行該函數(shù)的作用域?qū)ο?可選，默認(rèn)this)
函數(shù)有三個參數(shù)(數(shù)組項(xiàng)的值、該項(xiàng)所在數(shù)組中的位置、數(shù)組對象本身)
都不會修改原數(shù)組的值
every() 每一項(xiàng)運(yùn)行給定函數(shù)，若該函數(shù)對每一項(xiàng)都返回true，則返回true
filter() 每一項(xiàng)都運(yùn)行給定函數(shù)，返回該函數(shù)會返回true的項(xiàng)組成的數(shù)組
forEach() 每一項(xiàng)都運(yùn)行給定函數(shù)，無返回?cái)?shù)據(jù)
map() 每一項(xiàng)都運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
some() 每一項(xiàng)都運(yùn)行給定函數(shù)，若函數(shù)對任一項(xiàng)返回true則返回true
9. 縮小方法
兩個參數(shù):每一項(xiàng)上調(diào)用的函數(shù)、作為縮小基礎(chǔ)的初始值(可選)
函數(shù)有四個參數(shù):前一個值、當(dāng)前值、項(xiàng)的索引、數(shù)組對象
reduce() 從前向后遍歷 每次遍歷完的結(jié)果返回給前一個值參數(shù)
reduceRight() 從后向前遍歷
###5.3 Date類型
1. 1970年1月1日零時開始的毫秒數(shù)
2. Date.parse() 接收一個表示日期的字符串參數(shù)，返回相應(yīng)日期的毫秒數(shù)
四種日期格式: 6/13/2017
January 11.2018
Tue May 15 2018 00:00:23 GMT-0700
YYYY-MM-DDTHH:mm:ss.sssZ
若不是日期，則返回NAN
3. Date.UTC() ...
4. 日期格式化方法
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
toUTCString()
###5.4 RegExp類型 支持正則表達(dá)式
1. var expression = / pattern / flags
flags: g 表示全局模式； i 表示不區(qū)分大小寫模式； m 表示多行模式；
例： var pattern1 = /[bc]at/i;
var pattern2 = new RegExp("[bc]/at","i"); 兩句完全等價(jià)
2. RegExp實(shí)例屬性： global ignoreCase multiline lastIndex source
3. RegExp實(shí)例方法： exec() test()
4. RegExp構(gòu)造函數(shù)屬性
###5.5 Function類型
1. 沒有重載：聲明兩個同名函數(shù)，后面的函數(shù)覆蓋前面的函數(shù)
2. 函數(shù)聲明: function sum(num1,num2){return num1+num2}
函數(shù)表達(dá)式: var sum = function(num1,num2){return num1+num2};
3. 函數(shù)可以作為參數(shù)傳入函數(shù)中
4. 函數(shù)內(nèi)部屬性 arguments 保存函數(shù)參數(shù)
callee 指針，指向擁有這個arguments對象的函數(shù)
this 引用函數(shù)據(jù)以執(zhí)行的環(huán)境對象，全局中為window
caller 保存調(diào)用當(dāng)前函數(shù)的引用，若為全局作用域中調(diào)用當(dāng)前函數(shù)，值為null
5. 函數(shù)的屬性和方法
length 函數(shù)希望接收的命名參數(shù)的個數(shù)
prototype 保存引用類型所有實(shí)例方法，不可枚舉的
apply() 兩個參數(shù)，一個是其中運(yùn)行函數(shù)的作用域，一個是參數(shù)數(shù)組。
call() 與apply()
功能相同，第一個參數(shù)也是this，后面的參數(shù)，直接傳給函數(shù)
bind() 創(chuàng)建一個函數(shù)實(shí)例，其this值會被綁定給bind的參數(shù)
toLocalString()
toString()
valueOf() 這幾個返回函數(shù)代碼
###5.6 基本包裝類型 (Boolean Number String)
1. Boolean
2. Number
3. String類型
1. 字符方法
charAt(2) 返回給定位置字符
charCodeAt(1) 返回給定位置字符編碼
2. 字符串操作方法
concat() 將一個或多個字符串拼接
slice() 創(chuàng)建新字符串 兩個參數(shù)：字符串開始位置、結(jié)束后一個位置
substr() 創(chuàng)建新字符串 兩個參數(shù)：字符串開始位置、結(jié)束后一個位置
substring() 創(chuàng)建新字符串 兩個參數(shù)：字符串開始位置、字符串長度
3. 字符串位置方法
indexOf()
lastIndexOf()
4. trim()方法 創(chuàng)建字符串副本，從一個字符串的兩端刪除空白字符
5. 字符串大小寫轉(zhuǎn)換方法
toLowerCase() toLocaleLowerCase()
toUpperCase() toLocaleUpperCase()
6. 字符串的模式匹配方法
match() [只接受一個參數(shù)，要么是正則表達(dá)式，要么是RegExp對象]
返回?cái)?shù)組
search() [返回出現(xiàn)的索引]
replace() 兩個參數(shù)：RegExp、字符串/函數(shù)
7. localeCompare()方法 比較字符串
8. fromCharCode()方法
9. HTML方法
###5.7 單體內(nèi)置對象 （開發(fā)人員不必顯式地實(shí)例化內(nèi)置對象，因?yàn)橐呀?jīng)實(shí)例化了）
1. Global對象
1. URI編碼方法
encodeURI() encodeURIComponent() decodeURI() decodeURIComponent()
2. eval()方法 完整的ECMAScript解析器，只接受一個參數(shù)，為JavaScript字符串代碼
3. Global對象的屬性
4. window對象
2. Math對象
1. Math對象的屬性
2. min()和max()方法
3. 舍入方法
4. random()方法
5. 其他方法
##第六章 面向?qū)ο蟮某绦蛟O(shè)計(jì)
###6.1 理解對象
1. 屬性類型（數(shù)據(jù)屬性、訪問器屬性）
1. 數(shù)據(jù)屬性
包含一個數(shù)據(jù)值的位置，這個位置可以讀取和寫入
[Configurable: true][Enumerable: true][Writable: true][Value: undefined] 默認(rèn)值必須使用Object.defineProperty()方法才能修改
2. 訪問器屬性
不包含數(shù)據(jù)值，包含一對getter和setter函數(shù)
[Configurable: true][Enumerable: true][Get: undefined][Set: undefined] 默認(rèn)值必須使用Object.defineProperty()方法定義
2. 定義多個屬性
Object.defineProperties() 方法 可以一次定義多個屬性
Object.defineProperty(obj, prop, descriptor)
obj 需要定義屬性的對象。
prop 需被定義或修改的屬性名。
descriptor 需被定義或修改的屬性的描述符。
var o = {}; // 創(chuàng)建一個新對象
// 在對象中添加一個屬性與數(shù)據(jù)描述符的示例
Object.defineProperty(o, "a", {
value : 37,
writable : true,
enumerable : true,
configurable : true
});
3. 讀取屬性的特性
Object.getOwnPropertyDescriptor()
兩個參數(shù)：屬性所在的對象、要讀取器描述屬性名稱
###6.2 創(chuàng)建對象
1. 工廠模式
function cratePerson(name,age,job) {
var o = new Object;
o.name = name;
...
return o;
}
var person1 = createPerson("zhang",12,"doctor")
var person2 = createPerson("li",14,"nurse")
未解決怎樣知道一個對象的類型
2. 構(gòu)造函數(shù)模式
function Person(name, age, job) {
this.name = name;
...
}
var person1 = new Person("li",14,"doctor")
new操作符以下4個步驟：
1. 創(chuàng)建一個新對象
2. 將構(gòu)造函數(shù)的作用域賦給新對象(因此this指向了這個新對象)
3. 執(zhí)行構(gòu)造函數(shù)中的代碼
4. 返回新對象
若不使用new，則直接添加到window上
缺點(diǎn)：每個方法都要在每個實(shí)例上重新創(chuàng)建一遍
修正：將函數(shù)寫在外面：
然后內(nèi)部用:this.sayName = sayName
function sayName() {
alert(this.name);
}
3. 原型模式
function Person(){
}
Person.prototype.name ="li";
...
Person.prototype.sayName = function() {
alert(this.name)
}
var person1 = new Person();
1. 使用prototype屬性對其屬性進(jìn)行賦值和定義，構(gòu)造函數(shù)變?yōu)榭? 2. 新函數(shù)都會有自身的prototype屬性，屬性指向函數(shù)的原型對象
3. Array.prototype 可以訪問器所有的默認(rèn)方法引用（同樣適用于Object String）
4. 組合使用構(gòu)造函數(shù)模式和原型模式
5. 動態(tài)原型模式 構(gòu)造函數(shù)中使用if語句，判定存在與否，是否定義某函數(shù)屬性
6. 寄生構(gòu)造函數(shù)模式
7. 穩(wěn)妥構(gòu)造函數(shù)模式 安全環(huán)境，不使用this、new
###6.3 繼承 【只支持實(shí)現(xiàn)繼承，不支持接口繼承】
每一個構(gòu)造函數(shù)都有一個原型對象，原型對象都包含一個指向構(gòu)造函數(shù)的指針，而實(shí)例都包含一個指向原型對象的內(nèi)部指針
1. 原型鏈
1. 所有引用類型默認(rèn)都繼承了Object
2. 繼承：SubType.prototype = new SuperType()
通過創(chuàng)建SupeType的實(shí)例并將實(shí)例賦值給SubType.prototype實(shí)現(xiàn)的
new操作符以下4個步驟：
1. 創(chuàng)建一個新對象
2. 將構(gòu)造函數(shù)的作用域賦給新對象(因此this指向了這個新對象)
3. 執(zhí)行構(gòu)造函數(shù)中的代碼
4. 返回新對象
3. 默認(rèn)的原型
為Object，所有的Prototype都是繼承了Object
4. 缺點(diǎn)：
1. 包含引用類型值的原型
如：superType包含的屬性，subType的所有實(shí)例都包含相同的內(nèi)容
2. 在創(chuàng)建子類型的實(shí)例中，不能像構(gòu)造函數(shù)中傳遞參數(shù)
2. 借用構(gòu)造函數(shù)
子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)
function SuperType(name) {
this.name = name;
}
function SubType() {
SuperType.call(this,"li") //繼承了SuperType，同時傳遞了參數(shù)
this.age = 29;
}
缺點(diǎn)：
方法都是在構(gòu)造函數(shù)中調(diào)用，函數(shù)無任何復(fù)用
3. 組合繼承
使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承，而通過構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承
function SuperType(name) {
this.name = name;
this.colors=["red"...];
}
SuperType.prototype.sayName = function() {
alert(this.name)
}
function SubType(name,age) {
//繼承屬性
SuperType.call(this,name)//原型屬性
this.age = age//自身屬性
}
//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
alert(this.age);
}
原型鏈和借用構(gòu)造函數(shù)組合一起
缺點(diǎn)：調(diào)用兩次超類型構(gòu)造函數(shù)：SuperType
4. 原型式繼承
Object.create(person)方法，有一個對象作為另一個對象的基礎(chǔ)
兩個參數(shù)：第一個為原對象
第二個為：自身屬性
5. 寄生式繼承
創(chuàng)建一個勁用于封裝繼承過程的函數(shù)，然后用某種方式來增強(qiáng)對象
缺點(diǎn)：不能函數(shù)復(fù)用
6. 寄生組合式繼承
將那兩個函數(shù)封裝為一個
##第七章 函數(shù)表達(dá)式
###7.1 遞歸
###7.2 閉包 【有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)】
1. 閉包與變量 [javascript_problem_1]
2. 關(guān)于this對象
3. 內(nèi)存泄露
###7.3 模仿塊級作用域
###7.4 私有變量
1. 靜態(tài)私有變量
2. 模塊模式
3. 增強(qiáng)的模塊模式
##第八章 BOM
###8.1 window對象
全局作用域
窗口位置：
IE Safari Opera Chrome：screenLeft screenTop
Firefox：screenX screenY
moveTo(x,y) 將窗口移動到一個新位置,新位置的x，y坐標(biāo) —|
moveBy(x,y) 水平和垂直方向上移動的像素?cái)?shù) _| 可能被瀏覽器禁用
窗口大?。? innerWidth innerHeight 頁面視圖區(qū)大小（減去邊框?qū)挾龋? outerWidth outerHeight 瀏覽器窗口本身尺寸
document.documentElement.clientWidth/clientHeight 保存頁面視口信息
調(diào)整瀏覽器窗口大?。J(rèn)禁用）：resizeTo() resizeBy()
導(dǎo)航和打開窗口：
window.open() 打開一個新瀏覽器窗口
4個參數(shù)：要加載的url、窗口目標(biāo)、一個特性字符串、一個表示頁面是否取代瀏覽歷史記錄中當(dāng)前加載頁面的布爾值
1. 彈出窗口 window.open("http://www.baidu.com","baidu","height=400,width=300,top=10");
2. 安全限制
3. 彈出窗口屏蔽程序 badu == null 或者使用try{}catch(){}
間歇調(diào)用和超時調(diào)用：
1. setTimeout(要執(zhí)行代碼，以毫秒表示的時間) 返回一個調(diào)用ID，可使用claerTimeout(id)來取消
JavaScript為單線程語言，過了setTimeout時間后，將對應(yīng)要執(zhí)行代碼添加到任務(wù)隊(duì)列中。若隊(duì)列為空，則執(zhí)行該代碼。
2. setTnterval(執(zhí)行代碼，時間) 也返回一個調(diào)用id 可使用clearInterval(id)來取消
系統(tǒng)對話框
alert()
confirm()
prompt()
###8.2 location對象
既是window對象的屬性，又是document對象的屬性：window.location=document.location
hash host hostname href pathname port protocol search
查詢字符串參數(shù)：location.search()
位置操作：
location.assign("http://www.baidu.com");
location.;
location.hash/search/hostname/port
location.replace("http://www.baidu.com"); 不會再歷史記錄中生成新記錄
reload() 重新加載當(dāng)前顯示的頁面?？赡軓木彺嬷屑虞d，如果添加true參數(shù)，就是從服務(wù)器重新加載
###8.3 Navigator對象
通常用于檢測瀏覽器類型
userAgent
檢測插件：
plugins 數(shù)組每一項(xiàng)都包含：name description filename length
每個插件對象本身是一個MimeType對象數(shù)組
IE中檢測插件：ActiveXObject(name)檢測，name為COM對象的唯一標(biāo)識符
集合有refresh()方法，若傳入tre參數(shù)，則重新加載整個頁面，否則只會更新plugins集合
注冊處理程序
MIME類型：application/rss+xml、applcation/atom+xml、application/vnd.mozilla.maybe. feed
RSS ATOM feed
###8.4 screen對象
外部顯示器信息
###8.5 history對象
go()在用戶歷史記錄中任意跳轉(zhuǎn)
back()后退
forward()前進(jìn)
length屬性 保存的歷史記錄的數(shù)量
##第九章 客戶端檢測
###9.1 能力檢測
不是識別特定的瀏覽器，而是識別瀏覽器的能力
檢測是否有sort方法，要使用typeof sort == "function" 來判斷是否函數(shù)
###9.2 怪癖檢測
識別瀏覽器的特殊行為
###9.3 用戶代理檢測
通過檢測用戶代理字符串來確定實(shí)際使用的瀏覽器 Navigator.userAgent
電子欺騙：瀏覽器通過在自己的用戶代理字符串中添加一些錯誤信息，達(dá)到欺騙服務(wù)器的目的
1. 識別呈現(xiàn)引擎：IE Gecko WebKit KHTML Opera
2. 識別瀏覽器
3. 識別平臺：Windows Mac Unix
4. 識別Windows操作系統(tǒng)
5. 識別游戲設(shè)備
6. 識別游戲系統(tǒng)
##第十章 DOM
IE中所有的DOM對象都是以COM對象的形式實(shí)現(xiàn)的，因此與原生JavaScript對象的行為或活動特點(diǎn)不一致。
###10.1 節(jié)點(diǎn)層次
1. Node 類型
nodeType屬性：
1：ELEMENT_NODE
2: ATTRIBUTE_NODE ...
nodeName【元素標(biāo)簽名】 、nodeValue 【null】屬性
chlidNotes屬性 和 NodeList對象
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);//將NodeList轉(zhuǎn)換為數(shù)組
parentNode屬性
firstChild lastChild
appendChild()
向childNodes列表末尾添加一個節(jié)點(diǎn)，并返回新增節(jié)點(diǎn)，若本來就有該節(jié)點(diǎn)，則從原來位置移動到新的位置
insertBefore(要插入節(jié)點(diǎn)，作為參照節(jié)點(diǎn))
放在某個特定的位置上
replaceChild()
替換
removeChild()
移除節(jié)點(diǎn)
cloneNode()
接收一個布爾值參數(shù)，表示是否執(zhí)行深復(fù)制
2. Document 類型
HTMLDocument實(shí)例的document對象，document.childNotes 為<!DOCTYPE html> 和<html>
document
document.titile 只讀
請求相關(guān)屬性 HTTP頭部
URL 頁面完整URL 只讀
domain 頁面域名 可更改，為URL包含的一個子域名，但不同子域頁面無法通過JavaScript通信
referrer 鏈接到當(dāng)前頁面的URL 只讀，可為空
查找元素
若傳入?yún)?shù)為："*"則為獲取所有，且一般不區(qū)分大小寫
getElementById()
getElementByTagName()
namedITEM() 只返回第一個 如：
var myImage = images.namedItem("MyImage");
getElementsByName() 只有HTMLDocument類型才有的方法 返回為集合
特殊集合
document.anchors 文檔中所有帶name特性的<a>元素
cocument.forms 文檔中所有的<form>元素
document.images 文檔中所有的<img>元素
document.links 文檔中所有帶href特性的<a>元素
document.implementation
檢測瀏覽器實(shí)現(xiàn)了DOM的那些部分功能
hasFeature(要檢測DOM功能的名稱，要檢測DOM功能的版本號)
文檔寫入功能
write() 接收一個字符串，原樣寫入
writeln() 接收一個字符串，末尾添加一個換行符(\n)
"</script> -->" 不能直接寫入，要寫為"<\/script>"，否則會被當(dāng)做腳本塊的結(jié)束
open() 打開網(wǎng)頁輸出流
close() 滾逼網(wǎng)頁輸出流
3. Element 類型
nodeType 為1 nodeName值為元素的標(biāo)簽名 nodeValue值為null parentNode值可能為Document或Element
1. HTML元素
所有的HTML元素都由HTMLElemnt類型表示
id 唯一標(biāo)識符，對用戶透明
title 元素附加說明信息
lang 語言代碼，很少使用，用戶透明
dir 語言方向，很少使用
className class特性對應(yīng)
2. 取得特性
getAttribute("class")
"id"/"title"/"lang"/"dir"/自定義特性(最好加上data-前綴)
兩類不能取得特性：style[CSS文本]、onclick[因?yàn)閮?nèi)容為JavaScript代碼]
3. 設(shè)置特性
setAttribute("id","someOtherId")
removeAttribute()
4. attributes屬性 【遍歷元素特征】
atrributes屬性中包含一系列節(jié)點(diǎn)，每個節(jié)點(diǎn)的nodeName是特性的名稱，nodeValue是特性的值
getNamedItem(name) 返回nodeName屬性等于name的節(jié)點(diǎn)
removeNamedItem(name) 從列表中移除nodeName屬性等于name的節(jié)點(diǎn)
setNamedItem(node) 向列表中添加節(jié)點(diǎn)
item(pos) 返回位于數(shù)字pos位置處的節(jié)點(diǎn)
5. 創(chuàng)建元素
document.createElement("div");
4. Text類型
nodeType 為3 nodeName為”#text“ nodeValue 的值為節(jié)點(diǎn)所包含的文本 parentNode為Element 不支持子節(jié)點(diǎn) 可通過nodeValue的data屬性訪問Text節(jié)點(diǎn)中包含的文本
appendData(text) 將text添加到節(jié)點(diǎn)的末尾
deleteData(offset,count) 從offset指定的位置刪除count個字符
insertData(offset,text) 從offset指定位置插入text
replaceData(offset,count,text) text替換從offset到offset+cout為止處的文本
splitText(offset) 從offset位置將當(dāng)前文本節(jié)點(diǎn)分為兩個文本節(jié)點(diǎn)
substringData(offset,count) 提取從offset到offset+count位置處的字符串
length屬性：nodeValue.length、data.length
1. 創(chuàng)建文本屬性 document.createTextNode()
2. 規(guī)范化文本節(jié)點(diǎn) normalize()將包含多個文本節(jié)點(diǎn)的父元素的文本整合為單個文本
3. 分割文本節(jié)點(diǎn) splitText() 將一個文本節(jié)點(diǎn)分為兩個，分割位置為參數(shù)
5. Comment類型
nodeType 為8 nodeName為"#comment" ...
6. CDATASection類型
只針對于XML的文檔，表示的是CDATA區(qū)域 繼承自Text類型 nodeType為4 ...
7. DocumentType類型
不常用 nodeType 為0 nodeName為doctype的名稱 HTML5 為 html
8. DocumentFragment類型
輕量級的文檔，可以包含和控制節(jié)點(diǎn)，但在文檔中沒有對應(yīng)的標(biāo)記，可作為”倉庫“使用，保存將來可能會添加到文檔中的節(jié)點(diǎn)
9. Attr類型
不是DOM文檔樹的一部分 一般不需要直接訪問特性節(jié)點(diǎn)
10.2 DOM操作技術(shù)
1. 動態(tài)腳本
動態(tài)創(chuàng)建<script>標(biāo)簽引入代碼
2. 動態(tài)樣式
加載完成后動態(tài)添加到頁面中,使用DOM創(chuàng)建<link>元素，<style>
加載外部樣式文件的過程是異步的，加載樣式和執(zhí)行JavaScript代碼的過程沒有固定的次序
3. 操作表格
Dom為<table><tbody><tr>等元素添加了一些屬性和方法
...tbody.rows[0].cells[0]
4. 使用NodeList
每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時，會更新
一般盡量減少訪問NodeList的次數(shù)，或者將其值緩存起來
