DOM-屬性和CSS · JavaScript半知半解

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