Javascript DOM2

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

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

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

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

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

偽元素: 偽元素只能應(yīng)用于塊級元素
:first-letter: 首個字符
樣式: 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. 小練習：div的移動

div

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

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

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

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

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

 // 6.2、獲取當前節(jié)點的上一個同級元素節(jié)點
 var pre2 = div4.previousElementSibling;

 // 6.3、獲取當前節(jié)點的下一同級節(jié)點
 var ne1 = div4.nextSibling;

 // 6.4、獲取當前節(jié)點的下一個同級元素節(jié)點
 var ne2 = div4.nextElementSibling;

 // 7、獲取當前節(jié)點下所有屬性節(jié)點
 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é)點
 
 // 元素（標簽）可以認為是節(jié)點， 節(jié)點不一定是元素

5.練習：小球碰撞問題

兩球問題

6. 動態(tài)操作節(jié)點

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

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

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

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

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

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

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

// 4.2 cloneNode(true) 復(fù)制當前節(jié)點及其子節(jié)點 默認false
var divC2 = div3.cloneNode(true);
console.log(divC1);

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

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

Javascript DOM3