js DOM模型操作
例:<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a>
(1)a是元素節(jié)點(diǎn)
(2)“私のdotnet小屋”是文本節(jié)點(diǎn)
(3)href=”http://www.cnblogs.com/shuz”是屬性節(jié)點(diǎn)
DOM節(jié)點(diǎn)的屬性
屬性 |
類(lèi)型 |
說(shuō)明 |
nodeName |
String |
節(jié)點(diǎn)名稱(chēng),根據(jù)節(jié)點(diǎn)的類(lèi)型而定義 |
nodeValue |
String |
節(jié)點(diǎn)的值,根據(jù)節(jié)點(diǎn)的類(lèi)型而定義 |
nodeType |
Number |
節(jié)點(diǎn)類(lèi)型,1為元素節(jié)點(diǎn),2為屬性節(jié)點(diǎn),3為文本節(jié)點(diǎn) |
firstChild |
Node |
指向childNodes列表的第一個(gè)節(jié)點(diǎn) |
lastChild |
Node |
指向childNodes列表的最后一個(gè)節(jié)點(diǎn) |
childNodes |
NodeList |
所有子節(jié)點(diǎn)列表,childNodes[i]可以訪(fǎng)問(wèn)第i+1個(gè)節(jié)點(diǎn) |
parentNode |
Node |
指向節(jié)點(diǎn)的父節(jié)點(diǎn),如果已是根節(jié)點(diǎn),則返回null |
previousSibling |
Node |
指向前一個(gè)兄弟節(jié)點(diǎn),如果已是第一個(gè)節(jié)點(diǎn),則返回null |
nextSibling |
Node |
指向后一個(gè)兄弟節(jié)點(diǎn),如果已是最后一個(gè)節(jié)點(diǎn),返回null |
Attributes |
NameNodeMap |
包含一個(gè)元素特性的Attr對(duì)象,僅用于元素節(jié)點(diǎn) |
className |
String |
節(jié)點(diǎn)的CSS類(lèi) |
innerHTML |
String |
某個(gè)標(biāo)記之間的所有內(nèi)容,包括代碼本身 |
(1)訪(fǎng)問(wèn)節(jié)點(diǎn):
【通過(guò)標(biāo)簽名】
document.getElementsByTagName(sTagName)方法:返回一個(gè)包含某個(gè)相同標(biāo)簽名的元素節(jié)點(diǎn)列表
【通過(guò)標(biāo)簽ID】
document.getElementById(sElementId)方法:返回Id為指定值的元素節(jié)點(diǎn)
【訪(fǎng)問(wèn)前一個(gè)節(jié)點(diǎn)】兼容IE和FireFox
(自定義)
function prevSib(oNode){
var oTempFirstNode=oNode.parentNode.firstChild;
//判斷是否是第一個(gè)節(jié)點(diǎn),如果是則返回null
if(oNode==oTempFirstNode)
return null;
var oTempNode=oNode.previousSibling;
//逐一搜索前面的兄弟節(jié)點(diǎn),直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling;
//三目運(yùn)算符,如果是元素節(jié)點(diǎn)則返回節(jié)點(diǎn)本身,否則返回null
return (oTempNode.nodeType==1)?:oTempNode:null;
}
【訪(fǎng)問(wèn)后一個(gè)節(jié)點(diǎn)】兼容IE和FireFox
(自定義)
function nextSib(oNode){
var oTempLastNode=oNode.parentNode.lastChild;
//判斷是否是最后一個(gè)節(jié)點(diǎn),如果是則返回null
if(oNode==oTempLastNode)
return null;
var oTempNode=oNode.nextSibling;
//逐一搜索后面的兄弟節(jié)點(diǎn),直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//三目運(yùn)算符,如果是元素節(jié)點(diǎn)則返回節(jié)點(diǎn)本身,否則返回null
return(oTempNode.nodeType==1)?oTempNode:null;
}
(2)判斷一個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn):
NodeObject.hasChildNodes()方法:當(dāng)childNodes包含一個(gè)或多個(gè)節(jié)點(diǎn)時(shí),返回true
(3)設(shè)置節(jié)點(diǎn)屬性:
eleNode.getAttribute(attrNode)方法:返回eleNode元素的attrNode屬性
eleNode.setAttribute(attrNode,sNewValue)方法:設(shè)置eleNode元素的attrNode屬性的值為sNewValue
(4)創(chuàng)建節(jié)點(diǎn):
document.createElement(eleNode)方法:創(chuàng)建一個(gè)元素節(jié)點(diǎn)eleNode
document.createTextNode(textNode)方法:創(chuàng)建一個(gè)文本節(jié)點(diǎn)textNode
document.createDocumentFragment()方法:創(chuàng)建文檔碎片節(jié)點(diǎn)
(5)添加節(jié)點(diǎn):
eleNode.appendChild(textNode)方法:將textNode節(jié)點(diǎn)添加到childNodes的末尾
(6)刪除節(jié)點(diǎn):
oNode.parentNode.removeChild(oNode)方法:從childNodes中刪除oNode節(jié)點(diǎn)
(7)替換節(jié)點(diǎn):
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法:將childNodes中的oOldNode節(jié)點(diǎn)替換成oNewNode節(jié)點(diǎn)
(8)在特定節(jié)點(diǎn)前插入節(jié)點(diǎn):
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode節(jié)點(diǎn)之前插入oNewNode節(jié)點(diǎn)
(9)在特定節(jié)點(diǎn)后插入節(jié)點(diǎn):
(自定義)oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法:在childNodes中的oTargetNode節(jié)點(diǎn)之后插入oNewNode節(jié)點(diǎn)
function insertAfter(oNewNode,oTargetNode){
var oParentNode=oTargetNode.parentNode;
if(oParentNode.lastChild==oTargetNode)
oParentNode.appendChild(oNewNode);
else
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling);
}
相關(guān)文章
基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳的相關(guān)資料,需要的朋友可以參考下2016-10-10Layer+Echarts構(gòu)建彈出層折線(xiàn)圖的方法
今天小編就為大家分享一篇Layer+Echarts構(gòu)建彈出層折線(xiàn)圖的方法,具有很的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼
下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)垂直向上無(wú)縫滾動(dòng)特效代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11js中符號(hào)轉(zhuǎn)意問(wèn)題示例探討
符號(hào)轉(zhuǎn)意,大家或許有所了解,知識(shí)在使用中或許不是那么的在意,其實(shí)這個(gè)問(wèn)題很重要,下面為大家講解下js符號(hào)轉(zhuǎn)意問(wèn)題相關(guān)知識(shí),感興趣的朋友可以參考下2013-08-08vue3+Pinia+TypeScript?實(shí)現(xiàn)封裝輪播圖組件
這篇文章主要介紹了vue3+Pinia+TypeScript?實(shí)現(xiàn)封裝輪播圖組件,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-07-07Bootstrap中的fileinput 多圖片上傳及編輯功能
這篇文章主要介紹了Bootstrap中的fileinput 多圖片上傳及編輯功能的實(shí)現(xiàn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09js根據(jù)手機(jī)客戶(hù)端瀏覽器類(lèi)型,判斷跳轉(zhuǎn)官網(wǎng)/手機(jī)網(wǎng)站多個(gè)實(shí)例代碼
這篇文章主要介紹了js根據(jù)手機(jī)客戶(hù)端瀏覽器類(lèi)型,判斷跳轉(zhuǎn)官網(wǎng)/手機(jī)網(wǎng)站多個(gè)實(shí)例代碼,需要的朋友可以參考下2016-04-04JS獲得一個(gè)對(duì)象的所有屬性和方法實(shí)例
下面小編就為大家?guī)?lái)一篇JS獲得一個(gè)對(duì)象的所有屬性和方法實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02