JavaScript學(xué)習(xí)筆記整理（9）：DOM
var image = document.getElmentById("myimage")
var imgurl = image.src //src屬性是圖片的URL
image.id === "myimage" // 判定要查找圖片的id
var f = document.forms[0]; //文檔中的第一個<form>
f.action = "submit.php"; //設(shè)置提交的URL
f.method = "POST"; //HTTP請求類型
元素節(jié)點提供四個方法來操作屬性。
getAttribute() //獲取屬性
setAttribute() //設(shè)置屬性
hasAttribute() //檢測屬性是否存在
removeAttribute() //刪除屬性
2.1 Element.getAttribute()
getAttribute()方法返回當(dāng)前元素節(jié)點的指定屬性。如果指定屬性不存在，則返回null。
<div id="top" name="div"></div>
var t = document.getElementById('top');
t.getAttribute('name'); //div
2.2 Element.setAttribute()
setAttribute()方法用于為當(dāng)前元素節(jié)點新增屬性。如果屬性已經(jīng)存在，則相當(dāng)于修改已存在的屬性。
t.setAttribute('name','top2');
2.3 Element.hasAttribute()
hasAttribute()方法返回一個布爾值，表示當(dāng)前元素節(jié)點是否包含指定的屬性。
t.hasAttribute('name') //true
2.4 Element.removeAttribute()
removeAttribute()方法用于從當(dāng)前元素節(jié)點移除屬性。
t.removeAttribute('name')
//<div id="top"></div>
3、數(shù)據(jù)集（dataset）屬性
在HTML5文檔中，任意以“data-”為前綴的小寫的屬性名字都是合法的。
HTML5還在Element對象上定義了dataset屬性。該屬性指代一個對象，它的各個屬性對應(yīng)于去掉前綴的data-屬性。因此dataset.x應(yīng)該保存data-x屬性的值。帶連字符的屬性對應(yīng)于駝峰命名法屬性名：data-jquery-test屬性就變成dataset.jqueryTest屬性。
<div id="top" data-tip="title"></div>
var t=document.getElementById('top');
t.dataset.tip //title
t.dataset.tip = 'title2'
注意：dataset屬性是元素的data-屬性的實時、雙向接口。設(shè)置或刪除dataset的一個屬性就等同于設(shè)置或移除對應(yīng)元素的data-屬性。
4、作為Attr節(jié)點的屬性
Node類型定義了attributes屬性。針對非Element對象的任何節(jié)點，該屬性為null。對于Element對象，attributes屬性是只讀的類數(shù)組對象，它代表元素的所有屬性。類似NodeList，attributes對象也是實時的，它可以用數(shù)字索引訪問，這意味著可以枚舉元素的所有屬性。而且，也可以用屬性名索引。
document.body.attributes[0] //<body>元素的第一個屬性
document.body.attributes.bgcolor // <body>元素的bgcolor屬性
document.body.attributes['ONLOAD'] // <body>元素的onload屬性。
屬性節(jié)點對象有name和value屬性，對應(yīng)該屬性的屬性名和屬性值，等同于nodeName屬性和nodeValue屬性。
<div id="top"></div>
var t = document.getElemntById('top');
t.attributes[0].name // "id"
t.attributes[0].nodeName // "id"
t.attributes[0].value // "top"
t.attributes[0].nodeValue // "top"
5、元素的內(nèi)容
5.1 作為HTML的元素內(nèi)容
讀取Element的innerHTML屬性作為字符串標(biāo)記返回那個元素的內(nèi)容。
<div id="top">內(nèi)容</div>
var t=document.getElementById('top');
t.innerHTML // 內(nèi)容
t.innerHTML = '內(nèi)容2';
//<div id="top">內(nèi)容2</div>
HTML5還標(biāo)準(zhǔn)化了outerHTML屬性。只有Element節(jié)點定義了outerHTML屬性，Document節(jié)點則無。
insertAdjacentHTML()
將任意的HTML標(biāo)記字符串插入到指定的元素“相鄰”位置。第一個參數(shù)為具有以下值之一的字符串：“beforebegin”、“afterbegin”、“beforeend”和“afterend”。標(biāo)記是該方法的第二個參數(shù)。
5.2 作為純文本的元素內(nèi)容
標(biāo)準(zhǔn)的方法是用Node的textContent屬性：
<div id="top"><p>內(nèi)容</p></div>
var t = document.getElementById('top');
t.textContent // 內(nèi)容
textContent屬性就是將指定元素的所有后代Text節(jié)點簡單的串聯(lián)在一起。
textContent屬性在IE中不支持。在IE中，可以用innerText屬性來替代。
5.3 作為Text節(jié)點的元素內(nèi)容
nodeValue屬性，保存Text節(jié)點的內(nèi)容。
下面的textContent()函數(shù)，它遞歸地遍歷元素的子節(jié)點，然后連接后代節(jié)點中所有的Text節(jié)點的文本。
function textContent(e){
var child,type,s=''; //s保存所有子節(jié)點的文本
for(child = e.firstChild; child !=null;child =child.nextSibling){
type = child.nodeType;
if(type === 3 || type === 4) //Text和CDATASection節(jié)點
{
s += child.nodeValue;
}else if( type === 1){
s += textContent(child);
}
return s;
}
}
CDATASection節(jié)點，是在XML文檔中的，它是Text的子類型，代表了CDATA段的內(nèi)容。
二、CSS
層疊樣式表（Cascading Style Sheet，CSS）是一種指定HTML文檔視覺表現(xiàn)的標(biāo)準(zhǔn)。
2.1 腳本化內(nèi)聯(lián)樣式
更改單獨的文檔元素的style屬性是腳本化CSS最直接了當(dāng)?shù)姆椒ā?/p>
style屬性的值并不是字符串，而是一個CSSStyleDeclaration對象。該style對象的JavaScript屬性代表了HTML代碼中通過style指定的CSS屬性。
<div id="top"></div>
var t = document.getElementById('top');
t.style.fontSize = '15px';
t.style.color = 'red';
//或
t.setAttribute('style','background:red;');
注意：CSSStyleDeclaration對象中的屬性名和實際的CSS屬性名有所區(qū)別。如果一個CSS屬性名包含一個或多個連字符，CSSStyleDeclaration屬性名的格式應(yīng)該是移除連字符，將每個連字符后面緊跟著的字母大寫。比如：CSS屬性border-left-width的值在JavaScript中通過borderLeftWidth屬性進(jìn)行訪問。
另外，當(dāng)一個CSS屬性（如float）在JavaScript中對應(yīng)的名字是保留字時，在之前加“css”前綴來創(chuàng)建合法的CSSStyleDeclaration名字。
float -- cssFloat
注意：所有的定位屬性都需要包含單位。
t.style.left = 300 //錯誤
t.style.left = '300px' //正確
style對象的cssText也可以用來讀寫或刪除整個style屬性。
t.style.cssText
t.style.cssText = 'background:red';
style對象的以下三個方法，用來讀寫行內(nèi)CSS規(guī)則。
setProperty(propertyName,value)：設(shè)置某個CSS屬性。
getPropertyValue(propertyName)：讀取某個CSS屬性。
removeProperty(propertyName)：刪除某個CSS屬性。
這三個方法的第一個參數(shù)，都是CSS屬性名，且不用改寫連詞線。
t.style.setProperty('background-color','red');
t.style.getPropertyValue('background-color');
t.style.removeProperty('background-color');
上面的方法都是只能讀寫內(nèi)聯(lián)樣式（用style來設(shè)置），如果要獲取引用的樣式或者偽元素樣式呢？
這時就要用到window對象的getComputedStyle()方法了！
window.getComputedStyle()
getComputedStyle()是瀏覽器窗口對象的方法，可用來獲得一個元素的計算樣式。此方法需要兩個參數(shù)，第一個參數(shù)是要獲取其計算樣式的元素，第二個參數(shù)也是必需的，通常是null或空字符串，但它也可以是命名CSS偽對象的字符串，如：“:before”，“:after”，“:first-line”或者“:first-letter”。
getComputedStyle()方法返回的是一個CSSStyleDeclaration對象，它代表了應(yīng)用在指定元素（或偽對象）上的所有樣式。
<style>
#top{ line-height:30px;}
#top:before{content:'before';color:red};
</style>
<div id="top" style="background:red"></div>
var t = document.getElementById('top');
window.getComputedStyle(t,null).lineHeight //30px
window.getComputedStyle(t,':before').content // "before"
此外，還可以用window.getComputedStyle對象的getPropertyValue()方法，獲取屬性。
window.getComputedStyle(t,null).getPropertyValue('line-height'); //30px，不需使用連字符
計算樣式的CSSStyleDeclaration對象和表示內(nèi)聯(lián)樣式的對象的區(qū)別：
- 計算樣式的屬性是只讀的
- 計算樣式的值是絕對值。類似百分比和點之類相對的單位將全部轉(zhuǎn)換為絕對值。
- 不計算符合屬性，只基于最基礎(chǔ)的屬性。比如：不要查詢margin屬性，用marginTop等
- 計算樣式的cssText屬性未定義。
在IE中，每個HTML有自己的currentStyle屬性，它的值也是一個CSSStyleDeclaration對象。
function getStyle(dom, attr) {
var value = dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
return parseFloat(value);
}
getStyle(t,'lineHeight'); //30
2.2 腳本化CSS類
通過改變或添加HTML的class屬性值，也是改變內(nèi)聯(lián)style屬性的一個方法。
由于標(biāo)識符class在JavaScript中是保留字，所以HTML屬性class在JavaScript代碼中使用className的JavaScript代碼。
t.className = 'attention'; //設(shè)置class屬性
t.className += 'attention2'; //添加class屬性
t.className = ''; //刪除全部class
t.className = t.className.replace('attention2',''); //刪除名為attention2的class
在HTML5中，每個元素都定義了classList屬性，該屬性值是DOMTokenList對象：一個只讀的類數(shù)組對象，它包含元素的單獨類名，而且是實時的。它有四個方法：
element.classList.add() //添加
element.classList.remove() //刪除
element.classList.contains() //是否包含
element.classList.toggle() //如果不存在類名就添加，否則刪除
2.3 腳本化樣式表
在腳本化樣式表時，我們會碰到兩類需要使用的對象。
第一類是元素對象，由<style>和<link>元素表示，兩種元素包含或引用樣式表。
第二類是CSSStyleSheet對象，它表示樣式表本身。 document.styleSheets 屬性是一個只讀的類數(shù)組對象，它包含CSSStyleSheet對象，表示與文檔關(guān)聯(lián)在一起的樣式表。
2.3.1 獲取樣式表
StyleSheet對象是一個類數(shù)組對象。
var sheets = document.styleSheets;
var s = document.styleSheets[0];
當(dāng)然，你也可以通過選擇器獲取
<style id="styleElement">
body{ background:red }
</style>
document.querySelector('#styleElement').sheet
//等同于 document.styleSheets[0]
注意：styleSheets數(shù)組包含link節(jié)點和style的樣式表
2.3.2開啟和關(guān)閉樣式表
<style>、<link>元素和CSSStyleSheet對象都定義了一個在JavaScript中可以設(shè)置和查詢的disabled屬性。顧名思義，如果disabled屬性為true，樣式表就被瀏覽器關(guān)閉并忽略。
document.styleSheets[0].disabled = true; //關(guān)閉第一張樣式表
//或
var s = document.querySelectorAll('styleElement');
s[0].disabled = true; //通過選擇器選擇樣式表
注意：disabled屬性只能在JavaScript中設(shè)置，不能在HTML語句中設(shè)置。
2.3.3 查詢、插入和刪除樣式表
document.styleSheets[]數(shù)組的元素是CSSStyleSheet對象。CSSStyleSheet對象有一個CSSRules[]屬性，指向一個類數(shù)組對象，它包含樣式表的所有規(guī)則：
document.styleSheets[0].cssRules[0]
在IE中使用不同的屬性名rules代替CSSRules。
CSSRules[]或rules[]數(shù)組的元素為CSSRule對象。兩者還是有區(qū)別的：在標(biāo)準(zhǔn)API中，CSSRule對象包含所有CSS規(guī)則，包含@import和@page等指令；但在IE中，rules[]數(shù)組只包含樣式表中實際存在的樣式規(guī)則。
CSSRule對象有兩個屬性使用。
selectText是規(guī)則的CSS選擇器，它引用一個描述與選擇器相關(guān)聯(lián)的樣式的可寫CSSStyleDeclaration對象。
cssText屬性來獲得規(guī)則的文本表示形式。
var s = document.querySelector('#styleElement').sheet; 或 document.styleSheets[0];
s.cssRules[0].cssText //body { background: red; }
s.cssRules[0].selectorText ///body
每條CSS規(guī)則還有一個style屬性，指向一個對象，用來讀寫具體的CSS屬性。
s.cssRules[0].style.background //red
s.cssRules[0].style.background = 'blue';
styleSheets對象還有兩個方法 insertRule() 和 deleteRule() 方法來添加和刪除規(guī)則。不過，在IE中，并不支持上面兩個方法，不過有 addRule() 和 removeRule() 方法。
insertRule方法的第一個參數(shù)是表示CSS規(guī)則的字符串，第二個參數(shù)是該規(guī)則在cssRules對象的插入位置。deleteRule方法的參數(shù)是該條規(guī)則在cssRules對象中的位置。
s.insertRule(' h1 { color:blue; }',0); //h1元素默認(rèn)是藍(lán)色
s.deleteRule(1);
//IE
s.addRule('h1','color:blue',s.cssRules.length);
s.removeRule(1);
2.3.4 創(chuàng)建新樣式表
document.createElement('style');
//或
var l = document.createElement('link');
l.setAttribute('rel', 'stylesheet');
l.setAttribute('type', 'text/css');
l.setAttribute('href', 'example.css');
document.head.appendChild(l);
document.head.appendChild(linkElm);
//IE
document.createStyleSheet()
2.4 CSS事件
在HTML5中，提供了CSS動畫事件，讓我們可以監(jiān)聽動畫的進(jìn)程。
2.4.1 transitionEnd事件
CSS的過渡效果（transition）結(jié)束后，觸發(fā)transitionEnd事件。
function onTransitionEnd(elem, handler,capture) {
elem.addEventListener('transitionend', handler,capture);
elem.addEventListener('webkitTransitionEnd', handler,capture);
elem.addEventListener('mozTransitionEnd', handler,capture);
};
2.4.2 animationstart事件，animationend事件，animationiteration事件
CSS動畫有以下三個事件：
- animationstart事件：動畫開始時觸發(fā)。
- animationend事件：動畫結(jié)束時觸發(fā)。
- animationiteration事件：開始新一輪動畫循環(huán)時觸發(fā)。如果animation-iteration-count屬性等于1，該事件不觸發(fā)，即只播放一輪的CSS動畫，不會觸發(fā)animationiteration事件。
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);
當(dāng)然，在實際使用過程中，需要加上前綴。
element.addEventListener('webkitAnimationStart',listener,false);
我們還可以控制動畫的狀態(tài)。
animation-play-state屬性可以控制動畫的狀態(tài)（暫停/播放），該屬性需求加上瀏覽器前綴。
element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";
更多建議：