JavaScript學(xué)習(xí)筆記整理（9）：DOM

2018-06-19 12:00 更新
一、屬性

HTML元素由一個(gè)標(biāo)簽和一組稱(chēng)為屬性（attribute）的名/值對(duì)組成。

1、HTML屬性作為Element的屬性
表示HTML文檔元素的HTMLElement對(duì)象定義了讀寫(xiě)屬性，它們映射了元素的HTML屬性。

HTMLElement定義了通用的HTTP屬性（如id、標(biāo)題lang和dir）的屬性，以及事件處理程序?qū)傩裕ㄈ鏾nclick）。

特定的Element子類(lèi)型為其元素定義了特定的屬性。例如：
var image = document.getElmentById("myimage")  
var imgurl = image.src  //src屬性是圖片的URL  
image.id === "myimage"  // 判定要查找圖片的id
同樣的，我們也可以為一個(gè)<form>元素設(shè)置表單提交的屬性。
var f = document.forms[0]; //文檔中的第一個(gè)<form>
f.action = "submit.php"; //設(shè)置提交的URL
f.method = "POST";  //HTTP請(qǐng)求類(lèi)型

HTML屬性名不區(qū)分大小寫(xiě)，但是JavaScript屬性名則大小寫(xiě)敏感。從HTML屬性名轉(zhuǎn)換到JavaScript屬性名應(yīng)該采用小寫(xiě)。但是，如果屬性名包含不止一個(gè)單詞，則除了第一個(gè)單詞以外的單詞的首字母大寫(xiě)，比如：zIndex、backgroundColor

注意：有些HTML屬性名在JavaScript中是保留字。比如：HTML的class和for屬性，在JavaScript中變?yōu)閏lassName和htmlFor屬性。

2、獲取和設(shè)置非標(biāo)準(zhǔn)HTML屬性

元素節(jié)點(diǎn)提供四個(gè)方法來(lái)操作屬性。

getAttribute()  //獲取屬性
setAttribute()  //設(shè)置屬性
hasAttribute()  //檢測(cè)屬性是否存在
removeAttribute()  //刪除屬性


2.1 Element.getAttribute()

getAttribute()方法返回當(dāng)前元素節(jié)點(diǎn)的指定屬性。如果指定屬性不存在，則返回null。

<div id="top" name="div"></div>

var t = document.getElementById('top');
t.getAttribute('name');  //div


2.2 Element.setAttribute()

setAttribute()方法用于為當(dāng)前元素節(jié)點(diǎn)新增屬性。如果屬性已經(jīng)存在，則相當(dāng)于修改已存在的屬性。

t.setAttribute('name','top2');


2.3 Element.hasAttribute()

hasAttribute()方法返回一個(gè)布爾值，表示當(dāng)前元素節(jié)點(diǎn)是否包含指定的屬性。

t.hasAttribute('name')  //true


2.4 Element.removeAttribute()

removeAttribute()方法用于從當(dāng)前元素節(jié)點(diǎn)移除屬性。

t.removeAttribute('name')
//<div id="top"></div>


3、數(shù)據(jù)集（dataset）屬性

在HTML5文檔中，任意以“data-”為前綴的小寫(xiě)的屬性名字都是合法的。


HTML5還在Element對(duì)象上定義了dataset屬性。該屬性指代一個(gè)對(duì)象，它的各個(gè)屬性對(duì)應(yīng)于去掉前綴的data-屬性。因此dataset.x應(yīng)該保存data-x屬性的值。帶連字符的屬性對(duì)應(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í)時(shí)、雙向接口。設(shè)置或刪除dataset的一個(gè)屬性就等同于設(shè)置或移除對(duì)應(yīng)元素的data-屬性。


4、作為Attr節(jié)點(diǎn)的屬性

Node類(lèi)型定義了attributes屬性。針對(duì)非Element對(duì)象的任何節(jié)點(diǎn)，該屬性為null。對(duì)于Element對(duì)象，attributes屬性是只讀的類(lèi)數(shù)組對(duì)象，它代表元素的所有屬性。類(lèi)似NodeList，attributes對(duì)象也是實(shí)時(shí)的，它可以用數(shù)字索引訪問(wèn)，這意味著可以枚舉元素的所有屬性。而且，也可以用屬性名索引。

