快捷導(dǎo)航

JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4

更新時(shí)間：2015年08月14日 15:14:41 投稿：mrr

DOM(Document Object Model)，即“文檔對象模型”?；谡Z義的邏輯結(jié)構(gòu)，DOM將網(wǎng)頁內(nèi)的元素與內(nèi)容呈現(xiàn)為一個(gè)清晰、易讀的樹狀模型，下面小編把最近整理有關(guān)javascript筆記之DOM基礎(chǔ)分享給大家，有需要的朋友可以參考下

DOM的發(fā)展，與WEB標(biāo)準(zhǔn)化的大趨勢相關(guān)甚密。只有基于正確的語義邏輯，DOM才能正確地發(fā)揮其功用。如今，正確的語義結(jié)構(gòu)、表現(xiàn)與內(nèi)容分離等要求，都已經(jīng)成為網(wǎng)頁設(shè)計(jì)中的基本要求。因此，在網(wǎng)頁前端開發(fā)中，DOM的存在，無疑是為表現(xiàn)層、行為層甚至內(nèi)容層面的連接提供了一個(gè)絕佳的API，成為熱門的Ajax應(yīng)用中不可或缺的組成部分。

一、平穩(wěn)退化

1、概念

早期，在未使用JavaScript之前，網(wǎng)頁中的內(nèi)容可以正常顯示出來，用戶可以通過外設(shè)（如鼠標(biāo)）操控瀏覽到相關(guān)內(nèi)容，這種瀏覽體驗(yàn)對用戶而言可能并不理想。

根據(jù)這個(gè)需求，內(nèi)容的提供方就有了合理化目標(biāo)——那就是在不影響內(nèi)容展示的前提下，使用JavaScript來改善用戶體驗(yàn)，提高用戶粘性。

在這個(gè)標(biāo)目中，有個(gè)非常明顯的條件，就是不能影響內(nèi)容的正常展示，換言之，即使用戶的瀏覽器不支持JavaScript，也能保證用戶可以正常瀏覽。

2、方法

①將JavaScript與HTML分離

這是首先應(yīng)該想到的，讓兩者分離，HTML就像回到早期未使用JavaScript之前的狀態(tài)，干爽如初啊。

譬如將element.onClick之類的事件處理函數(shù)寫進(jìn)JavaScript中，與某函數(shù)進(jìn)行綁定。

②對JavaScript中的方法進(jìn)行檢測

之前提到的一些方法，如getElementById之類，都需要去判定該方法是否支持。

<script>
if(! document.getElementById) return false;
</script>

通過if語句這種方式來檢測是否支持該方法，如果支持，可以繼續(xù)，不支持，直接返回false，這樣就沒必要耽誤功夫了，也起到了性能優(yōu)化的作用。

二、綁定onload事件

1、綁定緣由

一些函數(shù)需要在頁面加載完全之后才能有效執(zhí)行，我們需要將函數(shù)綁定到window.onload這個(gè)事件上。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客園</title>
<script>
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].firstChild.nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
window.onload = tagAttribute;
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時(shí)光飛逝，莫讓網(wǎng)絡(luò)蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的隨筆">我的隨筆</li>
<li></li>
</ul>
</div>
</body>
</html>

在上面這個(gè)實(shí)例中，如果不綁定window.onload，執(zhí)行函數(shù)tagAttribute將會(huì)毫無意義。

還需要注意一點(diǎn)，綁定的是函數(shù)，而不是這個(gè)函數(shù)的值，所以后面不帶圓括號。

2、綁定方法

如果你只需要綁定一個(gè)函數(shù)，那么上面的方法完全可以輕松實(shí)現(xiàn)你的目的。

window.onload = myFunction;

如果是多個(gè)，也許你會(huì)去一個(gè)個(gè)的綁定，可是，這樣做的結(jié)果是只有最后一個(gè)函數(shù)才會(huì)被有效執(zhí)行，關(guān)于這一點(diǎn)其實(shí)很好理解。

