1.創(chuàng)建元素
創(chuàng)建元素：document.createElement()
使用document.createElement()可以創(chuàng)建新元素。這個(gè)方法只接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名。這個(gè)標(biāo)簽名在HTML文檔中不區(qū)分大小寫，在XHTML中區(qū)分大小寫。
var div = document.createElement("div");
使用createElement()方法創(chuàng)建新元素的同時(shí)，也為新元素設(shè)置了ownerDocument屬性，可以操作元素的特性。
div.id = "myDiv";
div.className = "div1";
此時(shí)，新元素尚未被添加到文檔樹中，因此設(shè)置各種特性均不會(huì)影響瀏覽器的顯示。要添加到文檔樹，可用appendChild()、insertBefore()、replaceChild()。（稍后講到）
document.body.appendChild(div);
當(dāng)把元素添加到文檔樹中后，伺候鬼這個(gè)元素做的任何修改都會(huì)實(shí)時(shí)地反應(yīng)到瀏覽器中。
在IE中可以為createElement()方法傳入完整的元素標(biāo)簽和屬性。(只在IE中兼容)
var div = document.createElement("<div id=\"mydiv\" class=\"div1\"></div>");
不能再標(biāo)簽里加其他元素節(jié)點(diǎn)或者文本節(jié)點(diǎn)，如下的方式和上面的得出的節(jié)點(diǎn)一樣
var div = document.createElement("<div id=\"mydiv\" class=\"div1\">12212</div>");
創(chuàng)建文本節(jié)點(diǎn) ：document.createTextNode
使用document.createTextNode()來(lái)創(chuàng)建文本節(jié)點(diǎn)，這個(gè)方法接受一個(gè)參數(shù)：要插入節(jié)點(diǎn)的文本。與設(shè)置已有文本節(jié)點(diǎn)的值一樣，作為參數(shù)的文本將按照HTML或XML的格式進(jìn)行編碼。
document.createTextNode("121212");
可以添加多個(gè)文本節(jié)點(diǎn)。假如兩個(gè)文本節(jié)點(diǎn)時(shí)相鄰的同胞節(jié)點(diǎn)，那么兩個(gè)文本節(jié)點(diǎn)會(huì)連起來(lái)，中間不會(huì)有空格。
2.節(jié)點(diǎn)關(guān)系
（IE9以前不將換行和空格看做文本節(jié)點(diǎn)，其他瀏覽器會(huì)）
文本關(guān)系如下：
<div id="div1">
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
父節(jié)點(diǎn)：parentNode
parentNode是指定節(jié)點(diǎn)的父節(jié)點(diǎn).一個(gè)元素節(jié)點(diǎn)的父節(jié)點(diǎn)可能是一個(gè)元素(Element )節(jié)點(diǎn),也可能是一個(gè)文檔(Document )節(jié)點(diǎn),或者是個(gè)文檔碎片(DocumentFragment)節(jié)點(diǎn).
每一個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性。
對(duì)于下面的節(jié)點(diǎn)類型: Attr, Document, DocumentFragment, Entity, Notation,其parentNode屬性返回null。如果當(dāng)前節(jié)點(diǎn)剛剛被建立,還沒有被插入到DOM樹中,則該節(jié)點(diǎn)的parentNode屬性也返回null。
<script type="text/javascript">
var child2 = document.getElementById("div2");
var parent = child2.parentNode;
</script>
子節(jié)點(diǎn)：childNodes
childNodes 返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時(shí)更新的集合（live collection）。
即時(shí)更新就是對(duì)節(jié)點(diǎn)元素的任意修改都會(huì)立即反映到結(jié)果里。
<script type="text/javascript">
var child2 = document.getElementById("div2");
var parent = child2.parentNode;
var allChilds = parent.childNodes;
console.log(allChilds.length) // IE下是3，其他瀏覽器是7
var nodeAdd = document.createElement("div");
var textAdd = document.createTextNode("這是添加的文本節(jié)點(diǎn)");
nodeAdd.appendChild(textAdd);
parent.appendChild(nodeAdd);
console.log(allChilds.length);// IE下是4，其他瀏覽器是8
</script>
兄弟節(jié)點(diǎn)：nextSibling，previousSibling
nextSibling返回某節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)，previousSibling返回某節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)，沒有的話返回null。
注意：可能因?yàn)樵負(fù)Q行的原因返回的是text節(jié)點(diǎn)。
<script type="text/javascript">
var child3 = document.getElementById("div3");
var next = child3.nextSibling;
var previous = child3.previousSibling;
console.log(next); // IE下返回div4，其他返回text
console.log(previous) // IE下返回div2，其他返回text
</script>
第一個(gè)或最后一個(gè)子節(jié)點(diǎn)：firstChild、lastChild
firstChild返回node的子節(jié)點(diǎn)中的第一個(gè)節(jié)點(diǎn)的引用，沒有返回null
lastChild返回node的子節(jié)點(diǎn)中的最后一個(gè)節(jié)點(diǎn)的引用，沒有返回null
<script type="text/javascript">
var child3 = document.getElementById("div3");
var parent = child3.parentNode;
var first = parent.firstChild; // IE是div2，其他是text
var last = parent.lastChild; // IE是div4，其他是text
</script>
3.節(jié)點(diǎn)元素關(guān)系
只算元素，不算文本節(jié)點(diǎn)。
以下三個(gè)方法用法和節(jié)點(diǎn)關(guān)系完全一樣，只是這三個(gè)方法只看元素節(jié)點(diǎn)，不管因?yàn)榭崭?、換行造成的文本節(jié)點(diǎn)或者手動(dòng)加上去的文本節(jié)點(diǎn)。
children： 返回所有元素子節(jié)點(diǎn)（IE5+、ff3.5、opera3、chrome，但在IE8及以下會(huì)將注釋節(jié)點(diǎn)看成一個(gè)元素節(jié)點(diǎn)）
以下兩個(gè)IE9+才支持
nextElementSibling：返回元素的下一個(gè)兄弟元素節(jié)點(diǎn)
previousElementSibling: 返回元素的上一個(gè)兄弟元素節(jié)點(diǎn)
4.節(jié)點(diǎn)操作
appendChild()
appendChild()用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)，并且返回這個(gè)新增的節(jié)點(diǎn)。
如果傳入到appendChild()里的節(jié)點(diǎn)已經(jīng)是文檔的一部分了，那結(jié)果就是將節(jié)點(diǎn)從原來(lái)的位置轉(zhuǎn)移到新位置，任何一個(gè)節(jié)點(diǎn)不能同時(shí)出現(xiàn)在文檔中的多個(gè)位置。
var returnNode = someNode.appendChild(someNode.firstChild); // 返回第一個(gè)節(jié)點(diǎn)
console.log(returnNode === someNode.firstChild); // false
console.log(returnNode === someNode.lastChild); // true
insetBefore()
insetBefore()可以將節(jié)點(diǎn)插入到某個(gè)特定的位置。這個(gè)方法接受兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。
插入節(jié)點(diǎn)后，被插入的節(jié)點(diǎn)變成參照節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)，同時(shí)被方法返回。 如果參照節(jié)點(diǎn)是null，則與appendChild()執(zhí)行相同的操作。
// 插入后成為最后一個(gè)子節(jié)點(diǎn)
var returnNode = someNode.insetBefore(newNode, null);
console.log(returnNode === someNode.lastChild); // true
// 插入后成為第一個(gè)子節(jié)點(diǎn)
var returnNode = someNode.insetBefore(newNode, someNode.firstChild);
console.log(returnNode === newNode); // true
console.log(returnNode === someNode.firstChild); // true
// 插入到最后一個(gè)子節(jié)點(diǎn)的前面
var returnNode = someNode.insetBefore(newNode, someNode.lastChild);
console.log(returnNode === someNode.childNodes[someNode.childnodes.length - 2]) // true
替換節(jié)點(diǎn)： replaceChild()
replaceChild()接受兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和要被替換的節(jié)點(diǎn)。被替換的節(jié)點(diǎn)將由這個(gè)方法返回并從文檔中被移除，同時(shí)由要插入的節(jié)點(diǎn)占據(jù)其位置。
// 替換第一個(gè)子節(jié)點(diǎn)
var returnNode = someNode.replaceChild(newNode, someNode.firstChild);
使用replaceChild()后，被替換的節(jié)點(diǎn)的所有關(guān)系指針都會(huì)被復(fù)制到插入的節(jié)點(diǎn)上面。
刪除節(jié)點(diǎn)：removeChild()
該方法移除節(jié)點(diǎn)，接受一個(gè)參數(shù)，即要移除的節(jié)點(diǎn)，同時(shí)該方法返回被移除的節(jié)點(diǎn)。只能是一個(gè)節(jié)點(diǎn)，不能是一組節(jié)點(diǎn)。
// 移除第一個(gè)子節(jié)點(diǎn)
var returnNode = someNode.removeChild(newNode, someNode.firstChild);
克隆節(jié)點(diǎn)：cloneNode(true/false)
返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本。參數(shù)表示是否采用深度克隆,如果為true,則該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也都會(huì)被克隆,如果為false,則只克隆該節(jié)點(diǎn)本身，文本或者換行、空格這些不會(huì)復(fù)制，因?yàn)樗麄兌际且粋€(gè)textNode。
注意: 在DOM4規(guī)范中(實(shí)現(xiàn)于Gecko 13.0(Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) , 查看 bug 698391),deep是一個(gè)可選參數(shù). 如果省略的話, deep參數(shù)的默認(rèn)值為true,也就是說(shuō),深度克隆是默認(rèn)的.如果想使用淺克隆, 你需要將該參數(shù)指定為false。
在舊版本的瀏覽器中, 你始終需要指定deep參數(shù)。
克隆一個(gè)元素節(jié)點(diǎn)會(huì)拷貝它所有的屬性以及屬性值,當(dāng)然也就包括了屬性上綁定的事件(比如onclick="alert(1)"),但不會(huì)拷貝那些使用addEventListener()方法或者node.onclick = fn這種用JavaScript動(dòng)態(tài)綁定的事件。
注意:為了防止一個(gè)文檔中出現(xiàn)兩個(gè)ID重復(fù)的元素,使用cloneNode()方法克隆的節(jié)點(diǎn)在需要時(shí)應(yīng)該指定另外一個(gè)與原ID值不同的ID
var div1 = document.getElementById("div1");
var cloneHtml = div1.cloneNode(true);
document.body.appendChild(cloneHtml);
5.元素選擇
自定義元素屬性選擇
<div data-id='123'>123</div>
<div data-id='123'>456</div>
<div data-id='123'>789</div>
<div data-id='123'>1000</div>
//querySelector只能獲取到第一個(gè)匹配的元素
let ele=document.querySelector('[data-id="123"]');
console.log(ele.length);
console.log(ele.innerHTML);
//querySelectorAll可以獲取到多個(gè)匹配的值,如果只有一個(gè),可以通過(guò)下標(biāo)[0]來(lái)取值
var elelist = document.querySelectorAll('[data-id="123"]');
console.log(elelist.length);
console.log(elelist[0].innerHTML);
console.log(elelist[1].innerHTML);
console.log(elelist[2].innerHTML);
console.log(elelist[3].innerHTML);
--------------------------------------------------
HTML代碼示例：
<div id="div1">
<p id="div2" class="one" name="nameone">2</p>
<div id="div3">3</div>
<div id="div4" name="div2">4</div>
</div>
querySelector、querySelectorAll(IE8及以上)
Selectors API通過(guò)匹配一組選擇器的方式來(lái)為從DOM中檢索Element節(jié)點(diǎn)提供一些簡(jiǎn)單快捷的方法，這比過(guò)去必須要在javascript代碼中用循環(huán)來(lái)查找某個(gè)你想要的特定元素更快一些。
該規(guī)范對(duì)于使用Document,DocumentFragment和Element接口的對(duì)象都增了兩種新方法：
querySelector
返回節(jié)點(diǎn)子樹內(nèi)與之相匹配的第一個(gè)Element節(jié)點(diǎn)。如果沒有匹配的節(jié)點(diǎn)，則返回null。
querySelectorAll
返回一個(gè)包含節(jié)點(diǎn)子樹內(nèi)所有與之相匹配的Element節(jié)點(diǎn)列表，如果沒有相匹配的，則返回一個(gè)空節(jié)點(diǎn)列表。
注意：由 querySelector()、querySelectorAll()返回的節(jié)點(diǎn)列表不是動(dòng)態(tài)實(shí)時(shí)的（非live Collection）。這和其他DOM查詢方法返回動(dòng)態(tài)實(shí)時(shí)節(jié)點(diǎn)列表不一樣。
選擇器方法接受一個(gè)或多個(gè)用逗號(hào)分隔的選擇器來(lái)確定需要被返回的元素。例如，要選擇文檔中所有CSS的類(class)是warning或者note的段落(p)元素,可以這樣寫：
var special = document.querySelectorAll( "p.warning, p.note" );
也可以通過(guò)ID來(lái)查詢，例如：
var el = document.querySelector( "#main, #basic, #exclamation" );
執(zhí)行上面的代碼后，el就包含了文檔中元素的ID是main，basic或exclamation的所有元素中的第一個(gè)元素。
querySelector() and querySelectorAll() 里可以使用任何CSS選擇器，他們都不是live Collection：
var notLive = document.querySelectorAll("p");
console.log(notLive);
document.getElementById("div1").removeChild(document.getElementById("div2"));
console.log(notLive);
// 上面兩個(gè)輸出都是輸出 `p#div2.one`的引用，沒有因?yàn)閯h除了`p`標(biāo)簽而使`notLive`的結(jié)果發(fā)生變化。
getElementById()
返回一個(gè)匹配特定 ID的元素。id是大小寫敏感的字符串，代表了所要查找的元素的唯一ID，如果沒有則返回null。
如果新建一個(gè)元素，還沒有插入到文檔中，則不能通過(guò)該方法獲取到。
var notLive = document.getElementById("div2");
console.log(notLive.innerHTML);
document.getElementById("div1").removeChild(document.getElementById("div2"));
console.log(notLive.innerHTML);
// 上面輸出都是2，說(shuō)明getElementById()也是**非**live collection
getElementsByTagName()
document.getElementsByTagName() 方法返回一個(gè)實(shí)時(shí)的包含具有給出標(biāo)簽名的元素們的HTMLCollection。指定的元素的子樹會(huì)被搜索，包括元素自己。返回的 list 是實(shí)時(shí)的（live collection），意味著它會(huì)隨著DOM樹的變化自動(dòng)更新。因此，如果對(duì)同一個(gè)元素，使用相同的參數(shù)，是不需要多次調(diào)用document.getElementsByTagName() 的。
Element.getElementsByTagName()的搜索被限制為指定元素的后代而不是document
var live = document.getElementsByTagName("p");
console.log(live[0].innerHTML);
document.getElementById("div1").removeChild(document.getElementById("div2"));
console.log(live[0].innerHTML);
// 第一個(gè)輸出2，第二個(gè)報(bào)錯(cuò)，因?yàn)闊o(wú)法引用到p標(biāo)簽
getElementsByName()
該方法返回一個(gè)實(shí)時(shí)的nodelist collection，包含文檔中所有name屬性匹配的標(biāo)簽。這是一個(gè)**live collection**。
注意：在IE和opera下，如果某個(gè)元素1的name和另一個(gè)元素2的id重合，且元素2在元素1的前面，則getElementsByName()會(huì)取到元素2。
var live = document.getElementsByName("div2");
console.log(live[0].innerHTML);
document.getElementById("div1").removeChild(document.getElementById("div2"));
console.log(live[0].innerHTML);
// chrome下：全部輸出4
// IE下： 第一個(gè)輸出2，第二個(gè)報(bào)錯(cuò)。
getElementsByClassName()
該方法返回一個(gè)即時(shí)更新的（live） HTMLCollection，包含了所有擁有指定 class 的子元素。當(dāng)在 document 對(duì)象上調(diào)用此方法時(shí)，會(huì)檢索整個(gè)文檔，包括根元素。(IE9以下不支持)
要匹配多個(gè)class，則className用空格分開。
getElementsByClassName("class1 class2");
var live = document.getElementsByClassName("one");
console.log(live[0].innerHTML);
document.getElementById("div1").removeChild(document.getElementById("div2"));
console.log(live[0].innerHTML);
// 第一個(gè)返回2，第二個(gè)報(bào)錯(cuò)
6.屬性操作
setAttribute()
添加一個(gè)新屬性（attribute）到元素上，或改變?cè)厣弦呀?jīng)存在的屬性的值。
當(dāng)在 HTML 文檔中的 HTML 元素上調(diào)用 setAttribute() 方法時(shí)，該方法會(huì)將其屬性名稱（attribute name）參數(shù)小寫化。
如果指定的屬性已經(jīng)存在，則其值變?yōu)閭鬟f的值。如果不存在，則創(chuàng)建指定的屬性。也可指定為null。如果設(shè)置為null，最好使用removeAttribute()。
var div2 = document.getElementById("div2");
div2.setAttribute("class", "new_class");
div2.setAttribute("id", "new_id");
注意：在IE7下，修改了元素的class，如果已有class，則會(huì)出現(xiàn)兩個(gè)class，通過(guò)setAttribute()添加的不生效；如果沒有class，則添加上class，但這個(gè)添加上去的class的樣式不會(huì)生效。
removeAttribute()
該方法用于移除元素的屬性。
var div2 = document.getElementById("div2");
div2.removeAttribute("class");
注意：IE7下無(wú)法移除 class 屬性
getAttribute()
該方法返回元素上指定屬性（attribute）的值。如果指定的屬性不存在，則返回 null 或 "" （空字符串）（IE5+都返回null）。
var div2 = document.getElementById("div2");
var attr = div2.getAttribute("class");
console.log(attr);
注意：IE7下不能正確返回class，返回的是null，其他正常。
hasAttribute()
hasAttribute() 返回一個(gè)布爾值，指示該元素是否包含有指定的屬性（attribute）。
注意：IE7不支持該方法。
自定義屬性data-*
html5里有一個(gè)data-*去設(shè)置獲取元素的自定義屬性值。
<div id="div1" data-aa="11">
利用div1.dataset可以獲得一個(gè)DOMStringMap，包含了元素的所有data-*。
使用div1.dataset.aa就可以獲取11的值。
同樣，通過(guò)設(shè)置div1.dataset.bb = "22"就可以設(shè)置一個(gè)自定義屬性值。
在不兼容的瀏覽器里，就使用getAttribute和setAttribute
var div1 = document.getElementById("div1");
var a = null;
if (div1.dataset) {
a = div1.dataset.aa;
div1.dataset.bb = "222";
} else {
a = div1.getAttribute("data-aa");
div1.setAttribute("data-bb", "2222");
}
console.log(a);
7.事件
addEventListener()
addEventListener()將指定的事件監(jiān)聽器注冊(cè)到目標(biāo)對(duì)象上，當(dāng)目標(biāo)對(duì)象觸發(fā)制定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)觸發(fā)。目標(biāo)對(duì)象可以是 文檔上的元素、 document、 window 或者XMLHttpRequest(比如onreadystatechange事件)。
IE8及以下不支持此方法且只有事件冒泡沒有事件捕獲。IE9開始支持此方法，也就有了事件捕獲。
var div1 = document.getElementById("div1");
div1.addEventListener("click", listener, false);
function listener() {
console.log('test');
}
var cloneHtml = div1.cloneNode(true);
document.body.appendChild(cloneHtml);
第一個(gè)參數(shù)是事件名，第二個(gè)是回調(diào)函數(shù)，第三個(gè)參數(shù)為true表示捕獲，false表示冒泡。
var div1 = document.getElementById("div1");
div1.addEventListener("click", listener1, true/fasle);
function listener1() {
console.log('test1');
}
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true/fasle);
function listener2() {
console.log('test2');
}
有一點(diǎn)要注意的是，當(dāng)對(duì)某一個(gè)元素1既綁定了捕獲事件，又綁定了冒泡事件時(shí)：
當(dāng)這個(gè)元素1并不是觸發(fā)事件的那個(gè)元素2時(shí)，則觸發(fā)順序會(huì)按照先 捕獲 后 冒泡 的順序觸發(fā)；
當(dāng)這個(gè)元素1就是最底層的觸發(fā)事件的元素時(shí)，則這個(gè)元素沒有捕獲和冒泡的區(qū)別，誰(shuí)先綁定就先觸發(fā)誰(shuí)。
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true);
function listener2() {
console.log('test2');
}
div2.addEventListener("click", listener1, false);
function listener1() {
console.log('test1');
}
// 按綁定順序執(zhí)行，兩個(gè)`addEventLister()`顛倒過(guò)來(lái)則執(zhí)行順序也變化
// 如果再對(duì)`div1`綁定一個(gè)捕獲、一個(gè)冒泡，則會(huì)先觸發(fā)捕獲 再 觸發(fā)冒泡，與綁定順序無(wú)關(guān)
removeEventListener()
與addEventListener()綁定事件對(duì)應(yīng)的就是移除已綁定的事件。第三個(gè)參數(shù)的布爾值代表解綁的是捕獲事件還是冒泡事件。兩個(gè)事件互不相關(guān)。
var div2 = document.getElementById("div2");
div2.addEventListener("click", listener2, true);
function listener2() {
console.log('test2');
}
div2.removeEventListener("click", listener2, true);
注意：只能通過(guò)removeEventListener()解綁有名字的函數(shù)，對(duì)于綁定的匿名函數(shù)無(wú)法解除綁定。
div2.addEventListener("click", function(){
console.log('test');
console.log(this);
}, true);
div2.removeEventListener("click", function() {
console.log("test");
}, true);
div2.onclick = null;
// 點(diǎn)擊div2依然打印出test
注意：這里this指向觸發(fā)事件的元素自身。
attachEvent()、detachEvent()
IE8及以下使用這兩個(gè)方法綁定和解綁事件，當(dāng)然，IE9+也支持這個(gè)事件。但這個(gè)方法綁定的事件默認(rèn)為冒泡也只有冒泡。
// 這里需要在事件前加 on
div2.attachEvent("onclick", listener1);
function listener1() {
console.log('test');
console.log(this);
}
div2.detachEvent("onclick", listener1);
和addEventListener()一樣，也不能解綁匿名函數(shù)。
注意：這里this指向 window。
阻止默認(rèn)事件和冒泡
標(biāo)準(zhǔn)事件和IE事件中的阻止默認(rèn)事件和冒泡事件也有很大區(qū)別。
var div2 = document.getElementById("div2");
if (div2.addEventListener) {
div2.addEventListener("click", function(e) {
e.preventDefault(); // 阻止默認(rèn)事件
e.stopPropagation(); // 阻止冒泡
console.log(e.target.innerHTML);
}, false);
} else {
div2.attachEvent("onclick", function() {
var e = window.event;
e.returnValue = false; // 阻止默認(rèn)事件
e.cancelBubble = true; // 阻止冒泡
console.log(e.srcElement.innerHTML);
});
}
IE8及以下的event是綁定在window上的。（我的IE11里，仿真到IE7、IE8也可以取到標(biāo)準(zhǔn)事件里的 e 對(duì)象，估計(jì)是升級(jí)到IE11的原因）。
自定義事件：createEvent()
createEvent()用于創(chuàng)建一個(gè)新的 event ，而后這個(gè) event 必須調(diào)用它的 init() 方法進(jìn)行初始化。最后就可以在目標(biāo)元素上使用dispatchEvent()調(diào)用新創(chuàng)建的event事件了。
createEvent()的參數(shù)一般有：UIEvents、MouseEvents、MutationEvents、HTMLEvents、Event(s)等等，分別有對(duì)應(yīng)的init()方法。HTMLEvents、Event(s)對(duì)應(yīng)的都是initEvent()方法。
initEvent(type, bubbles, cancelable)
type表示自定義的事件類型，bubbles表示是否冒泡，cancelable表示是否阻止默認(rèn)事件。
target.dispatchEvent(ev)
target就是要觸發(fā)自定義事件的DOM元素
var div1 = document.getElementById("div1");
div1.addEventListener("message", function(){
console.log('test');
}, false);
var div2 = document.getElementById("div2");
div2.addEventListener("message", function(e){
console.log(this);
console.log(e);
}, false);
var ev = document.createEvent("Event");
ev.initEvent("message", false, true); // 起泡參數(shù)變?yōu)閠rue，div1的事件就會(huì)觸發(fā)
div2.dispatchEvent(ev);
8.獲取元素相關(guān)計(jì)算后的值
getComputedStyle()、currentStyle()
當(dāng)我們想獲取元素計(jì)算后實(shí)際呈現(xiàn)在頁(yè)面上的各個(gè)值，就用這兩個(gè)方法。IE8及以下用currentStyle(),IE9+及其他標(biāo)準(zhǔn)瀏覽器用getComputedStyle()。
var div2 = document.getElementById("div2");
var result = "";
if (window.getComputedStyle) {
result = (window || document.defaultView).getComputedStyle(div2, null)['cssFloat'];
} else {
result = div2.currentStyle["styleFloat"];
}
console.log(result);
// document.defaultView返回document對(duì)象所關(guān)聯(lián)的window
這兩個(gè)方法在不同的瀏覽器里差距也很大。
比如float屬性：
getComputedStyle： IE9以上需要用cssFloat，其他標(biāo)準(zhǔn)的用float
currentStyle： IE8及以下可用styleFloat或者float。
比如height屬性：
假如未設(shè)置height值，標(biāo)準(zhǔn)瀏覽器里能計(jì)算出高度值，而currentStyle計(jì)算出來(lái)是auto。
上面的例子getComputedStyle是用鍵值去訪問(wèn)的，也可用getPropertyValue()去訪問(wèn)。（IE8、IE7不支持）
result = (window || document.defaultView).getComputedStyle(div2, null).getPropertyValue("float");
getBoundingClientRect()、getClientRects()
getBoundingClientRect()該方法獲得頁(yè)面中某個(gè)元素的上、右、下、左分別相對(duì)瀏覽器視窗的位置。getBoundingClientRect是DOM元素到瀏覽器可視范圍的距離（到瀏覽器頂部而不是文檔頂部）。該函數(shù)返回一個(gè)Object對(duì)象，該對(duì)象有6個(gè)屬性：top,lef,right,bottom,width,height；這里的top、left和css中的理解很相似，width、height是元素自身的寬高，但是right，bottom和css中的理解有點(diǎn)不一樣。right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離。
getClientRects()是返回一個(gè)ClientRectList集合。
var div1 = document.getElementById("div1");
var rects1 = div1.getClientRects();
var rects2 = div1.getBoundingClientRect();
console.log(rects1[0].top);
console.log(rects2.top);
|