document.body.attributes[0]  //<body>元素的第一個(gè)屬性
document.body.attributes.bgcolor // <body>元素的bgcolor屬性
document.body.attributes['ONLOAD']  // <body>元素的onload屬性。

屬性節(jié)點(diǎn)對(duì)象有name和value屬性，對(duì)應(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)記返回那個(gè)元素的內(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é)點(diǎn)定義了outerHTML屬性，Document節(jié)點(diǎn)則無(wú)。


insertAdjacentHTML()

將任意的HTML標(biāo)記字符串插入到指定的元素“相鄰”位置。第一個(gè)參數(shù)為具有以下值之一的字符串：“beforebegin”、“afterbegin”、“beforeend”和“afterend”。標(biāo)記是該方法的第二個(gè)參數(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é)點(diǎn)簡(jiǎn)單的串聯(lián)在一起。


textContent屬性在IE中不支持。在IE中，可以用innerText屬性來(lái)替代。


5.3 作為T(mén)ext節(jié)點(diǎn)的元素內(nèi)容

nodeValue屬性，保存Text節(jié)點(diǎn)的內(nèi)容。

下面的textContent()函數(shù)，它遞歸地遍歷元素的子節(jié)點(diǎn)，然后連接后代節(jié)點(diǎn)中所有的Text節(jié)點(diǎn)的文本。

function textContent(e){
  var child,type,s='';  //s保存所有子節(jié)點(diǎn)的文本
  for(child = e.firstChild; child !=null;child =child.nextSibling){
    type = child.nodeType;
    if(type === 3 || type === 4) //Text和CDATASection節(jié)點(diǎn)
    {
      s += child.nodeValue;
    }else if( type === 1){
      s += textContent(child);
    }
    return s;
  }
}


CDATASection節(jié)點(diǎn)，是在XML文檔中的，它是Text的子類(lèi)型，代表了CDATA段的內(nèi)容。


二、CSS


層疊樣式表（Cascading Style Sheet，CSS）是一種指定HTML文檔視覺(jué)表現(xiàn)的標(biāo)準(zhǔn)。


2.1 腳本化內(nèi)聯(lián)樣式

更改單獨(dú)的文檔元素的style屬性是腳本化CSS最直接了當(dāng)?shù)姆椒ā?/p>


style屬性的值并不是字符串，而是一個(gè)CSSStyleDeclaration對(duì)象。該style對(duì)象的JavaScript屬性代表了HTML代碼中通過(guò)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對(duì)象中的屬性名和實(shí)際的CSS屬性名有所區(qū)別。如果一個(gè)CSS屬性名包含一個(gè)或多個(gè)連字符，CSSStyleDeclaration屬性名的格式應(yīng)該是移除連字符，將每個(gè)連字符后面緊跟著的字母大寫(xiě)。比如：CSS屬性border-left-width的值在JavaScript中通過(guò)borderLeftWidth屬性進(jìn)行訪問(wèn)。

另外，當(dāng)一個(gè)CSS屬性（如float）在JavaScript中對(duì)應(yīng)的名字是保留字時(shí)，在之前加“css”前綴來(lái)創(chuàng)建合法的CSSStyleDeclaration名字。

float --  cssFloat

注意：所有的定位屬性都需要包含單位。

t.style.left = 300  //錯(cuò)誤

t.style.left = '300px' //正確

style對(duì)象的cssText也可以用來(lái)讀寫(xiě)或刪除整個(gè)style屬性。

t.style.cssText

t.style.cssText = 'background:red';

style對(duì)象的以下三個(gè)方法，用來(lái)讀寫(xiě)行內(nèi)CSS規(guī)則。  

setProperty(propertyName,value)：設(shè)置某個(gè)CSS屬性。 
getPropertyValue(propertyName)：讀取某個(gè)CSS屬性。 
removeProperty(propertyName)：刪除某個(gè)CSS屬性。