我們的目的是，不管頁面中加載完畢時(shí)執(zhí)行多少個(gè)函數(shù)，這些函數(shù)都可以有效執(zhí)行，也就是說，這些函數(shù)都被成功綁定window.onload事件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客園</title>
<script>
function addOnLoadEvent(func){
  var oldonload = window.onload; // 把現(xiàn)有的window.onload事件處理函數(shù)的值存儲(chǔ)到變量oldonload
  if(typeof window.onload != 'function'){ // 如果這個(gè)處理函數(shù)上還沒有綁定任何函數(shù)
    window.onload = func; // 將這個(gè)函數(shù)綁定到window.onload事件
  }else{
    window.onload = function(){ // 如果這個(gè)處理函數(shù)已經(jīng)綁定了函數(shù)，就把這個(gè)函數(shù)追加到指令的末尾
      oldonload();
      func();
    }
}
}
//自定義函數(shù) tagAttribute 
//功能：獲取li標(biāo)簽中的title值
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].childNodes[0].nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
addOnLoadEvent(tagAttribute); // 為tagAttribute函數(shù)綁定到window.onload事件
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時(shí)光飛逝，莫讓網(wǎng)絡(luò)蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的隨筆">我的隨筆</li>
<li></li>
</ul>
</div>
</body>
</html>

javascript學(xué)習(xí)筆記 Dom知識(shí)點(diǎn)總結(jié)

JavaScript的window對象對應(yīng)著瀏覽器窗口本身，因此這個(gè)對象的屬性和方法統(tǒng)稱為BOM（瀏覽器對象模型），如window.open(),window.location等。

JavaScript的document對象是指文檔對象模型，主要是處理網(wǎng)頁內(nèi)容。DOM（Document Object Model）即文檔對象模型，是針對 HTML 和 XML 文檔的 API 。字母D指document（文檔），字母O指object（對象），字母指Model（模型）。DOM 描繪了一個(gè)層次化的節(jié)點(diǎn)樹。節(jié)點(diǎn)表示一個(gè)連接點(diǎn)，文檔是由節(jié)點(diǎn)構(gòu)成的集合，DOM的節(jié)點(diǎn)主要分為三類：元素節(jié)點(diǎn)、文本節(jié)點(diǎn)（不是文本內(nèi)容）、屬性節(jié)點(diǎn)。

獲取節(jié)點(diǎn)的名稱和類型

1.nodeName屬性用來獲取節(jié)點(diǎn)的名稱，文本節(jié)點(diǎn)返回#text,元素節(jié)點(diǎn)返回標(biāo)簽名稱（此時(shí)等價(jià)于tagName）。語法：目標(biāo)節(jié)點(diǎn).nodeName
2.nodeType屬性用來獲取節(jié)點(diǎn)的類型，元素節(jié)點(diǎn)：1，屬性節(jié)點(diǎn)：2，文本節(jié)點(diǎn)：3。語法：目標(biāo)節(jié)點(diǎn).nodeType
3.nodeValue屬性用來獲取和設(shè)置節(jié)點(diǎn)的值。元素節(jié)點(diǎn)返回 null 。語法：目標(biāo)節(jié)點(diǎn).nodeValue

獲取元素節(jié)點(diǎn)的方式

1. document.getElementById

通過ID查找，返回唯一元素節(jié)點(diǎn)

2. document.getElementsByName

通過name屬性查找，返回元素節(jié)點(diǎn)數(shù)組

3. document.getElementsByTagName

通過標(biāo)簽名稱查找，返回元素節(jié)點(diǎn)數(shù)組

以下三種方法屬于HTML5 DOM，并非所有瀏覽器支持（如某些低版本IE就不支持），屬于高級方法

4. document.getElementsByClassName

通過class屬性的類名查找，返回元素節(jié)點(diǎn)數(shù)組

5. document.querySelector

通過selector條件獲取元素節(jié)點(diǎn)，只返回符合條件的第一個(gè)元素節(jié)點(diǎn)

6. document.querySelectorAll

通過selector條件獲取元素節(jié)點(diǎn)，返回所有符合條件的元素節(jié)點(diǎn)數(shù)組，多條件使用逗號分隔，表示要查找的元素必須符合所有逗號分隔的條件，如果一個(gè)元素只符合逗號分隔的條件中的一個(gè)，則不會(huì)被返回

