JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4
DOM的發(fā)展，與WEB標(biāo)準(zhǔn)化的大趨勢(shì)相關(guān)甚密。只有基于正確的語(yǔ)義邏輯，DOM才能正確地發(fā)揮其功用。如今，正確的語(yǔ)義結(jié)構(gòu)、表現(xiàn)與內(nèi)容分離等要求，都已經(jīng)成為網(wǎng)頁(yè)設(shè)計(jì)中的基本要求。因此，在網(wǎng)頁(yè)前端開發(fā)中，DOM的存在，無疑是為表現(xiàn)層、行為層甚至內(nèi)容層面的連接提供了一個(gè)絕佳的API，成為熱門的Ajax應(yīng)用中不可或缺的組成部分。
一、平穩(wěn)退化
1、概念
早期，在未使用JavaScript之前，網(wǎng)頁(yè)中的內(nèi)容可以正常顯示出來，用戶可以通過外設(shè)（如鼠標(biāo)）操控瀏覽到相關(guān)內(nèi)容，這種瀏覽體驗(yàn)對(duì)用戶而言可能并不理想。
根據(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)行綁定。
②對(duì)JavaScript中的方法進(jìn)行檢測(cè)
之前提到的一些方法，如getElementById之類，都需要去判定該方法是否支持。
<script> if(! document.getElementById) return false; </script>
通過if語(yǔ)句這種方式來檢測(cè)是否支持該方法，如果支持，可以繼續(xù)，不支持，直接返回false，這樣就沒必要耽誤功夫了，也起到了性能優(yōu)化的作用。
二、綁定onload事件
1、綁定緣由
一些函數(shù)需要在頁(yè)面加載完全之后才能有效執(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ù)的值，所以后面不帶圓括號(hào)。
2、綁定方法
如果你只需要綁定一個(gè)函數(shù)，那么上面的方法完全可以輕松實(shí)現(xiàn)你的目的。
window.onload = myFunction;
如果是多個(gè)，也許你會(huì)去一個(gè)個(gè)的綁定，可是，這樣做的結(jié)果是只有最后一個(gè)函數(shù)才會(huì)被有效執(zhí)行，關(guān)于這一點(diǎn)其實(shí)很好理解。
我們的目的是，不管頁(yè)面中加載完畢時(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對(duì)象對(duì)應(yīng)著瀏覽器窗口本身，因此這個(gè)對(duì)象的屬性和方法統(tǒng)稱為BOM（瀏覽器對(duì)象模型），如window.open(),window.location等。
JavaScript的document對(duì)象是指文檔對(duì)象模型，主要是處理網(wǎng)頁(yè)內(nèi)容。DOM（Document Object Model）即文檔對(duì)象模型，是針對(duì) HTML 和 XML 文檔的 API 。字母D指document（文檔），字母O指object（對(duì)象），字母指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）。語(yǔ)法：目標(biāo)節(jié)點(diǎn).nodeName
2.nodeType屬性用來獲取節(jié)點(diǎn)的類型，元素節(jié)點(diǎn)：1，屬性節(jié)點(diǎn)：2，文本節(jié)點(diǎn)：3。語(yǔ)法：目標(biāo)節(jié)點(diǎn).nodeType
3.nodeValue屬性用來獲取和設(shè)置節(jié)點(diǎn)的值。元素節(jié)點(diǎn)返回 null 。語(yǔ)法：目標(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就不支持），屬于高級(jí)方法
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ù)組，多條件使用逗號(hào)分隔，表示要查找的元素必須符合所有逗號(hào)分隔的條件，如果一個(gè)元素只符合逗號(hào)分隔的條件中的一個(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ù)組。語(yǔ)法：父節(jié)點(diǎn).childNodes;
2.children屬性可以用來獲取忽略了空白節(jié)點(diǎn)的有效節(jié)點(diǎn)（在某些瀏覽器上，空白符或換行符也是一個(gè)文本節(jié)點(diǎn)）。語(yǔ)法：父節(jié)點(diǎn).children;
3.firstChild屬性可以用來獲取元素的第一個(gè)子節(jié)點(diǎn)，等價(jià)于 childNodes[0]。語(yǔ)法：父節(jié)點(diǎn).firstChild;
3.lastChild屬性可以用來獲取元素的最后一個(gè)子節(jié)點(diǎn)，等價(jià)于 childNodes[childNodes.length-1]。語(yǔ)法：父節(jié)點(diǎn).lastChild;
4.previousSibling屬性用來獲取目標(biāo)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。語(yǔ)法：目標(biāo)節(jié)點(diǎn).previousSibling;
5.nextSibling屬性用來獲取目標(biāo)節(jié)點(diǎn)的后一個(gè)兄弟節(jié)點(diǎn)。語(yǔ)法：目標(biāo)節(jié)點(diǎn).nextSibling;
6.parentNode屬性用來獲取已知節(jié)點(diǎn)的父節(jié)點(diǎn)。語(yǔ)法：子節(jié)點(diǎn).parentNode;
7.ownerDocument屬性用來當(dāng)前節(jié)點(diǎn)所在文檔的根節(jié)點(diǎn)，等價(jià)于document。語(yǔ)法：目標(biāo)節(jié)點(diǎn).ownerDocument;
節(jié)點(diǎn)的操作
1.createElement方法用來創(chuàng)建元素節(jié)點(diǎn)。語(yǔ)法：document.createElement('元素標(biāo)簽名稱');
2.createAttribute方法用來創(chuàng)建屬性節(jié)點(diǎn)。語(yǔ)法：document.createAttribute('屬性名稱');
3.createTextNode方法用來創(chuàng)建文本節(jié)點(diǎn)。語(yǔ)法：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)）。語(yǔ)法：parent.appendChild(要插入的節(jié)點(diǎn));
5.insertBefore方法用來在目標(biāo)元素的前面插入一個(gè)新元素節(jié)點(diǎn)，此時(shí)的指針在目標(biāo)元素的父級(jí)上。語(yǔ)法：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)元素的父級(jí)上。語(yǔ)法：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)。語(yǔ)法：目標(biāo)元素.cloneChild(true|false);
9.removeChild方法用來刪除一個(gè)指定節(jié)點(diǎn)。語(yǔ)法：removeChild(要?jiǎng)h除的節(jié)點(diǎn));
10.getAttribute方法用來獲取一個(gè)屬性的值。語(yǔ)法：目標(biāo)元素.getAttribute(元素屬性名稱);
11.setAttribute方法用來設(shè)置一個(gè)屬性的值，沒有該屬性則創(chuàng)建。語(yǔ)法：目標(biāo)元素.setAttribute(元素屬性名稱,屬性值);
12.removeAttribute方法用來刪除一個(gè)屬性節(jié)點(diǎn)。語(yǔ)法：目標(biāo)元素.removeAttribute(要?jiǎng)h除的屬性名稱);
DOM操作內(nèi)容
1.innerHTML屬性用來獲取和設(shè)置HTML內(nèi)容。語(yǔ)法：元素節(jié)點(diǎn).innerHTML 或者 元素節(jié)點(diǎn).innerHTML = 'HTML字符串';
2.innerText|textContent屬性用來獲取和設(shè)置文本內(nèi)容。fireFox使用textContent來獲取和設(shè)置（注意兼容性）。語(yǔ)法：元素節(jié)點(diǎn).innerText 或者 元素節(jié)點(diǎn).innerText = 'HTML字符串';
DOM操作樣式
1.style屬性用來獲取和設(shè)置元素的行內(nèi)樣式。語(yǔ)法：element.style;style屬性只能獲取和設(shè)置行內(nèi)樣式，對(duì)于如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。語(yǔ)法：window.getComputedStyle(元素，類型)
3.className屬性用來獲取和設(shè)置元素的樣式名稱。語(yǔ)法：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ì)影響。語(yǔ)法：
element.clientWidth;
2.clientHeight屬性用來獲取元素的實(shí)際高度，該值受滾動(dòng)條和內(nèi)邊距影響，外邊距和border不會(huì)影響。語(yǔ)法：
element.clientHeight;
3.offsetWidth屬性用來獲取元素的實(shí)際寬度，該值受邊框和內(nèi)邊距影響，外邊距和滾動(dòng)條不會(huì)影響。語(yǔ)法：
element.offsetWidth;
4.offsetHeight屬性用來獲取元素的實(shí)際高度，該值受邊框和內(nèi)邊距影響，外邊距和滾動(dòng)條不會(huì)影響。語(yǔ)法：
element.offsetHeight;
5.offsetTop和offsetLeft屬性用來獲取元素相對(duì)于父級(jí)的位置。該值受外邊距影響。語(yǔ)法：element.offsetTop ||
element.offsetLeft;
6.scrollTop和scrollLeft屬性用來獲取滾動(dòng)條被隱藏的區(qū)域大小，也可設(shè)置定位到該區(qū)域（比如返回頂部）。語(yǔ)法：
element.scrollTop || element.scrollLeft || element.scrollTop = 0;
常用到的簡(jiǎn)潔快速的document屬性和方法
document.title 用來獲取文檔標(biāo)題
document.domain 用來獲取當(dāng)前域名
document.URL 用來獲取當(dāng)前url路徑
document.forms 獲取表單集合
document.images 獲取圖片集合
document.body 獲取body元素節(jié)點(diǎn)
document.compatMode 識(shí)別文檔模式
- 詳解JavaScript操作HTML DOM的基本方式
- 高性能JavaScript DOM編程（1）
- javascript將DOM節(jié)點(diǎn)添加到文檔的方法實(shí)例分析
- 淺談javascript中的DOM方法
- 詳解JavaScript對(duì)W3C DOM模版的支持情況
- javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法
- javascript基于DOM實(shí)現(xiàn)權(quán)限選擇實(shí)例分析
- javascript中DOM復(fù)選框選擇用法實(shí)例
- JavaScript獲取DOM元素的11種方法總結(jié)
- JavaScript DOM元素尺寸和位置
- JavaScript簡(jiǎn)單遍歷DOM對(duì)象所有屬性的實(shí)現(xiàn)方法
相關(guān)文章
淺析JavaScript 函數(shù)防抖和節(jié)流
這篇文章主要介紹了JavaScript 函數(shù)防抖和節(jié)流的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
Bootstrap基本插件學(xué)習(xí)筆記之Alert警告框(20)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之ALert警告框的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
在localStorage中存儲(chǔ)對(duì)象數(shù)組并讀取的方法
頻繁ajax請(qǐng)求導(dǎo)致頁(yè)面響應(yīng)變慢，所以考慮將數(shù)據(jù)存儲(chǔ)在window.storage中，這樣只需請(qǐng)求一次ajax，接下來通過本文給大家介紹了在localStorage中存儲(chǔ)對(duì)象數(shù)組并讀取的方法,需要的朋友可以參考下2016-09-09
解決layer.open彈出框不能獲取input框的值為空的問題
今天小編就為大家分享一篇解決layer.open彈出框不能獲取input框的值為空的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序加載更多,點(diǎn)擊查看更多功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
js中g(shù)etter和setter用法實(shí)例分析
這篇文章主要介紹了js中g(shù)etter和setter用法,結(jié)合實(shí)例形式分析了javascript中g(shù)etter和setter的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
JS設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問對(duì)象模式的實(shí)例講解
下面小編就為大家?guī)硪黄狫S設(shè)計(jì)模式之?dāng)?shù)據(jù)訪問對(duì)象模式的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
TypeScript實(shí)用的Delay延遲執(zhí)行工具類
在前端開發(fā)中,我們經(jīng)常需要處理一些延遲執(zhí)行、防抖和節(jié)流的場(chǎng)景,今天介紹一個(gè)實(shí)用的Delay工具類,它提供了這些常用的延遲執(zhí)行功能,下面我們就看看它的具體應(yīng)用吧2024-11-11
本節(jié)主要介紹了用js判斷日期是否能跨月查詢,需要的朋友可以參考下2014-07-07
點(diǎn)擊顯示指定元素并隱藏其他同輩元素，下面有個(gè)不錯(cuò)的方法,需要的朋友可以參考下2014-02-02