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

2024-05-06 16:24:28

字體：大中小

供稿：網(wǎng)友

DOM(Document Object Model)，即“文檔對象模型”。基于語義的邏輯結(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將會毫無意義。

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

2、綁定方法

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

window.onload = myFunction;

如果是多個(gè)，也許你會去一個(gè)個(gè)的綁定，可是，這樣做的結(jié)果是只有最后一個(gè)函數(shù)才會被有效執(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ù)的值存儲到變量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知識點(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è)，則不會被返回

小結(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;

}

}