小結(jié)： getElementById和querySelector只返回一個(gè)元素節(jié)點(diǎn)，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素節(jié)點(diǎn)數(shù)組

節(jié)點(diǎn)指針

1.childNodes屬性用來獲取元素節(jié)點(diǎn)的子節(jié)點(diǎn)，返回節(jié)點(diǎn)數(shù)組。語法：父節(jié)點(diǎn).childNodes;

2.children屬性可以用來獲取忽略了空白節(jié)點(diǎn)的有效節(jié)點(diǎn)（在某些瀏覽器上，空白符或換行符也是一個(gè)文本節(jié)點(diǎn)）。語法：父節(jié)點(diǎn).children;

3.firstChild屬性可以用來獲取元素的第一個(gè)子節(jié)點(diǎn)，等價(jià)于 childNodes[0]。語法：父節(jié)點(diǎn).firstChild;

3.lastChild屬性可以用來獲取元素的最后一個(gè)子節(jié)點(diǎn)，等價(jià)于 childNodes[childNodes.length-1]。語法：父節(jié)點(diǎn).lastChild;

4.previousSibling屬性用來獲取目標(biāo)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。語法：目標(biāo)節(jié)點(diǎn).previousSibling;

5.nextSibling屬性用來獲取目標(biāo)節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)。語法：目標(biāo)節(jié)點(diǎn).nextSibling;

6.parentNode屬性用來獲取已知節(jié)點(diǎn)的父節(jié)點(diǎn)。語法：子節(jié)點(diǎn).parentNode;

7.ownerDocument屬性用來當(dāng)前節(jié)點(diǎn)所在文檔的根節(jié)點(diǎn)，等價(jià)于document。語法：目標(biāo)節(jié)點(diǎn).ownerDocument;

節(jié)點(diǎn)的操作

1.createElement方法用來創(chuàng)建元素節(jié)點(diǎn)。語法：document.createElement('元素標(biāo)簽名稱');

2.createAttribute方法用來創(chuàng)建屬性節(jié)點(diǎn)。語法：document.createAttribute('屬性名稱');

3.createTextNode方法用來創(chuàng)建文本節(jié)點(diǎn)。語法：document.createTextNode('文本內(nèi)容');

4.appendChild方法用來在目標(biāo)節(jié)點(diǎn)的子節(jié)點(diǎn)的末尾添加一個(gè)子節(jié)點(diǎn)（可以是createElement創(chuàng)建的元素節(jié)點(diǎn)，也可以是createTextNode創(chuàng)建的文本節(jié)點(diǎn)）。語法：parent.appendChild(要插入的節(jié)點(diǎn));

5.insertBefore方法用來在目標(biāo)元素的前面插入一個(gè)新元素節(jié)點(diǎn)，此時(shí)的指針在目標(biāo)元素的父級上。語法：parent.insertBefore(newElement,targetElement);

6.DOM中沒有insertAfter這個(gè)方法，但是可以通過以下方法來模擬insertAfter;

/*
 * newElement : 要插入的新元素
 * targetElement : 目標(biāo)元素 
 */
function insertAfter(newElement,targetElement){
 var parent = targetElement.parentNode;
 if(parent.lastChild == targetElement){
 /*
  如果目標(biāo)元素是parent的最后一個(gè)子元素，則把新元素追加到parent元素上，
  也就是在parent的子元素的末尾位置添加新元素 
 */
 parent.appendChild(newElement);
 }else{
 /*
  否則，就把新元素添加到目標(biāo)元素和目標(biāo)元素的下一個(gè)兄弟元素之間 
 */
 parent.insertBefore(newElement,targetElement.nextSibling);
 }
}

7.replaceChild方法用來替換一個(gè)元素節(jié)點(diǎn)，此時(shí)的指針在目標(biāo)元素的父級上。語法：parent.replaceChild(replaceElement,targetElement);

