JavaScript DOM基礎(chǔ)
DOM(Document Object Model)即文檔對(duì)象模型,針對(duì)HTML和XML文檔的API(應(yīng)用程序接口);
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù),運(yùn)行開(kāi)發(fā)人員可以添加/移除和修改頁(yè)面的某一部分;
一 DOM介紹
D(文檔):可以理解為整個(gè)Web加載的網(wǎng)頁(yè)文檔;
O(對(duì)象):可以理解為類(lèi)似window對(duì)象之類(lèi)的東西,可以調(diào)用屬性和方法,這里說(shuō)的是document對(duì)象;
M(模型):可以理解為網(wǎng)頁(yè)文檔的樹(shù)形結(jié)構(gòu);
1.節(jié)點(diǎn)
加載HTML頁(yè)面時(shí),Web瀏覽器生成一個(gè)樹(shù)形結(jié)構(gòu),用來(lái)表示頁(yè)面內(nèi)部結(jié)構(gòu);
DOM將這種節(jié)點(diǎn)結(jié)構(gòu)理解為由節(jié)點(diǎn)組成;
html元素為根節(jié)點(diǎn);head元素是html的子節(jié)點(diǎn);meta元素和title元素之間是兄弟關(guān)系;
2.節(jié)點(diǎn)種類(lèi):元素節(jié)點(diǎn)/文本節(jié)點(diǎn)/屬性節(jié)點(diǎn)
<div title="元素屬性">測(cè)試Div</div>
元素節(jié)點(diǎn) => div;
屬性節(jié)點(diǎn) => title="元素屬性"
文本節(jié)點(diǎn) => 測(cè)試Div二 查找元素
W3C提供了比較方便簡(jiǎn)單的定位節(jié)點(diǎn)的方法和屬性,以便我們快速的對(duì)節(jié)點(diǎn)進(jìn)行操作;
DOM(Document Object Model)即文檔對(duì)象模型,針對(duì)HTML和XML文檔的API(應(yīng)用程序接口);
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù),運(yùn)行開(kāi)發(fā)人員可以添加/移除和修改頁(yè)面的某一部分;
元素節(jié)點(diǎn)查找方法
方法 說(shuō)明
getElementById() 獲取特定ID元素的節(jié)點(diǎn);
getElementsByTagName() 獲取相同元素的節(jié)點(diǎn)列表;
getElementsByName() 獲取相同名稱(chēng)的節(jié)點(diǎn)列表;
getAttribute() 獲取特定元素節(jié)點(diǎn)屬性的值;
setAttribute() 設(shè)置特定元素節(jié)點(diǎn)屬性的值;
removeAttribute() 移除特定元素節(jié)點(diǎn)屬性;
1.getElementById()
// 方法接收一個(gè)參數(shù):獲取元素的ID;
// 如果找到相應(yīng)的元素則返回該元素的HTMLDivElement對(duì)象;如果不存在,則返回null;
document.getElementById('box'); // [object HTMLDivElement];
// 當(dāng)我們通過(guò)getElementById()獲取到特定元素節(jié)點(diǎn)時(shí),這個(gè)節(jié)點(diǎn)對(duì)象就被我們獲取到了;
// 而通過(guò)這個(gè)節(jié)點(diǎn)對(duì)象,我們可以訪問(wèn)它的一系列屬性;
(1).訪問(wèn)元素節(jié)點(diǎn)的屬性
屬性 說(shuō)明
tagName 獲取元素節(jié)點(diǎn)的標(biāo)簽名;
innerHTML 獲取元素節(jié)點(diǎn)里的內(nèi)容,非W3C DOM規(guī)范;
document.getElementById('box').tagName; // =>DIV;
document.getElementById('box').innerHTML; // =>測(cè)試Div;
(2).訪問(wèn)HTML通用屬性
屬性 說(shuō)明
id 元素節(jié)點(diǎn)的id名稱(chēng);
title 元素節(jié)點(diǎn)的title屬性值;
style CSS內(nèi)聯(lián)樣式屬性值;
className CSS元素的類(lèi);
document.getElementById('box').id; // =>id;
document.getElementById('box').title; // 獲取title;
document.getElementById('box').style; // 獲取CSSStyleDeclaration對(duì)象;
document.getElementById('box').style.color; // 獲取style對(duì)象中的color的值;也就是設(shè)置在元素行內(nèi)的樣式值;
document.getElementById('box').style.color='red'; // 設(shè)置style對(duì)象中的color的值;
document.getElementById('box').className; // 獲取class;
document.getElementById('box').className='pox'; // 設(shè)置class;
document.getElementById('box').bbb; // 獲取自定義屬性的值,非IE不支持;
2.getElementsByTagName()
// 方法返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)數(shù)組,這個(gè)數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表;
document.getElementsByTagName('*'); // 利用通配符獲取所有元素;
// PS:IE在使用通配符時(shí),會(huì)把文檔最開(kāi)始的html的規(guī)范聲明當(dāng)作第一個(gè)元素節(jié)點(diǎn);
document.getElementsByTagName('li'); // =>[object HTMLCollection];獲取所有l(wèi)i元素;
document.getElementsByTagName('li').[0]; // 獲取第一個(gè)li元素;
3.getElementsByName()
獲取相同名稱(chēng)(name)設(shè)置的元素,返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList);
document.getElementsByName('add'); // 獲取具有name='add'的input元素集合;
// PS:對(duì)于并不是HTML合法的屬性,那么在JS獲取的兼容性上也會(huì)存在差異;
// IE支持合法的name屬性,但對(duì)于自定義的屬性會(huì)出現(xiàn)不兼容問(wèn)題;
4.getAttribute()
方法將獲取元素中某個(gè)屬性值;
但它和直接使用".attr"獲取屬性值的方法有一定區(qū)別;
document.getElementById('box').getAttribute('mydiv'); // 獲取自定義屬性值;
document.getElementById('box').mydiv; // 獲取自定義屬性值,僅IE支持;
5.setAttribute()
方法將設(shè)置元素中某個(gè)屬性和值;接收兩個(gè)參數(shù):屬性名和值;
如果屬性本身已存在,那么就會(huì)覆蓋;
document.getElementById('box').setAttribute('align','center'); // 設(shè)置屬性和值;
// PS:在IE7及以下,使用setAttribute()方法設(shè)置class和style屬性沒(méi)有效果;
6.removeAttribute()
方法可以移除HTML屬性;
document.getElementById('box').removeAttribute('style'); // 移除style樣式屬性;
三 DOM節(jié)點(diǎn)
1.node節(jié)點(diǎn)屬性
// 節(jié)點(diǎn)可以分為:元素節(jié)點(diǎn)/屬性節(jié)點(diǎn)和文本節(jié)點(diǎn);
// 這些節(jié)點(diǎn)都有三個(gè)屬性:nodeName/nodeType和nodeValue;
信息節(jié)點(diǎn)屬性
節(jié)點(diǎn)類(lèi)型 nodeName nodeType nodeValue
元素 元素名稱(chēng) 1 null
屬性 屬性名稱(chēng) 2 屬性值
文本 #text 3 文本內(nèi)容
document.getElementById('box').nodeType; // =>1; 元素節(jié)點(diǎn);
2.層次節(jié)點(diǎn)屬性
// 層次節(jié)點(diǎn)可以劃分為:父節(jié)點(diǎn)與子節(jié)點(diǎn)/兄弟節(jié)點(diǎn);
// 當(dāng)我們獲取其中一個(gè)元素節(jié)點(diǎn)的時(shí)候,就可以使用層次節(jié)點(diǎn)屬性來(lái)獲取它相關(guān)層次的節(jié)點(diǎn);
節(jié)點(diǎn)關(guān)系示意圖
層次節(jié)點(diǎn)屬性
屬性 說(shuō)明
childNodes 讀取當(dāng)前元素節(jié)點(diǎn)的所有子節(jié)點(diǎn);
firstChild 讀取當(dāng)前元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn);
lastChild 獲取當(dāng)前元素節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn);
ownerDocument 獲取該節(jié)點(diǎn)的文檔根節(jié)點(diǎn),相當(dāng)于document;
parentNode 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn);
previousSibling 獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)同級(jí)節(jié)點(diǎn);
nextSibling 獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)同級(jí)節(jié)點(diǎn);
attributes 獲取當(dāng)前元素節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)集合;
(1).childNodes屬性
屬性獲取某一個(gè)元素節(jié)點(diǎn)的所有子節(jié)點(diǎn),這些子節(jié)點(diǎn)包含元素節(jié)點(diǎn)和文本節(jié)點(diǎn);
PS:使用childNodes[n]返回子節(jié)點(diǎn)對(duì)象的時(shí)候,有可能返回的是元素子節(jié)點(diǎn),比如:HTMLElement;
也可能返回的是文本子節(jié)點(diǎn),比如:Text;
元素子節(jié)點(diǎn)可以使用nodeName或者tagName獲取標(biāo)簽名稱(chēng);而文本子節(jié)點(diǎn)可以使用nodeValue獲取;
var box = document.getElementById('box');
for(var i=0; i<box.childNodes.length; i++){
判斷是元素節(jié)點(diǎn),輸出元素標(biāo)簽名;
if(box.childNodes[i].nodeType === 1){
console.log('元素節(jié)點(diǎn):'+box.childNodes[i].nodeName);
判斷是文本節(jié)點(diǎn),輸出文本內(nèi)容;
}else if(box.childNodes[i].nodeType ===3){
console.log('文本節(jié)點(diǎn):'+box.childNodes[i].nodeValue);
}
}
PS1:在獲取到文本節(jié)點(diǎn)(重點(diǎn)在于已經(jīng)不是元素節(jié)點(diǎn))的時(shí)候,是無(wú)法使用innerHTML這個(gè)屬性輸出文本內(nèi)容的;
這個(gè)非標(biāo)準(zhǔn)的屬性必須在獲取元素節(jié)點(diǎn)的時(shí)候,才能輸出里面包含的文本;
alert(box.innerHTML); innerHTML和nodeValue第一個(gè)區(qū)別;
PS2:innerHTML和nodeValue在賦值的時(shí)候,nodeValue會(huì)把包含在文本里的HTML轉(zhuǎn)義成特殊的字符,從而達(dá)到形成純文本的效果;
而innerHTML會(huì)解析文本里的特殊字符;
box.childNodes[0].nodeValue = '<strong>abc</strong>'; =><strong>abc</strong>;
box.innerHTML = '<strong>abc</strong>'; =>abc(樣式加粗);
(2).firstChild和lastChild屬性
firstChild = childNodes[0];獲取當(dāng)前元素的第一個(gè)子節(jié)點(diǎn);
lastChild = childNodes[box.childNodes.length-1];獲取當(dāng)前元素最后一個(gè)子節(jié)點(diǎn);
(3).ownerDocument屬性
返回該節(jié)點(diǎn)的文檔對(duì)象根節(jié)點(diǎn),返回的對(duì)象相當(dāng)于document;
alert(box.ownerDocument === document); // =>true;根節(jié)點(diǎn);
(4).parentNode/previousSibling/nextSibling屬性
parentNode:返回該節(jié)點(diǎn)的父節(jié)點(diǎn);
previousSibling:返回該節(jié)點(diǎn)的前一個(gè)同級(jí)節(jié)點(diǎn);
nextSibling:返回該節(jié)點(diǎn)的后一個(gè)同級(jí)節(jié)點(diǎn);
alert(box.parentNode.nodeName); // 獲取父節(jié)點(diǎn)的標(biāo)簽名;
alert(box.firstChild.nextSibling); // 獲取第二個(gè)節(jié)點(diǎn);
alert(box.lastChild.previousSibling); // 獲取倒數(shù)第二個(gè)節(jié)點(diǎn);
(5).attributes屬性
屬性返回該節(jié)點(diǎn)的屬性節(jié)點(diǎn)集合;
alert(document.getElementById('box').attributes); // =>NamedNodeMap;
(6).忽略空白文本節(jié)點(diǎn)
var body = document.getElementsByTagName('body')[0];// 獲取body元素節(jié)點(diǎn);
alert(body.childNodes.length); // 非IE=7; IE=3;
// PS:在非IE中,標(biāo)準(zhǔn)的DOM具有識(shí)別空白文本節(jié)點(diǎn)的功能,而IE自動(dòng)忽略了;
function filterSpaceNode1(nodes){
// 新數(shù)組;
var ret = [];
for(var i=0; i<nodes.length; i++){
// 如果識(shí)別到空白文本節(jié)點(diǎn),就不添加到數(shù)組;
if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
// 把每次的元素節(jié)點(diǎn),添加到數(shù)組里;
ret.push(nodes[i]);
}
return ret;
}
// PS:上面的方法,采用忽略空白文件節(jié)點(diǎn)的方法,把得到的元素節(jié)點(diǎn)累加到數(shù)組里返回;
function filterSpaceNode2(nodes){
for(var i=0; i<nodes.length; i++){
if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)){
// 得到空白節(jié)點(diǎn)之后,一道父節(jié)點(diǎn)上,刪除子節(jié)點(diǎn);
nodes[i].parentNode.removeChild(nodes[i]);
}
}
return nodes;
}
// PS:firstChild等方法在獲取節(jié)點(diǎn)時(shí)遇到空白節(jié)點(diǎn),處理方法;
function removeWhileNode(nodes){
for(var i=0; i<nodes.childNodes.length; i++){
if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){
nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
}
}
return nodes;
}
四 節(jié)點(diǎn)操作
// DOM不單單可以查找節(jié)點(diǎn),也可以創(chuàng)建節(jié)點(diǎn)/復(fù)制節(jié)點(diǎn)/插入節(jié)點(diǎn)/刪除節(jié)點(diǎn)和替換節(jié)點(diǎn)
節(jié)點(diǎn)操作方法
方法 說(shuō)明
write() 這個(gè)方法可以把任意字符串插入到文檔中;
createElement() 創(chuàng)建一個(gè)元素節(jié)點(diǎn);
appendChild() 將新節(jié)點(diǎn)追加到子節(jié)點(diǎn)列表的末尾;
createTextNode() 創(chuàng)建一個(gè)文件節(jié)點(diǎn);
insertBefore() 將新節(jié)點(diǎn)插入在前面;
replaceChild() 將新節(jié)點(diǎn)替換舊節(jié)點(diǎn);
cloneNode() 復(fù)制節(jié)點(diǎn);
removeChild() 移除節(jié)點(diǎn);
(1).write()方法
// write()方法可以把任意字符串插入到文檔中去;
document.write('<p>這是一個(gè)段落!</p>'); // 解析后文字;
(2).createElement()方法
createElement()方法可以創(chuàng)建一個(gè)元素節(jié)點(diǎn);
document.createElement('p'); // [object HTMLParagraphElement];
(3).appendChild()方法
appendChild()方法將一個(gè)新節(jié)點(diǎn)添加到某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾上;
var box = document.getElementById('box');
var p = document.createElement('p'); // 創(chuàng)建一個(gè)新元素節(jié)點(diǎn)<p>;
box.appendChild(p); // 把新元素節(jié)點(diǎn)<p>添加子節(jié)點(diǎn)末尾;
(4).createTextNode()方法
該方法創(chuàng)建一個(gè)文本節(jié)點(diǎn);
var text = document.createTextNode('段落');
p.appendChild(text); // 將文本節(jié)點(diǎn)添加到子節(jié)點(diǎn)末尾;
(5).insertBefore()方法
// 該方法可以把節(jié)點(diǎn)添加到指定節(jié)點(diǎn)的前面;
box.parentNode.insertBefore(p,box); // 在<div>之前添加一個(gè)<p>;
box.insertBefore(newNode,null); // 將newNode添加到box自列表的最后節(jié)點(diǎn);
//PS:insertBefore()方法可以給當(dāng)前元素的前面創(chuàng)建一個(gè)節(jié)點(diǎn),但沒(méi)有提供給當(dāng)前元素的后面創(chuàng)建一個(gè)節(jié)點(diǎn);
function insertAfter(newElement,targetElement){
// 得到父節(jié)點(diǎn);
var parent = targetElement.parentNode;
// 如果最后一個(gè)子節(jié)點(diǎn)是當(dāng)前元素,那么直接添加即可;
if(parent.lastChild === targetElement){
parent.appendChild(newElement);
}else{
// 否則,在當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)之前添加;達(dá)成在當(dāng)前節(jié)點(diǎn)后面添加節(jié)點(diǎn)的需求;
parentNode.insertBefore(newElement,targetElement.nextSibling);
}
}
(6).replaceChild()方法
該方法可以把節(jié)點(diǎn)替換成指定的節(jié)點(diǎn);
box.parentNode.replaceChild(p,box); // 把<div>換成了<p>;
(7).cloneNode()方法
// 該方法可以把子節(jié)點(diǎn)復(fù)制出來(lái);復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有,但并沒(méi)有為它指定父節(jié)點(diǎn);
// 參數(shù)為true:執(zhí)行深復(fù)制,就是復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹(shù);
// 參數(shù)為false:執(zhí)行淺復(fù)制,只復(fù)制節(jié)點(diǎn)本身;
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); // 獲取第一個(gè)子節(jié)點(diǎn),true表示復(fù)制內(nèi)容;
box.appendChild(clone); // 添加到子節(jié)點(diǎn)列表末尾;
(8).removeChild()方法
該方法刪除指定節(jié)點(diǎn);
box.parentNode.removeChild(box);
小結(jié):在下一章~
相關(guān)文章
Javascript學(xué)習(xí)筆記之?dāng)?shù)組的遍歷和 length 屬性
我們一般用循環(huán)來(lái)遍歷數(shù)組，而循環(huán)一直是 JavaScript 性能問(wèn)題的常見(jiàn)來(lái)源，有時(shí)循環(huán)用得不好會(huì)嚴(yán)重降低代碼的運(yùn)行速度。數(shù)組的屬性可以分為三種:length屬性,索引屬性,其他屬性.和普通對(duì)象相比,數(shù)組對(duì)象特殊的地方就是它的length屬性和索引屬性。2014-11-11
window.open的功能全解析...2006-10-10
這篇文章主要介紹了javascript this詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
JavaScript中的Math.SQRT1_2屬性使用簡(jiǎn)介
這篇文章主要介紹了JavaScript中的Math.SQRT1_2屬性的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript 內(nèi)置對(duì)象屬性及方法集合
JavaScript內(nèi)置對(duì)象屬性及方法大全，學(xué)習(xí)js的朋友可以收藏下， 方便以后的學(xué)習(xí)。2010-07-07
微信小程序開(kāi)發(fā)之入門(mén)實(shí)例教程篇
2016年推出微信小程序，時(shí)至今日，歷經(jīng)幾個(gè)版本的更新，已形成了相對(duì)實(shí)用和穩(wěn)定的服務(wù)平臺(tái)。本文簡(jiǎn)單的介紹了微信小程序的入門(mén)用法，今后會(huì)繼續(xù)關(guān)注和實(shí)踐。需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了JavaScript的DOM基礎(chǔ)知識(shí),需要的朋友可以參考下2015-04-04
JavaScript 學(xué)習(xí)筆記之操作符（續(xù)）
上篇文章我們講解了javascript的操作符中的一元操作符、位操作符、布爾操作符，今天我們繼續(xù)講解剩下的幾個(gè)操作符，包括乘性操作符、加性操作符、相等操作符、條件操作符、賦值操作符、逗號(hào)操作符，小伙伴們仔細(xì)研讀下吧，對(duì)提高自己對(duì)于javascript的理解很有幫助。2015-01-01
JavaScript字符串對(duì)象toLowerCase方法入門(mén)實(shí)例（用于把字母轉(zhuǎn)換為小寫(xiě)）
這篇文章主要介紹了JavaScript字符串對(duì)象toLowerCase方法入門(mén)實(shí)例,toLowerCase方法用于把字母字符串轉(zhuǎn)換為小寫(xiě)形式,需要的朋友可以參考下2014-10-10
JavaScript實(shí)現(xiàn)關(guān)鍵字高亮功能
關(guān)鍵詞高亮技術(shù)各大CMS基本上都有，但基本都是后端代碼來(lái)實(shí)現(xiàn)的，今天我們探討下如何使用javascript來(lái)實(shí)現(xiàn)代碼高亮技術(shù)。2014-11-11