這三個(gè)方法的第一個(gè)參數(shù)，都是CSS屬性名，且不用改寫(xiě)連詞線。

t.style.setProperty('background-color','red');
t.style.getPropertyValue('background-color');
t.style.removeProperty('background-color');

上面的方法都是只能讀寫(xiě)內(nèi)聯(lián)樣式（用style來(lái)設(shè)置），如果要獲取引用的樣式或者偽元素樣式呢？

這時(shí)就要用到window對(duì)象的getComputedStyle()方法了！


window.getComputedStyle()

getComputedStyle()是瀏覽器窗口對(duì)象的方法，可用來(lái)獲得一個(gè)元素的計(jì)算樣式。此方法需要兩個(gè)參數(shù)，第一個(gè)參數(shù)是要獲取其計(jì)算樣式的元素，第二個(gè)參數(shù)也是必需的，通常是null或空字符串，但它也可以是命名CSS偽對(duì)象的字符串，如：“:before”，“:after”，“:first-line”或者“:first-letter”。


getComputedStyle()方法返回的是一個(gè)CSSStyleDeclaration對(duì)象，它代表了應(yīng)用在指定元素（或偽對(duì)象）上的所有樣式。

<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對(duì)象的getPropertyValue()方法，獲取屬性。

window.getComputedStyle(t,null).getPropertyValue('line-height');  //30px，不需使用連字符


計(jì)算樣式的CSSStyleDeclaration對(duì)象和表示內(nèi)聯(lián)樣式的對(duì)象的區(qū)別：

  • 計(jì)算樣式的屬性是只讀的
  • 計(jì)算樣式的值是絕對(duì)值。類(lèi)似百分比和點(diǎn)之類(lèi)相對(duì)的單位將全部轉(zhuǎn)換為絕對(duì)值。
  • 不計(jì)算符合屬性，只基于最基礎(chǔ)的屬性。比如：不要查詢(xún)margin屬性，用marginTop等
  • 計(jì)算樣式的cssText屬性未定義。


在IE中，每個(gè)HTML有自己的currentStyle屬性，它的值也是一個(gè)CSSStyleDeclaration對(duì)象。

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類(lèi)

通過(guò)改變或添加HTML的class屬性值，也是改變內(nèi)聯(lián)style屬性的一個(gè)方法。

由于標(biāo)識(shí)符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中，每個(gè)元素都定義了classList屬性，該屬性值是DOMTokenList對(duì)象：一個(gè)只讀的類(lèi)數(shù)組對(duì)象，它包含元素的單獨(dú)類(lèi)名，而且是實(shí)時(shí)的。它有四個(gè)方法：

element.classList.add()   //添加
element.classList.remove()  //刪除
element.classList.contains()  //是否包含
element.classList.toggle()  //如果不存在類(lèi)名就添加，否則刪除


2.3 腳本化樣式表

在腳本化樣式表時(shí)，我們會(huì)碰到兩類(lèi)需要使用的對(duì)象。

第一類(lèi)是元素對(duì)象，由<style>和<link>元素表示，兩種元素包含或引用樣式表。

第二類(lèi)是CSSStyleSheet對(duì)象，它表示樣式表本身。 document.styleSheets 屬性是一個(gè)只讀的類(lèi)數(shù)組對(duì)象，它包含CSSStyleSheet對(duì)象，表示與文檔關(guān)聯(lián)在一起的樣式表。


2.3.1 獲取樣式表

StyleSheet對(duì)象是一個(gè)類(lèi)數(shù)組對(duì)象。

var sheets = document.styleSheets;
var s = document.styleSheets[0];

當(dāng)然，你也可以通過(guò)選擇器獲取

<style id="styleElement">   
  body{ background:red }  
</style>

document.querySelector('#styleElement').sheet  
//等同于 document.styleSheets[0]

注意：styleSheets數(shù)組包含link節(jié)點(diǎn)和style的樣式表


2.3.2開(kāi)啟和關(guān)閉樣式表