8.cloneChild方法用來克隆一個(gè)元素節(jié)點(diǎn)，傳遞一個(gè)布爾參數(shù)，參數(shù)為true時(shí)表示復(fù)制當(dāng)前節(jié)點(diǎn)及其所有子節(jié)點(diǎn)，參數(shù)為false時(shí)表示支付至當(dāng)前節(jié)點(diǎn)。語法：目標(biāo)元素.cloneChild(true|false);

9.removeChild方法用來刪除一個(gè)指定節(jié)點(diǎn)。語法：removeChild(要?jiǎng)h除的節(jié)點(diǎn));

10.getAttribute方法用來獲取一個(gè)屬性的值。語法：目標(biāo)元素.getAttribute(元素屬性名稱);

11.setAttribute方法用來設(shè)置一個(gè)屬性的值，沒有該屬性則創(chuàng)建。語法：目標(biāo)元素.setAttribute(元素屬性名稱,屬性值);

12.removeAttribute方法用來刪除一個(gè)屬性節(jié)點(diǎn)。語法：目標(biāo)元素.removeAttribute(要?jiǎng)h除的屬性名稱);

DOM操作內(nèi)容

1.innerHTML屬性用來獲取和設(shè)置HTML內(nèi)容。語法：元素節(jié)點(diǎn).innerHTML 或者元素節(jié)點(diǎn).innerHTML = 'HTML字符串';

2.innerText|textContent屬性用來獲取和設(shè)置文本內(nèi)容。fireFox使用textContent來獲取和設(shè)置（注意兼容性）。語法：元素節(jié)點(diǎn).innerText 或者元素節(jié)點(diǎn).innerText = 'HTML字符串';

DOM操作樣式

1.style屬性用來獲取和設(shè)置元素的行內(nèi)樣式。語法：element.style;style屬性只能獲取和設(shè)置行內(nèi)樣式，對于如font-size這種樣式屬性，應(yīng)該去掉 - 并且將 - 后面的第一個(gè)字母大寫，駝峰法來獲取和設(shè)置如：element.style.fontSize , element.style.backgroundColor

2.getComputedStyle全局方法用來獲取計(jì)算后的樣式，第一個(gè)參數(shù)是元素節(jié)點(diǎn)，第二個(gè)參數(shù)是類型，如:hover,:active等偽類，默認(rèn)情況下傳 null ,某些IE版本使用currentStyle屬性來獲取 box.currentStyle。語法：window.getComputedStyle(元素，類型)

3.className屬性用來獲取和設(shè)置元素的樣式名稱。語法：element.className

4.自定義的 addClass() | hasClass() | removeClass() 方法

//元素是否含有某樣式
function hasClass(element,className){
 return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//向元素添加新樣式
function addClass(element,className){
 if(hasClass(element,className) == false){
  element.className += ' '+className;
  }
 }
//移除元素的指定樣式
function removeClass(element,className){
 var currentClass = element.className;
 if(hasClass(element,className)){
   currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
      //去除空格
   currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,'');
   element.className = currentClass;
 }
}

DOM操作位置和大小

1.clientWidth屬性用來獲取元素的實(shí)際寬度，該值受滾動(dòng)條和內(nèi)邊距影響，外邊距和border不會(huì)影響。語法：

element.clientWidth;

2.clientHeight屬性用來獲取元素的實(shí)際高度，該值受滾動(dòng)條和內(nèi)邊距影響，外邊距和border不會(huì)影響。語法：

element.clientHeight;

3.offsetWidth屬性用來獲取元素的實(shí)際寬度，該值受邊框和內(nèi)邊距影響，外邊距和滾動(dòng)條不會(huì)影響。語法：

element.offsetWidth;

4.offsetHeight屬性用來獲取元素的實(shí)際高度，該值受邊框和內(nèi)邊距影響，外邊距和滾動(dòng)條不會(huì)影響。語法：

element.offsetHeight;

5.offsetTop和offsetLeft屬性用來獲取元素相對于父級的位置。該值受外邊距影響。語法：element.offsetTop ||

element.offsetLeft;

6.scrollTop和scrollLeft屬性用來獲取滾動(dòng)條被隱藏的區(qū)域大小，也可設(shè)置定位到該區(qū)域（比如返回頂部）。語法：