JavaScript-DOM（2）

時間 2019-11-19

原文原文鏈接

內部樣式及外部樣式的獲取及修改

內部樣式或外部樣式不能經過style屬性獲取樣式
IE瀏覽器：var width = div1.currentStyle.width;
非IE：window.getComputedStyle(標籤節點，僞元素).樣式名
只讀屬性！！！
window.getComputedStyle(標籤節點，僞元素)['樣式名']
var height = window.getComputedStyle(div1, null).height;javascript

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

僞元素：僞元素只能應用於塊級元素
:first-letter：首個字符
樣式： color、background、border、float、margin、padding
:first-line：首行
樣式： color、background、border、float、margin、padding
:after：在元素後面添加新的內容
樣式：content
:before：在元素前面添加新的內容
樣式：contentcss

<style type="text/css">
#p1:after{
            content:'where are you from'
        }
</style>

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

小練習：div的移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style type="text/css">
        #box{
            width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 0px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button onclick="start()" style="position: absolute;left: 150px;top: 150px">開始</button>
    <button onclick="pause()" style="position: absolute;left: 200px;top: 150px">暫停</button>

    <script type="text/javascript">
        function start() {
            var div = document.getElementById("box");
            // 設置一個定時器，每隔0.1秒執行一次move函數
            timer = window.setInterval(move, 100);

            
            function move() {
                // 得到div的left屬性，並取得整數
                var currentLeft = parseInt(window.getComputedStyle(div, null).left);
                // 更新left屬性的值
                div.style.left = (currentLeft + 5) + "px";

                var currentTop = parseInt(window.getComputedStyle(div, null).top);
                div.style.top = (currentTop + 5) + "px";
            }
        }
        function pause () {
            // 清除定時器
            window.clearInterval(timer);
        }
    </script>
</body>
</html>

節點經常使用屬性

父子節點的關係

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

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

 // 6.二、獲取當前節點的上一個同級元素節點
 var pre2 = div4.previousElementSibling;

 // 6.三、獲取當前節點的下一同級節點
 var ne1 = div4.nextSibling;

 // 6.四、獲取當前節點的下一個同級元素節點
 var ne2 = div4.nextElementSibling;

 // 七、獲取當前節點下全部屬性節點
 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 屬性節點
 
 // 元素（標籤）能夠認爲是節點， 節點不必定是元素

動態操做節點

方法	說明
createElement(tagName)	建立元素節點
父節點.appendChild(新元素節點)	將元素節點添加到父節點上
insertBefore(新的元素節點，參照物節點)	將元素添加到節點以前
div2.id = 'div2'	動態添加屬性
createTextNode (Text)	建立文本節點
cloneNode()	只複製當前節點
cloneNode(true)	複製當前節點及其子節點默認false
replaceChild(新的節點，舊的節點)	替換節點
removeChild(Element)	刪除元素

// 一、建立元素節點
var div1 = document.createElement('div');
// 設置innerHTML
div1.innerHTML = '我纔來了';

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

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

// 二、動態添加屬性
// 例子：添加id屬性
div2.id = 'div2';

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

// 四、複製節點
// 4.1 cloneNode()
var div3 = document.getElementById("div3");
var divC1 = div3.cloneNode();
console.log(divC1);

// 4.2 cloneNode(true) 複製當前節點及其子節點 默認false
var divC2 = div3.cloneNode(true);
console.log(divC1);

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。