碼上歡樂
相關內容    簡體    繁體

JS的DOM操作2--創建自定義屬性和節點(附帶動圖案例)

本文轉載自   查看原文   2021-10-12 22:16   94    前端筆記/ 前端

1.1. 排他操作

1.1.1 排他思想

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1ZVhZLWq-1633090874939)(images/1550914482628.png)]

如果有同一組元素，我們想要某一個元素實現某種樣式， 需要用到循環的排他思想算法：

  1. 所有元素全部清除樣式（干掉其他人）

  2. 給當前元素設置樣式 （留下我自己）

  3. 注意順序不能顛倒，首先干掉其他人，再設置自己

    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <button>按鈕4</button>
    <button>按鈕5</button>
    <script>
        // 1. 獲取所有按鈕元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是偽數組  里面的每一個元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我們先把所有的按鈕背景顏色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才讓當前的元素背景顏色為pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

1.2 案例：百度換膚

請添加圖片描述

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 獲取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循環注冊事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我們點擊圖片的路徑   images/2.jpg
                // console.log(this.src);
                // 把這個路徑 this.src 給body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

1.3 案例：表格隔行變色

請添加圖片描述

    <script>
        // 1.獲取元素 獲取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循環綁定注冊事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠標經過事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠標離開事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>

1.4 案例：全選

請添加圖片描述

    <script>
        // 1. 全選和取消全選做法：  讓下面所有復選框的checked屬性（選中狀態） 跟隨 全選按鈕即可
        // 獲取元素
        
        var j_cbAll = document.getElementById('j_cbAll'); 
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); 
        // 全選按鈕注冊事件
        j_cbAll.onclick = function() {
                // this.checked 當前復選框的選中狀態
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
         }
         // 給所有的子復選框注冊單擊事件
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全選按鈕是否選中
                var flag = true;
                // 每次點擊下面的復選框都要循環檢查者4個小按鈕是否全被選中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; 
                    }
                }
                // 設置全選按鈕的狀態
                j_cbAll.checked = flag;
            }
        }
    </script>

1.5. 自定義屬性操作

1.5.1 獲取屬性值

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Xdz8k4vH-1633090874950)(images/1550915376339.png)]

    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 獲取元素的屬性值
        // (1) element.屬性
        console.log(div.id);
        //(2) element.getAttribute('屬性')  get得到獲取 attribute 屬性的意思 我們程序員自己添加的屬性我們稱為自定義屬性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

1.5.2. 設置屬性值

在這里插入圖片描述

        // 2. 設置元素屬性值
        // (1) element.屬性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('屬性', '值');  主要針對於自定義屬性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  這里面寫的就是

1.5.3. 移出屬性

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-HxE6U42Q-1633090874952)(images/1550915513137.png)]

		// class 不是className
        // 3 移除屬性 removeAttribute(屬性)    
        div.removeAttribute('index');

1.5.4. H5自定義屬性

自定義屬性目的：是為了保存並使用數據。有些數據可以保存到頁面中而不用保存到數據庫中。

自定義屬性獲取是通過getAttribute(‘屬性’) 獲取。

但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內置屬性還是自定義屬性。

H5給我們新增了自定義屬性：

在這里插入圖片描述

    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的獲取自定義屬性的方法 它只能獲取data-開頭的
        // dataset 是一個集合里面存放了所有以data開頭的自定義屬性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定義屬性里面有多個-鏈接的單詞，我們獲取的時候采取 駝峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

1.6. 節點操作

1.6.1. 節點概述

​ 網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），在DOM 中，節點使用 node 來表示。

​ HTML DOM 樹中的所有節點均可通過 JavaScript 進行訪問，所有 HTML 元素（節點）均可被修改，也可以創建或刪除。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VPA7w6N0-1633090874956)(images/1550970944363.png)]

​ 一般地，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DNUUwwJt-1633090874956)(images/1550970986988.png)]

1.6.2. 節點層級

​ 利用 DOM 樹可以把節點划分為不同的層級關系，常見的是父子兄層級關系。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VPA7w6N0-1633090874956)(images/1550970944363.png)]

1.6.3. 父級節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pHRWmSag-1633090874957)(images/1550971196686.png)]

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父節點 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就返回為 null
        console.log(erweima.parentNode);
    </script>

1.6.4. 子節點

所有子節點

在這里插入圖片描述

子元素節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LCPNxlZ9-1633090874959)(images/1550971325828.png)]

    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法（API）獲取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子節點  childNodes 所有的子節點 包含 元素節點 文本節點等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 獲取所有的子元素節點 也是我們實際開發常用的
        console.log(ul.children);
    </script>

第1個子節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-5hGMpZww-1633090874959)(images/1550971774758.png)]

最后1個子節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BtHb2JUd-1633090874960)(images/1550971825493.png)]

第1個子元素節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bbmFTNQ1-1633090874960)(images/1550972014509.png)]

最后1個子元素節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X7B7O2ZO-1633090874961)(images/1550972106485.png)]

​ 實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那么我們如何獲取第一個子元素節點或最后一個子元素節點呢？

在這里插入圖片描述

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一個子節點 不管是文本節點還是元素節點
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一個子元素節點 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 實際開發的寫法  既沒有兼容性問題又返回第一個子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

1.6.5. 案例：新浪下拉菜單

請添加圖片描述

    <script>
        // 1. 獲取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4個小li
        // 2.循環注冊事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>

1.6.6. 兄弟節點

下一個兄弟節點

element.nextSibling

上一個兄弟節點

div.previousSibling

    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一個兄弟節點 包含元素節點或者 文本節點等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一個兄弟元素節點
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

1.6.7. 創建節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ebAPHpLs-1633090874967)(images/1550975514321.png)]

1.6.8. 添加節點

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dQoYos0y-1633090874968)(images/1550975640170.png)]

    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 創建節點元素節點
        var li = document.createElement('li');
        // 2. 添加節點 node.appendChild(child)  node 父級  child 是子級 后面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加節點 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我們想要頁面添加一個新的元素 ： 1. 創建元素 2. 添加元素
    </script>

1.6.9. 案例：簡單版發布留言

請添加圖片描述

<body>
    <textarea name="" id=""></textarea>
    <button>發布</button>
    <ul>

    </ul>
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注冊事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您沒有輸入內容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 創建元素
                var li = document.createElement('li');
                // 先有li 才能賦值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 DOM自定義屬性操作 JavaScript DOM操作案例移除元素的自定義屬性 js自定義屬性的操作 JS 操作 HTML 自定義屬性 js 自定義屬性 activiti modeler 任務節點自定義屬性擴展 十七. HTML5 DOM擴展(獲取元素方式, 類名操作, 自定義屬性) HTML5的自定義屬性data-*詳細介紹和JS操作實例 JS --- 修改自定義屬性 JS自定義屬性的設置與獲取
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM