Javascript DOM2

e10101 發(fā)布于2019-08-22 17:20 / 1609人閱讀

摘要：內(nèi)部樣式及外部樣式的獲取及修改內(nèi)部樣式或外部樣式不能通過(guò)屬性獲取樣式瀏覽器非標(biāo)簽節(jié)點(diǎn)，偽元素樣式名只讀屬性標(biāo)簽節(jié)點(diǎn)，偽元素樣式名兼容寫(xiě)法偽元素偽元素只能應(yīng)用于塊級(jí)元素首個(gè)字符樣式首行樣式在元素后面添加新的內(nèi)容樣式在元素前面添加新的內(nèi)容樣

1. 內(nèi)部樣式及外部樣式的獲取及修改

內(nèi)部樣式或外部樣式不能通過(guò)style屬性獲取樣式
IE瀏覽器：var width = div1.currentStyle.width;
非IE:window.getComputedStyle(標(biāo)簽節(jié)點(diǎn)，偽元素).樣式名   
只讀屬性?。。?br>window.getComputedStyle(標(biāo)簽節(jié)點(diǎn)，偽元素)["樣式名"]
var height = window.getComputedStyle(div1, null).height;

// 兼容寫(xiě)法
if(div1.currentStyle){
    var width = div1.currentStyle.width;
    console.log(width);
}else{
    var height = window.getComputedStyle(div1, null).height;
    console.log(height);
}

偽元素: 偽元素只能應(yīng)用于塊級(jí)元素
:first-letter: 首個(gè)字符
樣式: color background border float margin padding
:first-line: 首行
樣式: color background border float margin padding
:after :在元素后面添加新的內(nèi)容
樣式: content
:before :在元素前面添加新的內(nèi)容
樣式: content



var p1 = document.getElementById("p1");
var text1 = window.getComputedStyle(p1, "after").content;
console.log(text1);    //"where are you from"

2. 小練習(xí)：div的移動(dòng)

div

3. 節(jié)點(diǎn)常用屬性

注：文檔節(jié)點(diǎn) #document 9 null

4. 父子節(jié)點(diǎn)的關(guān)系

var div1 = document.getElementById("div1"); 
// 1、獲取當(dāng)前節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
var childNodeArr = div1.childNodes;
// [text, div#div2, text, div#div3, text, div#div4, text]
console.log(childNodeArr);
// 2、獲取當(dāng)前節(jié)點(diǎn)下的第一個(gè)子節(jié)點(diǎn)
var firstNode = div1.firstChild;
console.log(firstNode);   // "div1    "
console.log(typeof firstNode);  // object

// 文本節(jié)點(diǎn)屬性
console.log(firstNode.nodeName);  //#text
console.log(firstNode.nodeType);  //3
console.log(firstNode.nodeValue);  // "div1    "
 
 
 // 3、獲取當(dāng)前節(jié)點(diǎn)下的最后一個(gè)子節(jié)點(diǎn)
 var lastNode = div1.lastChild;
 
 // 4、獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
 var parentNode = div1.parentNode;
 console.log(parentNode);  // body
 
 // 5、獲取根節(jié)點(diǎn)
 var doc = div1.ownerDocument;
 console.log(doc);
 
 // 6、獲取兄弟節(jié)點(diǎn)
 var div4 = document.getElementById("div4");
 // 6.1、獲取當(dāng)前節(jié)點(diǎn)的上一同級(jí)節(jié)點(diǎn)
 var pre1 = div4.previousSibling;

 // 6.2、獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)同級(jí)元素節(jié)點(diǎn)
 var pre2 = div4.previousElementSibling;

 // 6.3、獲取當(dāng)前節(jié)點(diǎn)的下一同級(jí)節(jié)點(diǎn)
 var ne1 = div4.nextSibling;

 // 6.4、獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)同級(jí)元素節(jié)點(diǎn)
 var ne2 = div4.nextElementSibling;

 // 7、獲取當(dāng)前節(jié)點(diǎn)下所有屬性節(jié)點(diǎn)
 var attArr = div4.attributes;
 console.log(attArr);
 console.log(attArr[0].nodeName);   //獲取屬性的名字  id
 console.log(attArr[0].nodeValue);   //獲取屬性的值  div4
 console.log(attArr[0].nodeType);   // 2 屬性節(jié)點(diǎn)
 
 // 元素（標(biāo)簽）可以認(rèn)為是節(jié)點(diǎn)， 節(jié)點(diǎn)不一定是元素

5.練習(xí)：小球碰撞問(wèn)題

兩球問(wèn)題

6. 動(dòng)態(tài)操作節(jié)點(diǎn)

方法	說(shuō)明
createElement(tagName)	創(chuàng)建元素節(jié)點(diǎn)
父節(jié)點(diǎn).appendChild(新元素節(jié)點(diǎn))	將元素節(jié)點(diǎn)添加到父節(jié)點(diǎn)上
insertBefore(新的元素節(jié)點(diǎn)，參照物節(jié)點(diǎn))	將元素添加到節(jié)點(diǎn)之前
div2.id = "div2"	動(dòng)態(tài)添加屬性
createTextNode (Text)	創(chuàng)建文本節(jié)點(diǎn)
cloneNode()	只復(fù)制當(dāng)前節(jié)點(diǎn)
cloneNode(true)	復(fù)制當(dāng)前節(jié)點(diǎn)及其子節(jié)點(diǎn) 默認(rèn)false
replaceChild(新的節(jié)點(diǎn)，舊的節(jié)點(diǎn))	替換節(jié)點(diǎn)
removeChild(Element)	刪除元素

// 1、創(chuàng)建元素節(jié)點(diǎn)
var div1 = document.createElement("div");
// 設(shè)置innerHTML
div1.innerHTML = "我才來(lái)了";

//1.1、將元素節(jié)點(diǎn)添加到父節(jié)點(diǎn)上
// 父節(jié)點(diǎn).appendChild(新元素節(jié)點(diǎn))
// document.body 獲取body節(jié)點(diǎn)
document.body.appendChild(div1);

// 1.2、將元素添加到節(jié)點(diǎn)之前
// 將新的標(biāo)簽節(jié)點(diǎn)放到參照物之前
var div2 = document.createElement("div");
div2.innerHTML = "明天注意防曬";
var h = document.getElementById("h2");
document.body.insertBefore(div2, h);

// 2、動(dòng)態(tài)添加屬性
// 例子：添加id屬性
div2.id = "div2";

// 3、創(chuàng)建文本節(jié)點(diǎn)
// 一個(gè)對(duì)象只能放到一個(gè)位置上
var text1 = document.createTextNode("還不來(lái)");
var d = document.getElementById("div1");
// d.appendChild(text1);
// 添加到父節(jié)點(diǎn)上
document.body.appendChild(text1);

// 4、復(fù)制節(jié)點(diǎn)
// 4.1 cloneNode()
var div3 = document.getElementById("div3");
var divC1 = div3.cloneNode();
console.log(divC1);

// 4.2 cloneNode(true) 復(fù)制當(dāng)前節(jié)點(diǎn)及其子節(jié)點(diǎn) 默認(rèn)false
var divC2 = div3.cloneNode(true);
console.log(divC1);

// 5、替換節(jié)點(diǎn)
// replaceChild(新的節(jié)點(diǎn)，舊的節(jié)點(diǎn))
var h1 = document.getElementById("h1");
var div5 = document.createElement("div");
div5.innerHTML = "看完就走了"
document.body.replaceChild(div5,h1)

// 6、 刪除元素
document.body.removeChild(div5);

Javascript DOM3