創(chuàng)建元素：
document.createElement()
使用document.createElement()可以創(chuàng)建新元素。這個(gè)方法只接受一個(gè)參數(shù)，即要?jiǎng)?chuàng)建元素的標(biāo)簽名。這個(gè)標(biāo)簽名在HTML文檔中不區(qū)分大小寫(xiě)，在XHTML中區(qū)分大小寫(xiě)。
var div = document.createElement("div");使用createElement()方法創(chuàng)建新元素的同時(shí)，也為新元素設(shè)置了ownerDocument屬性，可以操作元素的特性。
div.id = "myDiv";div.className = "div1";此時(shí)，新元素尚未被添加到文檔樹(shù)中，因此設(shè)置各種特性均不會(huì)影響瀏覽器的顯示。要添加到文檔樹(shù)，可用appendChild()、insertBefore()、replaceChild()。（稍后講到）
document.body.appendChild(div);當(dāng)把元素添加到文檔樹(shù)中后，伺候鬼這個(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ì)有空格。
（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)剛剛被建立,還沒(méi)有被插入到DOM樹(shù)中,則該節(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)，沒(méi)有的話返回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)的引用，沒(méi)有返回nulllastChild返回node的子節(jié)點(diǎn)中的最后一個(gè)節(jié)點(diǎn)的引用，沒(méi)有返回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>只算元素，不算文本節(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)
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);自定義元素屬性選擇
<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)子樹(shù)內(nèi)與之相匹配的第一個(gè)Element節(jié)點(diǎn)。如果沒(méi)有匹配的節(jié)點(diǎn)，則返回null。
querySelectorAll
返回一個(gè)包含節(jié)點(diǎn)子樹(shù)內(nèi)所有與之相匹配的Element節(jié)點(diǎn)列表，如果沒(méi)有相匹配的，則返回一個(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)元素,可以這樣寫(xiě)：
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`的引用，沒(méi)有因?yàn)閯h除了`p`標(biāo)簽而使`notLive`的結(jié)果發(fā)生變化。
getElementById()
返回一個(gè)匹配特定 ID的元素。id是大小寫(xiě)敏感的字符串，代表了所要查找的元素的唯一ID，如果沒(méi)有則返回null。
如果新建一個(gè)元素，還沒(méi)有插入到文檔中，則不能通過(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。指定的元素的子樹(shù)會(huì)被搜索，包括元素自己。返回的 list 是實(shí)時(shí)的（live collection），意味著它會(huì)隨著DOM樹(shù)的變化自動(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用空格分開(kāi)。
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ò)
setAttribute()
添加一個(gè)新屬性（attribute）到元素上，或改變?cè)厣弦呀?jīng)存在的屬性的值。
當(dāng)在 HTML 文檔中的 HTML 元素上調(diào)用 setAttribute() 方法時(shí)，該方法會(huì)將其屬性名稱（attribute name）參數(shù)小寫(xiě)化。
如果指定的屬性已經(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()添加的不生效；如果沒(méi)有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);
addEventListener()
addEventListener()將指定的事件監(jiān)聽(tīng)器注冊(cè)到目標(biāo)對(duì)象上，當(dāng)目標(biāo)對(duì)象觸發(fā)制定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)觸發(fā)。目標(biāo)對(duì)象可以是 文檔上的元素、 document、 window 或者XMLHttpRequest(比如onreadystatechange事件)。
IE8及以下不支持此方法且只有事件冒泡沒(méi)有事件捕獲。IE9開(kāi)始支持此方法，也就有了事件捕獲。
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è)元素沒(méi)有捕獲和冒泡的區(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);
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)的用floatcurrentStyle： 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);
聯(lián)系客服