<style>、<link>元素和CSSStyleSheet對(duì)象都定義了一個(gè)在JavaScript中可以設(shè)置和查詢(xún)的disabled屬性。顧名思義，如果disabled屬性為true，樣式表就被瀏覽器關(guān)閉并忽略。

document.styleSheets[0].disabled = true; //關(guān)閉第一張樣式表
//或
var s = document.querySelectorAll('styleElement');
s[0].disabled = true; //通過(guò)選擇器選擇樣式表

注意：disabled屬性只能在JavaScript中設(shè)置，不能在HTML語(yǔ)句中設(shè)置。


2.3.3 查詢(xún)、插入和刪除樣式表


document.styleSheets[]數(shù)組的元素是CSSStyleSheet對(duì)象。CSSStyleSheet對(duì)象有一個(gè)CSSRules[]屬性，指向一個(gè)類(lèi)數(shù)組對(duì)象，它包含樣式表的所有規(guī)則：

document.styleSheets[0].cssRules[0]

在IE中使用不同的屬性名rules代替CSSRules。

CSSRules[]或rules[]數(shù)組的元素為CSSRule對(duì)象。兩者還是有區(qū)別的：在標(biāo)準(zhǔn)API中，CSSRule對(duì)象包含所有CSS規(guī)則，包含@import和@page等指令；但在IE中，rules[]數(shù)組只包含樣式表中實(shí)際存在的樣式規(guī)則。


CSSRule對(duì)象有兩個(gè)屬性使用。

selectText是規(guī)則的CSS選擇器，它引用一個(gè)描述與選擇器相關(guān)聯(lián)的樣式的可寫(xiě)CSSStyleDeclaration對(duì)象。

cssText屬性來(lái)獲得規(guī)則的文本表示形式。

var s = document.querySelector('#styleElement').sheet; 或 document.styleSheets[0];

s.cssRules[0].cssText  //body { background: red; }
s.cssRules[0].selectorText  ///body

每條CSS規(guī)則還有一個(gè)style屬性，指向一個(gè)對(duì)象，用來(lái)讀寫(xiě)具體的CSS屬性。

s.cssRules[0].style.background   //red
s.cssRules[0].style.background = 'blue';

styleSheets對(duì)象還有兩個(gè)方法 insertRule() 和 deleteRule() 方法來(lái)添加和刪除規(guī)則。不過(guò)，在IE中，并不支持上面兩個(gè)方法，不過(guò)有 addRule() 和 removeRule() 方法。

insertRule方法的第一個(gè)參數(shù)是表示CSS規(guī)則的字符串，第二個(gè)參數(shù)是該規(guī)則在cssRules對(duì)象的插入位置。deleteRule方法的參數(shù)是該條規(guī)則在cssRules對(duì)象中的位置。

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動(dòng)畫(huà)事件，讓我們可以監(jiān)聽(tīng)動(dòng)畫(huà)的進(jìn)程。


2.4.1 transitionEnd事件

CSS的過(guò)渡效果（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動(dòng)畫(huà)有以下三個(gè)事件：

  • animationstart事件：動(dòng)畫(huà)開(kāi)始時(shí)觸發(fā)。 
  • animationend事件：動(dòng)畫(huà)結(jié)束時(shí)觸發(fā)。 
  • animationiteration事件：開(kāi)始新一輪動(dòng)畫(huà)循環(huán)時(shí)觸發(fā)。如果animation-iteration-count屬性等于1，該事件不觸發(fā)，即只播放一輪的CSS動(dòng)畫(huà)，不會(huì)觸發(fā)animationiteration事件。

element.addEventListener("animationstart", listener, false);  
element.addEventListener("animationend", listener, false);  
element.addEventListener("animationiteration", listener, false);

當(dāng)然，在實(shí)際使用過(guò)程中，需要加上前綴。

element.addEventListener('webkitAnimationStart',listener,false);

我們還可以控制動(dòng)畫(huà)的狀態(tài)。

animation-play-state屬性可以控制動(dòng)畫(huà)的狀態(tài)（暫停/播放），該屬性需求加上瀏覽器前綴。

element.style.webkitAnimationPlayState = "paused"; 
element.style.webkitAnimationPlayState = "running";


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)