欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS常見DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】

 更新時間:2018年05月14日 11:10:23   作者:Torrex  
這篇文章主要介紹了JS常見DOM節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了JavaScript針對DOM節(jié)點(diǎn)的創(chuàng)建 ,插入,刪除,復(fù)制,查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JS常見DOM節(jié)點(diǎn)操作。分享給大家供大家參考,具體如下:

DOM含義:DOM是文檔對象模型(Document Object Model,是基于瀏覽器編程的一套API接口,是W3C出臺的推薦標(biāo)準(zhǔn)。其賦予了JS操作節(jié)點(diǎn)的能力。當(dāng)網(wǎng)頁被加載時,瀏覽器就會創(chuàng)建頁面的文檔對象模型。

節(jié)點(diǎn):根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn),HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn):

1、整個文檔時一個文檔節(jié)點(diǎn)。
2、每個HTML元素是元素節(jié)點(diǎn)。
3、HTML元素內(nèi)的文本是文本節(jié)點(diǎn)。
4、每個HTML屬性是屬性節(jié)點(diǎn)。
5、每個注釋是注釋節(jié)點(diǎn)。

所以HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu),這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹。通過 HTML DOM,節(jié)點(diǎn)樹中的所有節(jié)點(diǎn)都可以通過 JS 進(jìn)行訪問。所有 HTML 元素(節(jié)點(diǎn))均可被修改。

一、創(chuàng)建節(jié)點(diǎn)、追加節(jié)點(diǎn)

1、createElement(標(biāo)簽名)創(chuàng)建一個元素節(jié)點(diǎn)(具體的一個元素)。
2、appendChild(節(jié)點(diǎn))追加一個節(jié)點(diǎn)。
3、createTextNode(節(jié)點(diǎn)文本內(nèi)容)創(chuàng)建一個文本節(jié)點(diǎn)

var oDiv = document.createElement("div");//創(chuàng)建一個div元素,因?yàn)槭莇ocument對象的方法。
var oDivText = document.createTextNode("666");//創(chuàng)建一個文本節(jié)點(diǎn)內(nèi)容是“666”,因?yàn)槭莇ocument對象的方法。
oDiv.appendChild(oDivText);//父級.appendChild(子節(jié)點(diǎn));在div元素中添加“666”
document.body.appendChild(oDiv);//父級.appendChild(子節(jié)點(diǎn));;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父級.appendChild(子節(jié)點(diǎn));;document.documentElement是指向<html>元素

二、插入節(jié)點(diǎn)

1、appendChild(節(jié)點(diǎn))也是一種插入節(jié)點(diǎn)的方式,還可以添加已經(jīng)存在的元素,會將其元素從原來的位置移到新的位置。
2、insertBefore(a,b)是參照節(jié)點(diǎn),意思是a節(jié)點(diǎn)會插入b節(jié)點(diǎn)的前面。

var oDiv = document.createElement("div");//創(chuàng)建一個div元素,因?yàn)槭莇ocument對象的方法。
var oDiv1 = document.getElementById("div1");
document.body.insertBefore(oDiv,oDiv1);//在oDiv1節(jié)點(diǎn)前插入新創(chuàng)建的元素節(jié)點(diǎn)
ul.appendChild(ul.firstChild); //把ul的第一個元素節(jié)點(diǎn)移到ul子節(jié)點(diǎn)的末尾

三、刪除、移除節(jié)點(diǎn)

1、removeChild(節(jié)點(diǎn)) 刪除一個節(jié)點(diǎn),用于移除刪除一個參數(shù)(節(jié)點(diǎn))。其返回的被移除的節(jié)點(diǎn),被移除的節(jié)點(diǎn)仍在文檔中,只是文檔中已沒有其位置了。

var removeChild = document.body.removeChild(div1);//移除document對象的方法div1

四、替換節(jié)點(diǎn)

1、replaceChild(插入的節(jié)點(diǎn),被替換的節(jié)點(diǎn)) ,用于替換節(jié)點(diǎn),接受兩個參數(shù),第一參數(shù)是要插入的節(jié)點(diǎn),第二個是要被替換的節(jié)點(diǎn)。返回的是被替換的節(jié)點(diǎn)。

var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2

五、查找節(jié)點(diǎn)

1、childNodes 包含文本節(jié)點(diǎn)和元素節(jié)點(diǎn)的子節(jié)點(diǎn)。

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的對象。
//nodeType是節(jié)點(diǎn)的類型,利用nodeType來判斷節(jié)點(diǎn)類型,再去控制子節(jié)點(diǎn)
//nodeType==1 是元素節(jié)點(diǎn)
//nodeType==3 是文本節(jié)點(diǎn)
  if (oList.childNodes[i].nodeType == 1) {//查找到oList內(nèi)的元素節(jié)點(diǎn)
    console.log(oList.childNodes[i]);//在控制器日志中顯示找到的元素節(jié)點(diǎn)
  }
}

2、

A、children也可以獲取子節(jié)點(diǎn),而且兼容各種瀏覽器。包括IE6-8

B、parentNode:獲取父節(jié)點(diǎn)

var oList = document.getElementById('list');//oList是做的ul的對象
var oChild=document.getElementById('child');//oChild是做的ul中的一個li的對象
//通過子節(jié)點(diǎn)查找父節(jié)點(diǎn)//parentNode:獲取父節(jié)點(diǎn)
console.log(oChild.parentNode);//在控制器日志中顯示父節(jié)點(diǎn)
console.log(oList.children);//在控制器日志中顯示oList子節(jié)點(diǎn)
console.log(children.length)//子節(jié)點(diǎn)的個數(shù)

3、

A、firstChild ; firstElementChild查找第一個子節(jié)點(diǎn)。此存在瀏覽器兼容問題:firstChild是IE兼容,firstElementChild是非IE兼容。

//查找第一個子節(jié)點(diǎn)的封裝函數(shù)
function firstChild(ele) {
  if (ele.firstElementChild) {//如果該條件是true則在該瀏覽器(IE或非IE)中兼容
    return ele.firstElementChild;
  } else {
    return ele.firstChild;
  }
}
firstChild(oList).style.background = 'red';//將獲得的節(jié)點(diǎn)的背景變成紅色

B、lastChild ; lastElementChild查找最后一個子節(jié)點(diǎn)。此存在瀏覽器兼容問題:lastChild 是IE兼容,lastElementChild是非IE兼容。

//查找最后一個子節(jié)點(diǎn)的封裝函數(shù)
function lastChild(ele) {
  if (ele.lastElementChild) {//如果該條件是true則在該瀏覽器(IE或非IE)中兼容
    return ele.lastElementChild;
  } else {
    return ele.lastChild;
  }
}
lastChild(oList).style.background = 'red';//將獲得的節(jié)點(diǎn)的背景變成紅色

C、nextSibling ; nextElementSibling查找下一個兄弟節(jié)點(diǎn)。也是存在兼容性問題。

//查找下一個兄弟節(jié)點(diǎn)的封裝函數(shù)
function nextSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.nextElementSibling;
  } else {
    return ele.nextSibling;
  }
}
nextSibling(oMid).style.background = 'red';

D、previousSibling ; previousElementSibling查找上一個兄弟節(jié)點(diǎn)。也是存在兼容性問題。

//查找上一個兄弟節(jié)點(diǎn)的封裝函數(shù)
function previousSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.previousElementSibling;
  } else {
    return ele.previousSibling;
  }
}
previousSibling(oMid).style.background = 'red';

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

最新評論