天天看點
傳回

JavaScript---基礎文法（六）DOM操作

1. window和document

window:所有的浏覽器都支援window對象，它支援浏覽器視窗。所有的js全局對象，函數以及變量都能自動成為window對象的成員。全局變量是window對象的屬性，全局函數是window對象的方法。

【 window.location.href = "http://www.baidu.com";】

document:document也是window對象的屬性之一,document對象是documentHTML的一個執行個體，也是window對象的一個屬性，是以可以将document對象作為一個全局對象來通路。常用屬性【document.childNodes】【document.head】【document.body】【 document.title】

2.事件

使用者和浏覽器之間的互動行為,    比如：點選按鈕，滑鼠進入/離開、輕按兩下...我們可以在事件對應的屬性中實作一些js代碼，這樣當事件被觸發時，這些代碼将會執行。

例如:按鈕點選事件

  • 方式一：結構和行為耦合，不友善維護，不推薦使用     
<button id="btn" onclick="alert('點選按鈕');">按鈕</button>
  • 方式二：為按鈕的對應事件綁定處理函數的形式來響應事件 
var btn = document.getElementById('btn');
btn.onclick = function (ev) {
        alert('點選按鈕');
 }

3.文檔加載過程

1）存在問題：浏覽器在加載一個頁面時，是按照自上向下的順序加載的。讀取到一行就運作一行, 如果将script标簽寫到head内部，在代碼執行時，頁面還沒有加載，頁面中的DOM對象也沒有加載，會導緻在js中無法擷取到頁面中的DOM對象。

2）解決方案：

  • 方法一:為window綁定一個onload事件, 該事件對應的響應函數将會在頁面加載完成之後執行，這樣可以確定我們的代碼執行時所有的DOM對象已經加載完畢了。onload事件會在整個頁面加載完成之後才觸發。
  • 方法二：把script标簽放在body尾部。

4.擷取DOM對象

  •         通過id擷取---【var btn1 = document.getElementById("btn");】
  •         通過類名---【var btn2 = document.getElementsByClassName("my-btn")[0];】
  •         通過标簽名---【var btn3 = document.getElementsByTagName("button")[0];】
  •         通過name屬性---【var btn4 = document.getElementsByName("btn")[0];】
  •         查詢選擇器---【var btn5 = document.querySelector(".my-btn");】
  •         查詢所有選擇器---【var btn6 = document.querySelectorAll(".my-btn")[0];】

5.節點之間的關系

  • 父節點---【box.parentNode】
  • 上一個兄弟節點---【var previous = span.previousElementSibling || span.previousSibling;】
  • 下一個兄弟節點---【 var next = span.nextElementSibling || span.nextSibling;】
  •  擷取标簽中第一個子節點---【box.firstElementChild || box.firstChild】
  • 擷取标簽中最後一個子節點---【box.lastElementChild || box.lastChild】
  •  擷取所有元素節點---【nodeType】每個節點都有一個 nodeType 屬性，用于表明節點的類型，節點類型由 Node 類型中定義12個常量表示nodeType=1代表元素節點；nodeType=2代表屬性節點；nodeType=3代表文本節點；nodeType=8代表注釋；nodeType=9代表整個文檔。
  • 擷取任意兄弟節點---【node.parentNode.children[1]);】 
<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #box {
        width: 200px;
        height: 200px;
        background: #ccc;
        padding: 20px 20px;
    }
    </style>
</head>

<body>
    <div id="box">
        <button class="btn">按鈕</button>
        <div id="list">
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百度一下</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >京東</a>
            <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >淘寶</a>
        </div>
        <div id="ha">
            哈哈哈
        </div>
    </div>
    </div>
    <script>
    window.onload = function() {
        // 1、擷取父節點
        var a = document.getElementsByTagName("a")[0];
        var parentNode = a.parentNode.parentNode;
        console.log("a标簽的父節點為：", parentNode);

        // 2、通過子盒子設定父盒子的背景色
        var btn = document.getElementsByClassName("btn")[0];
        btn.onclick = function() {
            var list = document.getElementById("list");
            var box = list.parentNode;
            box.style.backgroundColor = "red";
        };


        var list = document.getElementById("list");
        // 下一個
        var next = list.nextElementSibling || list.nextSibling;
        // 上一個
        var previous = list.previousElementSibling || list.previousSibling;
        console.log(next);
        console.log(previous);


        var box = document.getElementById("box");
        // 擷取第一個子節點
        console.log(box.firstElementChild || box.firstChild);

        // 擷取最後一個節點
        console.log(box.lastElementChild || box.lastChild);

        // 擷取所有子節點
        var allNodeList = box.childNodes;
        console.log("輸出所有子節點：", allNodeList);

        // 擷取所有的子元素節點nodeType === 1
        var newList = [];
        for (var i = 0; i < allNodeList.length; i++) {
            var node = allNodeList[i];
            if (node.nodeType === 1) {
                newList.push(node)
            }
        }
        console.log("輸出所有子元素節點", newList);

        var nodeList = box.children;
        console.log(nodeList);
        // 擷取任意兄弟節點
        var ha = document.getElementById("ha");
        console.log(ha.parentNode.children[1]);
    }
    </script>
    </bod } </script> </body> </html>

6.節點操作

建立節點---【createElement("img");】

删除節點---【btn.remove();】

克隆節點---【box.cloneNode(true);】

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #box {
        width: 200px;
        height: 200px;
        background: #ccc;
        padding: 20px 20px;
    }
    </style>
</head>

<body>
    <div id="box">
        <p id="word">哈哈哈</p>
        <button id="btn">點我</button>
        <img>
    </div>
    <script>
    window.onload = function() {
        // CRUD(增删改查)

        var box = document.getElementById("box");

        // 1. 建立節點
        var img = document.createElement("img");
        img.src = "img/icon_01.png";

        box.appendChild(img);

        // var btn = document.getElementsByTagName("button")[0];
        // box.insertBefore(img, btn);

        // 2. 删除節點
        var btn = document.getElementById("btn");
        btn.remove();
        // var word = document.getElementById("word");
        // word.parentNode.removeChild(word); // 

        // 3克隆節點 新節點=要複制的節點.cloneNode(參數) ; 參數可選複制節點
        var newTag = box.cloneNode(true);
        console.log(newTag);
        document.body.appendChild(newTag);

    }
    </script>
</body>

</html>

7.節點屬性

擷取：getAttribute(名稱)

設定：setAttribute(名稱, 值)

删除：removeAttribute(名稱)

8.value,  innerHTML,  innerText

相同點：value, innerHTML,  innerText都可以用來擷取和修改元素的值（或内容）；

不同點：value是用來修改（擷取）textarea和input的value屬性的值或元素的内容；

innerHTML 用來修改（擷取）HTML元素（如div）html格式的内容。

javascript DOM
上一篇: 記憶體存儲告急，榮耀小技巧幫你手機東西太多了，不舍得删除，記憶體不夠用。或者是想為重要資料再添一份安全保險？榮耀可以利用雲空
下一篇: 新婚快樂我的寶貝～@SALT愛你不隻17年·💓

繼續閱讀