JS中的DOM操作（三）
阿新 • • 發佈：2018-11-05
目錄
Tips
節點與元素：
- 元素:頁面中所有的標籤,元素---element, 標籤----元素---物件；根元素:html標籤
- 節點:頁面中所有的內容(標籤,屬性,文字(文字,換行,空格,回車)),Node
節點的屬性:
(可以使用標籤--元素.出來,可以使用屬性節點.出來,文字節點.點出來)
- nodeType:節點的型別:1----標籤,2---屬性,3---文字
- nodeName:節點的名字:標籤節點---大寫的標籤名字,屬性節點---小寫的屬性名字,文字節點----#text
- nodeValue:節點的值:標籤節點---null,屬性節點---屬性值,文字節點---文字內容
獲取結節點的方法：
- nodeType--->節點的型別:1---標籤,2---屬性,3---文字
- nodeName--->節點的名字:大寫的標籤--標籤,小寫的屬性名---屬性,#text---文字
- nodeValue-->節點的值:標籤---null,屬性--屬性的值,文字--文字內容
//ul標籤的父級節點 console.log(ulObj.parentNode); //ul標籤的父級元素 console.log(ulObj.parentElement); console.log(ulObj.parentNode.nodeType);//標籤的---1 console.log(ulObj.parentNode.nodeName);//標籤---大寫的標籤名字 console.log(ulObj.parentNode.nodeValue);//標籤---null //根據屬性獲取節點 var node=dvObj.getAttributeNode("id"); var dvObj=document.getElementById("dv"); //子節點 console.log(dvObj.childNodes);//7個子節點 //子元素 console.log(dvObj.children);
- 凡是獲取節點的程式碼在谷歌和火狐得到的都是 相關的節點
- 凡是獲取元素的程式碼在谷歌和火狐得到的都是 相關的元素
- 從子節點和兄弟節點開始,凡是獲取節點的程式碼在IE8中得到的是元素,獲取元素的相關程式碼,在IE8中得到的是undefined----元素的程式碼,iE中不支援
- 獲取節點和元素的程式碼：
var ulObj=document.getElementById("uu");
//父級節點
console.log(ulObj.parentNode);
//父級元素
console.log(ulObj.parentElement);
//子節點
console.log(ulObj.childNodes);
//子元素
console.log(ulObj.children);
console.log("==============================================");
//第一個子節點
console.log(ulObj.firstChild);//------------------------IE8中是第一個子元素
//第一個子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支援
//最後一個子節點
console.log(ulObj.lastChild);//------------------------IE8中是第一個子元素
//最後一個子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支援
//某個元素的前一個兄弟節點
console.log(my$("three").previousSibling);
//某個元素的前一個兄弟元素
console.log(my$("three").previousElementSibling);
//某個元素的後一個兄弟節點
console.log(my$("three").nextSibling);
//某個元素的後一個兄弟元素
console.log(my$("three").nextElementSibling);
console.log("==============================================");
//第一個子節點
console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一個子元素
//第一個子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支援
//最後一個子節點
console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一個子元素
//最後一個子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支援
//某個元素的前一個兄弟節點
console.log(my$("three").previousSibling.innerText);
//某個元素的前一個兄弟元素
console.log(my$("three").previousElementSibling);
//某個元素的後一個兄弟節點
console.log(my$("three").nextSibling.innerText);
//某個元素的後一個兄弟元素
console.log(my$("three").nextElementSibling);節點相容程式碼：
<script>
//第一個節點和第一個元素的獲取的程式碼在IE8中可能不支援
//element.firstChild--->谷歌和火狐獲取的是第一個子幾點
//element.firstChile--->IE8獲取的是第一個子元素
//element.firstElementChild------>谷歌和火狐是第一個子元素,IE8不支援
//獲取任意一個父級元素的第一個子級元素
function getFirstElementChild(element) {
if(element.firstElementChild){//true--->支援
return element.firstElementChild;
}else{
var node=element.firstChild;//第一個節點
while (node&&node.nodeType!=1){
node=node.nextSibling;
}
return node;
}
}
//獲取任意一個父級元素的最後一個子級元素
function getLastElementChild(element) {
if(element.lastElementChild){//true--->支援
return element.lastElementChild;
}else{
var node=element.lastChild;//第一個節點
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
console.log(getFirstElementChild(my$("uu")).innerText);
console.log(getLastElementChild(my$("uu")).innerText);
//最後一個節點和最後一個元素的獲取的程式碼在IE8中可能不支援
//前一個節點和前一個元素的獲取的程式碼在IE8中可能不支援
//後一個節點和後一個元素的獲取的程式碼在IE8中可能不支援
</script>元素建立的三種方式
- document.write("標籤的程式碼及內容");
<script> //document.write("標籤程式碼及內容"); my$("btn").onclick=function () { document.write("<p>這是一個p</p>"); }; // document.write("<p>這是一個p</p>"); //document.write()建立元素,缺陷:如果是在頁面載入完畢後,此時通過這種方式建立元素,那麼頁面上存在的所有的內容全部被幹掉 </script> - 物件.innerHTML="標籤及程式碼";
<script> //點選按鈕,在div中建立一個p標籤 //第二種方式建立元素: 物件.innerHTML="標籤程式碼及內容"; my$("btn").onclick=function () { my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,舉頭望明月,低頭思故鄉</p>"; }; </script> - document.createElement("標籤的名字");
<script> //第三種方式建立元素 //建立元素 //document.createElement("標籤名字");物件 //把元素追加到父級元素中 //點選按鈕,在div中建立一個p my$("btn").onclick = function () { //建立元素的 var pObj = document.createElement("p"); setInnnerText(pObj, "這是一個p"); //把建立後的子元素追加到父級元素中 my$("dv").appendChild(pObj); }; </script>元素繫結多個事件
//為元素繫結事件(DOM):一種,但是不相容,有兩種
//1 物件.addEventListener("事件型別",事件處理函式,false);--谷歌和火狐支援,IE8不支援
//2 物件.attachEvent("有on的事件型別",事件處理函式)--谷歌不支援,火狐不支援,IE8支援
//為按鈕繫結點選事件
//引數1:事件的型別---事件的名字,沒有on
//引數2:事件處理函式---函式(命名函式,匿名函式)
//引數3:布林型別,目前就寫false-----沒有為什麼,不解釋,明天說
//為同一個元素繫結多個相同的事件--
// my$("btn").addEventListener("click",function () {
// console.log("1");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("2");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("3");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("4");
// },false);
//引數1:事件型別---事件名字，有on
//引數2:事件處理函式---函式(命名函式,匿名函式)
// my$("btn").attachEvent("onclick",function () {
// console.log("1");
// });
//
// my$("btn").attachEvent("onclick",function () {
// console.log("2");
// });
//
// my$("btn").attachEvent("onclick",function () {
// console.log("3");
// });
</script>
元素繫結事件的相容程式碼
<script>
//為任意元素.繫結任意的事件, 任意的元素,事件的型別,事件處理函式
function addEventListener(element,type,fn) {
//判斷瀏覽器是否支援這個方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});
</script>程式碼
1.案例點選按鈕設定div中p標籤改變背景顏色
<div id="dv">
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<p>這是p</p>
<span>這是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//先獲取div
var dvObj = my$("dv");
//獲取裡面所有的子節點
var nodes = dvObj.childNodes;
//迴圈遍歷所有的子節點
for (var i = 0; i < nodes.length; i++) {
//判斷這個子節點是不是p標籤
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "red";
}
}
};
//點選按鈕,設定p變色---節點的方式做
</script>2.節點操作隔行變色
<script>
//隔行變色--li
my$("btn").onclick = function () {
var count=0;//記錄有多少個li
//獲取ul中所有的子節點
var nodes = my$("uu").childNodes;
for (var i = 0; i < nodes.length; i++) {
//判斷這個節點是不是li標籤
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
count++;//8個
//nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
}
}
};
</script>3.切換背景圖片
<script>
var imgObjs=my$("mask").children;//獲取的所有的子元素
//迴圈遍歷所有img,註冊點選事件
for(var i=0;i<imgObjs.length;i++){
imgObjs[i].onclick=function () {
document.body.style.backgroundImage="url("+this.src+")";
};
}
</script>4.全選和全不選的實現
<script>
//獲取全選的這個複選框
var ckAll = my$("j_cbAll");
//獲取tbody中所有的小複選框
var cks = my$("j_tb").getElementsByTagName("input");
//點選全選的這個複選框,獲取他當前的狀態,然後設定tbody中所有複選框的狀態
ckAll.onclick = function () {
//console.log(this.checked);
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
};
//獲取tbody中所有的複選框,分別註冊點選事件
for(var i=0;i<cks.length;i++){
cks[i].onclick=function () {
var flag=true;//預設都被選中了
//判斷是否所有的複選框都選中
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
//沒選中就進來了
flag=false;
break;
}
}
//全選的這個複選框的狀態就是flag這個變數的值
ckAll.checked=flag;
};
}
</script>5.點選按鈕建立一個圖片
<script>
//點選按鈕,在div中建立一個圖片
my$("btn").onclick=function () {
my$("dv").innerHTML="<img src='images/liuyan.jpg' alt='美女' />";
};
</script>6.點選按鈕建立列表
<script>
// my$("btn").onclick=function () {
// my$("dv").innerHTML="<ul><li>楊過</li><li>小龍女</li><li>張無忌</li> <li>張三丰</li></ul>";
// };
var names = ["楊過", "郭靖", "張無忌", "張三丰", "喬峰", "段飛", "丁棚"];
my$("btn").onclick = function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根據迴圈建立對應對數的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
//程式碼執行到這裡,li已經有了
//獲取所有的li,遍歷,新增滑鼠進入事件,滑鼠離開事件
var list = my$("dv").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//滑鼠進入
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//滑鼠離開
list[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>7.點選按鈕動態建立列表
<script>
var kungfu = ["降龍十八掌", "黯然銷魂掌", "葵花寶典", "九陰真經", "吸星大法", "如來神掌", "化骨綿掌", "玉女心經", "極樂神功", "辟邪劍譜"];
//點選按鈕動態的建立列表,把列表加到div中
my$("btn").onclick = function () {
//建立ul,把ul立刻加入到父級元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//動態的建立li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//設定li中間的文字內容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//為li新增滑鼠進入事件
liObj.onmouseover = mouseoverHandle;
//為li新增滑鼠離開事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按鈕的點選事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是迴圈的方式新增事件,推薦用命名函式
//如果不是迴圈的方式新增事件,推薦使用匿名函式
</script>8.案例點選按鈕建立一個表格
<script>
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.google.com"},
{name:"優酷",href:"http://www.youku.com"},
{name:"土豆",href:"http://www.tudou.com"},
{name:"快播",href:"http://www.kuaibo.com"},
{name:"愛奇藝",href:"http://www.aiqiyi.com"}
];
//點選按鈕建立表格
my$("btn").onclick=function () {
//建立table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
my$("dv").appendChild(tableObj);
//建立行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每個物件
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//建立第一個列,然後加入到行中
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendChild(td1);
//建立第二個列
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
};
</script>9.按鈕刪除第一個及按鈕刪除所有元素
<script>
var i=0;
my$("btn").onclick=function () {
i++;
var obj= document.createElement("input");
obj.type="button";
obj.value="按鈕"+i;
//my$("dv").appendChild(obj);//追加子元素
//把新的子元素插入到第一個子元素的前面
my$("dv").insertBefore(obj,my$("dv").firstElementChild);
//my$("dv").replaceChild();---自己玩
};
my$("btn2").onclick=function () {
//移除父級元素中第一個子級元素
my$("dv").removeChild(my$("dv").firstElementChild);
};
my$("btn3").onclick=function () {
//點選按鈕刪除div中所有的子級元素
//判斷父級元素中有沒有第一個子元素
while(my$("dv").firstElementChild){
my$("dv").removeChild(my$("dv").firstElementChild);
}
};
</script>10.修改前面的bug，點選按鈕最多隻建立一個元素
my$("btn").onclick=function () {
//判斷,div中有沒有這個按鈕,有就刪除
//判斷這個按鈕的子元素是否存在
if(!my$("btn2")){//如果為true就有
var obj=document.createElement("input");
obj.type="button";
obj.value="按鈕";
obj.id="btn2";
my$("dv").appendChild(obj);
}
};