[TOC]
JavaScript高級程序設計
第一章 JavaScript簡介
- 文檔對象模型DOM：針對XML但經(jīng)過擴展用于HTML的應用程序編程接口辟汰，把整個頁面映射為一個多節(jié)點結構列敲。
DOM不只是針對JavaScript的，很多別的語言也都實現(xiàn)了DOM帖汞。但在Web瀏覽器中戴而，基于ECMAScript實現(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í)行時不會影響頁面構造郎任，等整個頁面都解析完畢后再運行
4. async 適用于外部腳本文件秧耗，告訴瀏覽器立即下載，但不保證按指定的先后順序執(zhí)行
5. < 來代替小于號(<)
###2.2 嵌入代碼與外部文件
1. 引入JavaScript有兩種方式：
- 讓腳本與標記混合在一起
- 包含外部的JavaScript文件 將src屬性設置為指向相應文件的URL
##第三章 基本概念
###3.4 數(shù)據(jù)類型 Undefined Null Boolean Number String Object
1. 可以用typeof操作符來檢測給定變量的數(shù)據(jù)類型
alert(typeof(message));
2. 非數(shù)值轉換為數(shù)值：
Number() 【可以用于任何數(shù)據(jù)類型】
parseInt() 舶治、parseFloat() 【專用于把字符串轉換成數(shù)值】
###3.5 操作符
1. 一元操作符（只能操作一個值的操作符）如++ -- + -
在對非數(shù)值應用一元加操作時绣版，該操作符會像Number()轉型函數(shù)一樣對這個值執(zhí)行轉換，即為：布爾值false 和 true 會被轉換為0和1歼疮，字符串會被解析；
對象則是先調用valueOf()或 toString()方法
2. 位操作符
NOT(按位非)
AND(按位與)
XOR(按位異或)
左移(<<)[右填0诈唬，相當于乘2]
有符號右移(>>)[保持符號位韩脏，相當于除2]
無符號右移(>>>)[正數(shù)相同，負數(shù)非常大]
3. 布爾操作符 NOT AND OR
4. 乘性操作符 * / %
5. 加性操作符 + -
6. 關系操作符 < > <= >=
7. 相等操作符 == != ===(全等铸磅，兩操作數(shù)未經(jīng)轉換就相等的情況下返回true)
8. 條件操作符 variable = boolean_expression ? true_value : false_value
9. 賦值操作符 = *= /= %= += -= <<= >>= >>>=
10. 逗號操作符 ,
###3.7 函數(shù)
1. 函數(shù)內可以通過arguments來訪問這個參數(shù)數(shù)組赡矢，從而獲取傳遞給函數(shù)的每一個參數(shù)
2. Array.prototype.slice.call先將其轉為數(shù)組杭朱。
3. 函數(shù)定義不存在重載，如果一個名字定義了兩次吹散，則是后面一個
##第四章 變量弧械、作用域和內存問題
###4.1 基本類型和引用類型的值
1. 基本類型值： 簡單的數(shù)據(jù)段 Undefined Null Boolean Number String 【固定大小，保存在棧內存中】
引用類型值： 多個值構成的對象 【保存在堆內存中】==>實際上不是對象本身空民，而是一個指向對象的指針
2. 確定一個值是哪種引用類型刃唐，使用instanceof
###4.2 執(zhí)行環(huán)境及作用域
1. 延長作用域鏈
全局環(huán)境 局部環(huán)境
1. try-catch語句
2. with語句
將指定的對象添加到作用域鏈中
2. 沒有塊級作用域
聲明變量會自動添加到最接近的環(huán)境中。
先在局部變量中找界轩，層級向外找該標識符画饥，即為若局部環(huán)境中存在同名標識符，就不會使用位于父環(huán)境中的標識符浊猾。
###4.3 垃圾收集
1. 自動垃圾收集機制抖甘，無需開發(fā)人員關心內存分配和回收機制
2. 兩種自動垃圾收集算法：標記清除、引用計數(shù)
1. 標記清除
2. 引用計數(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. 轉換方法
toLocaleString() 返回數(shù)組中每個值的字符串拼接而成由逗號隔開的字符串
toString() 返回數(shù)組中每個值的字符串拼接而成由逗號隔開的字符串
alert(arr)默認調用toString()方法
valueOf() 返回數(shù)組中每個值的字符串拼接而成由逗號隔開的字符串
join("|") 可以使用不同的分隔符來構建這個字符串
3. 棧方法
push() pop()
4. 隊列方法
shift() 獲得數(shù)組中的第一項
unshift() 在數(shù)組前端添加任意幾項
5. 重排序方法
reverse() 對數(shù)組的順序進行反轉，也是排好序的
sort() 默認小值放前面
```
function compare(value1,value2) {
if(value1<value2) {
return -1;
}else {
return 1;
}
}
values.sort(compare)
```
或者直接values.sort(value2-value1);
6. 操作方法
concat() 復制原數(shù)組偷办，并添加新的參數(shù)艰额，返回新數(shù)組
參數(shù):一或多個數(shù)組
var arr = ["a","b"];
var arr2 = arr.concat("c",["d,"e]);
//arr2 :["a","b","c"÷,"d","e"];
slice() 基于當前數(shù)組，返回數(shù)組
一個參數(shù):返回從該參數(shù)指定位置到數(shù)組末尾的所有項
兩個參數(shù):返回起始和末尾位置之間的一項爽篷，但不包括末位位置項悴晰，若參數(shù)為負數(shù)，則為數(shù)組長度加上該負數(shù)的位置
arr.slice() //[0,end]
arr.slice(begin) //[begin, end]
arr.slice(begin,end) //[begin,end)
splice()
刪除:兩個參數(shù)逐工，要刪除的第一項的位置铡溪、刪除項數(shù)
插入:三個參數(shù)，起始位置泪喊、0(刪除項數(shù))棕硫、要插入的項(可插入多個，為第四袒啼、五個參數(shù))
替換:三個參數(shù)哈扮，起始位置、刪除項數(shù)蚓再、要插入的任意項數(shù)滑肉， 會先刪除，再插入
7. 位置方法
indexOf() 兩個參數(shù)：要查找的項摘仅，查找起點的索引(可選) 從數(shù)組開頭向后查
lastIndexOf() 兩個參數(shù)：要查找的項靶庙，查找起點的索引(可選) 從數(shù)組最后向前查
8. 迭代方法
兩個參數(shù):每一項上運行的函數(shù)、運行該函數(shù)的作用域對象(可選娃属，默認this)
函數(shù)有三個參數(shù)(數(shù)組項的值六荒、該項所在數(shù)組中的位置护姆、數(shù)組對象本身)
都不會修改原數(shù)組的值
every() 每一項運行給定函數(shù)，若該函數(shù)對每一項都返回true掏击，則返回true
filter() 每一項都運行給定函數(shù)卵皂，返回該函數(shù)會返回true的項組成的數(shù)組
forEach() 每一項都運行給定函數(shù)，無返回數(shù)據(jù)
map() 每一項都運行給定函數(shù)砚亭，返回每次函數(shù)調用的結果組成的數(shù)組
some() 每一項都運行給定函數(shù)灯变，若函數(shù)對任一項返回true則返回true
9. 縮小方法
兩個參數(shù):每一項上調用的函數(shù)、作為縮小基礎的初始值(可選)
函數(shù)有四個參數(shù):前一個值钠惩、當前值柒凉、項的索引、數(shù)組對象
reduce() 從前向后遍歷 每次遍歷完的結果返回給前一個值參數(shù)
reduceRight() 從后向前遍歷
###5.3 Date類型
1. 1970年1月1日零時開始的毫秒數(shù)
2. Date.parse() 接收一個表示日期的字符串參數(shù)篓跛，返回相應日期的毫秒數(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類型 支持正則表達式
1. var expression = / pattern / flags
flags: g 表示全局模式； i 表示不區(qū)分大小寫模式愧沟； m 表示多行模式蔬咬；
例： var pattern1 = /[bc]at/i;
var pattern2 = new RegExp("[bc]/at","i"); 兩句完全等價
2. RegExp實例屬性： global ignoreCase multiline lastIndex source
3. RegExp實例方法： exec() test()
4. RegExp構造函數(shù)屬性
###5.5 Function類型
1. 沒有重載：聲明兩個同名函數(shù)，后面的函數(shù)覆蓋前面的函數(shù)
2. 函數(shù)聲明: function sum(num1,num2){return num1+num2}
函數(shù)表達式: var sum = function(num1,num2){return num1+num2};
3. 函數(shù)可以作為參數(shù)傳入函數(shù)中
4. 函數(shù)內部屬性 arguments 保存函數(shù)參數(shù)
callee 指針沐寺，指向擁有這個arguments對象的函數(shù)
this 引用函數(shù)據(jù)以執(zhí)行的環(huán)境對象林艘，全局中為window
caller 保存調用當前函數(shù)的引用，若為全局作用域中調用當前函數(shù)混坞，值為null
5. 函數(shù)的屬性和方法
length 函數(shù)希望接收的命名參數(shù)的個數(shù)
prototype 保存引用類型所有實例方法狐援，不可枚舉的
apply() 兩個參數(shù)，一個是其中運行函數(shù)的作用域究孕，一個是參數(shù)數(shù)組啥酱。
call() 與apply()
功能相同，第一個參數(shù)也是this厨诸，后面的參數(shù)镶殷，直接傳給函數(shù)
bind() 創(chuàng)建一個函數(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ù)：字符串開始位置微酬、結束后一個位置
substr() 創(chuàng)建新字符串 兩個參數(shù)：字符串開始位置绘趋、結束后一個位置
substring() 創(chuàng)建新字符串 兩個參數(shù)：字符串開始位置、字符串長度
3. 字符串位置方法
indexOf()
lastIndexOf()
4. trim()方法 創(chuàng)建字符串副本颗管，從一個字符串的兩端刪除空白字符
5. 字符串大小寫轉換方法
toLowerCase() toLocaleLowerCase()
toUpperCase() toLocaleUpperCase()
6. 字符串的模式匹配方法
match() [只接受一個參數(shù)陷遮，要么是正則表達式，要么是RegExp對象]
返回數(shù)組
search() [返回出現(xiàn)的索引]
replace() 兩個參數(shù)：RegExp垦江、字符串/函數(shù)
7. localeCompare()方法 比較字符串
8. fromCharCode()方法
9. HTML方法
###5.7 單體內置對象 （開發(fā)人員不必顯式地實例化內置對象拷呆，因為已經(jīng)實例化了）
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. 其他方法
##第六章 面向對象的程序設計
###6.1 理解對象
1. 屬性類型（數(shù)據(jù)屬性茬斧、訪問器屬性）
1. 數(shù)據(jù)屬性
包含一個數(shù)據(jù)值的位置，這個位置可以讀取和寫入
[Configurable: true][Enumerable: true][Writable: true][Value: undefined] 默認值必須使用Object.defineProperty()方法才能修改
2. 訪問器屬性
不包含數(shù)據(jù)值梗逮，包含一對getter和setter函數(shù)
[Configurable: true][Enumerable: true][Get: undefined][Set: undefined] 默認值必須使用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. 構造函數(shù)模式
function Person(name, age, job) {
this.name = name;
...
}
var person1 = new Person("li",14,"doctor")
new操作符以下4個步驟：
1. 創(chuàng)建一個新對象
2. 將構造函數(shù)的作用域賦給新對象(因此this指向了這個新對象)
3. 執(zhí)行構造函數(shù)中的代碼
4. 返回新對象
若不使用new，則直接添加到window上
缺點：每個方法都要在每個實例上重新創(chuàng)建一遍
修正：將函數(shù)寫在外面：
然后內部用: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屬性對其屬性進行賦值和定義底哗，構造函數(shù)變?yōu)榭? 2. 新函數(shù)都會有自身的prototype屬性岁诉，屬性指向函數(shù)的原型對象
3. Array.prototype 可以訪問器所有的默認方法引用（同樣適用于Object String）
4. 組合使用構造函數(shù)模式和原型模式
5. 動態(tài)原型模式 構造函數(shù)中使用if語句，判定存在與否跋选，是否定義某函數(shù)屬性
6. 寄生構造函數(shù)模式
7. 穩(wěn)妥構造函數(shù)模式 安全環(huán)境涕癣，不使用this、new
###6.3 繼承 【只支持實現(xiàn)繼承前标，不支持接口繼承】
每一個構造函數(shù)都有一個原型對象坠韩，原型對象都包含一個指向構造函數(shù)的指針，而實例都包含一個指向原型對象的內部指針
1. 原型鏈
1. 所有引用類型默認都繼承了Object
2. 繼承：SubType.prototype = new SuperType()
通過創(chuàng)建SupeType的實例并將實例賦值給SubType.prototype實現(xiàn)的
new操作符以下4個步驟：
1. 創(chuàng)建一個新對象
2. 將構造函數(shù)的作用域賦給新對象(因此this指向了這個新對象)
3. 執(zhí)行構造函數(shù)中的代碼
4. 返回新對象
3. 默認的原型
為Object炼列，所有的Prototype都是繼承了Object
4. 缺點：
1. 包含引用類型值的原型
如：superType包含的屬性只搁，subType的所有實例都包含相同的內容
2. 在創(chuàng)建子類型的實例中，不能像構造函數(shù)中傳遞參數(shù)
2. 借用構造函數(shù)
子類型構造函數(shù)的內部調用超類型構造函數(shù)
function SuperType(name) {
this.name = name;
}
function SubType() {
SuperType.call(this,"li") //繼承了SuperType俭尖，同時傳遞了參數(shù)
this.age = 29;
}
缺點：
方法都是在構造函數(shù)中調用氢惋，函數(shù)無任何復用
3. 組合繼承
使用原型鏈實現(xiàn)對原型屬性和方法的繼承，而通過構造函數(shù)來實現(xiàn)對實例屬性的繼承
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);
}
原型鏈和借用構造函數(shù)組合一起
缺點：調用兩次超類型構造函數(shù)：SuperType
4. 原型式繼承
Object.create(person)方法稽犁，有一個對象作為另一個對象的基礎
兩個參數(shù)：第一個為原對象
第二個為：自身屬性
5. 寄生式繼承
創(chuàng)建一個勁用于封裝繼承過程的函數(shù)焰望，然后用某種方式來增強對象
缺點：不能函數(shù)復用
6. 寄生組合式繼承
將那兩個函數(shù)封裝為一個
##第七章 函數(shù)表達式
###7.1 遞歸
###7.2 閉包 【有權訪問另一個函數(shù)作用域中的變量的函數(shù)】
1. 閉包與變量 [javascript_problem_1]
2. 關于this對象
3. 內存泄露
###7.3 模仿塊級作用域
###7.4 私有變量
1. 靜態(tài)私有變量
2. 模塊模式
3. 增強的模塊模式
##第八章 BOM
###8.1 window對象
全局作用域
窗口位置：
IE Safari Opera Chrome：screenLeft screenTop
Firefox：screenX screenY
moveTo(x,y) 將窗口移動到一個新位置,新位置的x，y坐標 —|
moveBy(x,y) 水平和垂直方向上移動的像素數(shù) _| 可能被瀏覽器禁用
窗口大戌愿丁：
innerWidth innerHeight 頁面視圖區(qū)大惺凉馈（減去邊框寬度）
outerWidth outerHeight 瀏覽器窗口本身尺寸
document.documentElement.clientWidth/clientHeight 保存頁面視口信息
調整瀏覽器窗口大小（默認禁用）：resizeTo() resizeBy()
導航和打開窗口：
window.open() 打開一個新瀏覽器窗口
4個參數(shù)：要加載的url陷猫、窗口目標秫舌、一個特性字符串、一個表示頁面是否取代瀏覽歷史記錄中當前加載頁面的布爾值
1. 彈出窗口 window.open("http://www.baidu.com","baidu","height=400,width=300,top=10");
2. 安全限制
3. 彈出窗口屏蔽程序 badu == null 或者使用try{}catch(){}
間歇調用和超時調用：
1. setTimeout(要執(zhí)行代碼绣檬，以毫秒表示的時間) 返回一個調用ID足陨，可使用claerTimeout(id)來取消
JavaScript為單線程語言，過了setTimeout時間后娇未，將對應要執(zhí)行代碼添加到任務隊列中墨缘。若隊列為空，則執(zhí)行該代碼。
2. setTnterval(執(zhí)行代碼镊讼，時間) 也返回一個調用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() 重新加載當前顯示的頁面〉澹可能從緩存中加載卸亮，如果添加true參數(shù)，就是從服務器重新加載
###8.3 Navigator對象
通常用于檢測瀏覽器類型
userAgent
檢測插件：
plugins 數(shù)組每一項都包含：name description filename length
每個插件對象本身是一個MimeType對象數(shù)組
IE中檢測插件：ActiveXObject(name)檢測玩裙，name為COM對象的唯一標識符
集合有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()在用戶歷史記錄中任意跳轉
back()后退
forward()前進
length屬性 保存的歷史記錄的數(shù)量
##第九章 客戶端檢測
###9.1 能力檢測
不是識別特定的瀏覽器决侈，而是識別瀏覽器的能力
檢測是否有sort方法螺垢，要使用typeof sort == "function" 來判斷是否函數(shù)
###9.2 怪癖檢測
識別瀏覽器的特殊行為
###9.3 用戶代理檢測
通過檢測用戶代理字符串來確定實際使用的瀏覽器 Navigator.userAgent
電子欺騙：瀏覽器通過在自己的用戶代理字符串中添加一些錯誤信息，達到欺騙服務器的目的
1. 識別呈現(xiàn)引擎：IE Gecko WebKit KHTML Opera
2. 識別瀏覽器
3. 識別平臺：Windows Mac Unix
4. 識別Windows操作系統(tǒng)
5. 識別游戲設備
6. 識別游戲系統(tǒng)
##第十章 DOM
IE中所有的DOM對象都是以COM對象的形式實現(xiàn)的颜及，因此與原生JavaScript對象的行為或活動特點不一致甩苛。
###10.1 節(jié)點層次
1. Node 類型
nodeType屬性：
1：ELEMENT_NODE
2: ATTRIBUTE_NODE ...
nodeName【元素標簽名】 、nodeValue 【null】屬性
chlidNotes屬性 和 NodeList對象
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);//將NodeList轉換為數(shù)組
parentNode屬性
firstChild lastChild
appendChild()
向childNodes列表末尾添加一個節(jié)點俏站，并返回新增節(jié)點讯蒲，若本來就有該節(jié)點，則從原來位置移動到新的位置
insertBefore(要插入節(jié)點肄扎，作為參照節(jié)點)
放在某個特定的位置上
replaceChild()
替換
removeChild()
移除節(jié)點
cloneNode()
接收一個布爾值參數(shù)墨林，表示是否執(zhí)行深復制
2. Document 類型
HTMLDocument實例的document對象，document.childNotes 為<!DOCTYPE html> 和<html>
document
document.titile 只讀
請求相關屬性 HTTP頭部
URL 頁面完整URL 只讀
domain 頁面域名 可更改犯祠，為URL包含的一個子域名旭等，但不同子域頁面無法通過JavaScript通信
referrer 鏈接到當前頁面的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
檢測瀏覽器實現(xiàn)了DOM的那些部分功能
hasFeature(要檢測DOM功能的名稱搔耕，要檢測DOM功能的版本號)
文檔寫入功能
write() 接收一個字符串，原樣寫入
writeln() 接收一個字符串痰娱，末尾添加一個換行符(\n)
"</script> -->" 不能直接寫入弃榨，要寫為"<\/script>"，否則會被當做腳本塊的結束
open() 打開網(wǎng)頁輸出流
close() 滾逼網(wǎng)頁輸出流
3. Element 類型
nodeType 為1 nodeName值為元素的標簽名 nodeValue值為null parentNode值可能為Document或Element
1. HTML元素
所有的HTML元素都由HTMLElemnt類型表示
id 唯一標識符梨睁，對用戶透明
title 元素附加說明信息
lang 語言代碼鲸睛，很少使用，用戶透明
dir 語言方向坡贺，很少使用
className class特性對應
2. 取得特性
getAttribute("class")
"id"/"title"/"lang"/"dir"/自定義特性(最好加上data-前綴)
兩類不能取得特性：style[CSS文本]官辈、onclick[因為內容為JavaScript代碼]
3. 設置特性
setAttribute("id","someOtherId")
removeAttribute()
4. attributes屬性 【遍歷元素特征】
atrributes屬性中包含一系列節(jié)點箱舞，每個節(jié)點的nodeName是特性的名稱，nodeValue是特性的值
getNamedItem(name) 返回nodeName屬性等于name的節(jié)點
removeNamedItem(name) 從列表中移除nodeName屬性等于name的節(jié)點
setNamedItem(node) 向列表中添加節(jié)點
item(pos) 返回位于數(shù)字pos位置處的節(jié)點
5. 創(chuàng)建元素
document.createElement("div");
4. Text類型
nodeType 為3 nodeName為”#text“ nodeValue 的值為節(jié)點所包含的文本 parentNode為Element 不支持子節(jié)點 可通過nodeValue的data屬性訪問Text節(jié)點中包含的文本
appendData(text) 將text添加到節(jié)點的末尾
deleteData(offset,count) 從offset指定的位置刪除count個字符
insertData(offset,text) 從offset指定位置插入text
replaceData(offset,count,text) text替換從offset到offset+cout為止處的文本
splitText(offset) 從offset位置將當前文本節(jié)點分為兩個文本節(jié)點
substringData(offset,count) 提取從offset到offset+count位置處的字符串
length屬性：nodeValue.length拳亿、data.length
1. 創(chuàng)建文本屬性 document.createTextNode()
2. 規(guī)范化文本節(jié)點 normalize()將包含多個文本節(jié)點的父元素的文本整合為單個文本
3. 分割文本節(jié)點 splitText() 將一個文本節(jié)點分為兩個晴股，分割位置為參數(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é)點队魏，但在文檔中沒有對應的標記，可作為”倉庫“使用万搔，保存將來可能會添加到文檔中的節(jié)點
9. Attr類型
不是DOM文檔樹的一部分 一般不需要直接訪問特性節(jié)點
10.2 DOM操作技術
1. 動態(tài)腳本
動態(tài)創(chuàng)建<script>標簽引入代碼
2. 動態(tài)樣式
加載完成后動態(tài)添加到頁面中,使用DOM創(chuàng)建<link>元素，<style>
加載外部樣式文件的過程是異步的官帘，加載樣式和執(zhí)行JavaScript代碼的過程沒有固定的次序
3. 操作表格
Dom為<table><tbody><tr>等元素添加了一些屬性和方法
...tbody.rows[0].cells[0]
4. 使用NodeList
每當文檔結構發(fā)生變化時瞬雹，會更新
一般盡量減少訪問NodeList的次數(shù)，或者將其值緩存起來
