欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript DOM節(jié)點操作方式全面講解

 更新時間：2022年10月24日 08:35:00   作者：YinJie…  
DOM（Document Object Model 文檔對象模型）定義了訪問和操作文檔的標(biāo)準(zhǔn)方法。整個瀏覽器網(wǎng)頁就是一個Dom樹形結(jié)構(gòu)，這篇文章主要介紹了JavaScript DOM節(jié)點操作方式

一、獲取元素的兩種方式

我們獲取元素通常用兩種方式：

1.利用DOM提供的方法獲取元素

1.document.getElementByld()
2.document.getElementsByTagName
3.document.querySelector 等
4.邏輯性不強、繁瑣

比如在這里如果我們想獲取全部的li標(biāo)簽，我們應(yīng)該先得到父標(biāo)簽ul，可以用querySelector方法，然后再querySelectorAll里面的所有l(wèi)i。

所以這樣獲取元素帶來的邏輯性不強，只要用到都要獲取。

2.利用層級關(guān)系獲取元素

當(dāng)我們從節(jié)點層次考慮時，獲取上面的li就非常簡單了，因為li是ul的孩子，我們可以通過層級關(guān)系直接拿到他，非常的方便

1.利用父子兄節(jié)點關(guān)系獲取元素

2.邏輯性強，但是兼容性差

二、節(jié)點概述

網(wǎng)頁中的所有內(nèi)容都是節(jié)點(標(biāo)簽、屬性、文本、注釋等），在DOM中，節(jié)點使用node來表示。

HTML DOM樹中的所有節(jié)點均可通過JavaScript進(jìn)行訪問，所有HTML元素(節(jié)點)均可被修改，也可以創(chuàng)建或刪除。

DOM樹：

這些li都是標(biāo)簽都屬于元素節(jié)點

值得注意的是：

這里選中的空格屬于文本節(jié)點

一般地，節(jié)點至少擁有nodeType(節(jié)點類型）、nodeName(節(jié)點名稱)、和nodeValue(節(jié)點值)這三個基本屬性`

元素節(jié)點nodeType為1

屬性節(jié)點nodeType為2

文本節(jié)點nodeType 為3(文本節(jié)點包含文字、空格、換行等)

我們在實際開發(fā)中，節(jié)點操作主要操作的是元素節(jié)點

三、節(jié)點層級

1.父級節(jié)點

node.parentNode //得到離元素最近的父級節(jié)點，找不到父節(jié)點就返回null

2.子節(jié)點

在上述代碼中，我們想要獲取ul里的所有l(wèi)i，應(yīng)該怎么辦

下面是DOM提供的方法（API）獲?。?/p> 

var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');

現(xiàn)在我們可以通過節(jié)點操作來獲取子節(jié)點了

有以下兩種方法：

1.parentNode.childNodes(標(biāo)準(zhǔn))  //返回包括指定節(jié)點的子節(jié)點的集合
2.parentNode.children(非標(biāo)準(zhǔn))   //返回所有的子元素節(jié)點

那我們應(yīng)該用哪一種方法呢？

注意：第一種標(biāo)準(zhǔn)方法返回值里包含的是所有的子節(jié)點，包括元素節(jié)點、文本節(jié)點等（例如我們前面說過的空格）

如果只想要獲得里面的元素節(jié)點，則需要專門處理，所以一般不提倡用childNodes

第二種方法里parentNode.children是一個只讀屬性，返回所有的子元素節(jié)點。它只返回子元素節(jié)點，其余節(jié)點不返回（這個是我們重點掌握的)。

雖然children是一個非標(biāo)準(zhǔn)，但是得到了各個瀏覽器的支持，因此我們可以放心使用

3.第一個子元素和最后一個子元素

有以下代碼：

<ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
 </ol>

我們想要獲取第一個和最后一個li，應(yīng)該怎么做呢

var ol = document.querySelector( 'ol ');   //獲取父級節(jié)點
console.log(ol.firstChild);   //獲取第一個孩子

這樣，我們是不是可以獲得第一個li了呢？

輸出結(jié)果：

為什么沒有獲取到li呢，答案是因為firstChild獲取的是第一個子節(jié)點，

后面接著的是空格，所以第一個子節(jié)點應(yīng)該是文本節(jié)點。

所以我們可以得到：firstChild與lastChild返回的是第一個和最后一個子節(jié)點，不管是文本節(jié)點還是元素節(jié)點

那返回第一個元素節(jié)點和最后一個元素節(jié)點的方法是什么呢?

parentNode.firstElementChild
firstElementChild 返回第一個子元素節(jié)點，找不到則返回null。
parentNode.lastElementChild
lastElementChild返回最后一個子元素節(jié)點，找不到則返回null。

注意：這兩個方法有兼容性問題，IE9以上才支持

那到底什么是兩全其美的方法呢？

實際上開發(fā)的方法，既沒有兼容性問題又返回第一個和最后一個元素：

parentNode.children[0];   //返回第一個元素節(jié)點
parentNode.children[parentNode.children.length-1];   //返回最后一個元素節(jié)點

4.小案例（新浪下拉菜單）

實現(xiàn)效果：

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>小杰學(xué)前端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul {
            list-style: none;
        }
        .first {
            display: flex;
            width: 300px;
            height: 200px;
            margin: 100px auto;
        }
        .ab {
            display: flex;
            width: 25%;
            height: 100%;
            align-items: center;
            flex-direction: column;
        }
        a {
            text-decoration: none;
            margin-top: 20px;
            color: #555;
        }
        .menu {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            visibility: hidden;
        }
        .menu li{
            flex: 1;
            width: 100%;
            text-align: center;
            line-height: 50px;
        }
        .menu li:hover {
            background-color: rgb(250, 241, 228);
        }
    </style>
</head>
<body>
    <ul class="first"><!--ul中的各條目li默認(rèn)都是縱向排列的-->
        <li class="ab">
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="index">微博</a>
            <ul class="menu">
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >私信</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >評論</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >@我</a>
                </li>
            </ul>
        </li>
        <li class="ab">
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="index">微博</a>
            <ul class="menu">
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >私信</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >評論</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >@我</a>
                </li>
            </ul>
        </li>
        <li class="ab">
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="index">微博</a>
            <ul class="menu">
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >私信</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >評論</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >@我</a>
                </li>
            </ul>
        </li>
        <li class="ab">
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="index">微博</a>
            <ul class="menu" id="zzz">
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >私信</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >評論</a>
                </li>
                <li>
                    <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >@我</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
<script>
    var a = document.querySelector('.first');
    var b = a.children; //得到四個li
    for(let i=0;i<b.length;i++) {
        b[i].onmouseover = function() {
            b[i].children[1].style.visibility = 'visible';
            b[i].children[1].style.border = '2px solid orange';
            b[i].children[1].style.borderTop = '0';
        }
        b[i].onmouseout = function() {
            b[i].children[1].style.visibility = 'hidden';
        }
    }
</script>
</html>

5.兄弟節(jié)點

node.nextSibling   //nextSibling 返回的是下一個兄弟節(jié)點，包含元素節(jié)點或者文本節(jié)點等等
node.previousSibling   //previousSibling  返回的是上一個兄弟節(jié)點，包含元素節(jié)點或者文本節(jié)點等等
node.nextElementSibling  //返回當(dāng)前元素下一個兄弟元素節(jié)點，找不到則返回null
node.nextElementSibling  //返回當(dāng)前元素下一個兄弟元素節(jié)點，找不到則返回null

6.創(chuàng)建添加節(jié)點

document.createElement('tagName')

document.createElement()方法創(chuàng)建由tagName指定的HTML元素。因為這些元素原先不存在，是根據(jù)我們的需求動態(tài)生成的，所以我們也稱為動態(tài)創(chuàng)建元素節(jié)點

node.appendChild(child)

node.appendChild(child)方法將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾。類似于css里面的after偽元素

那我們應(yīng)該如何創(chuàng)建并成功添加上一個節(jié)點呢?

示例代碼：

<body>
        <ul></ul>
</body>
<script>
        //創(chuàng)建節(jié)點元素節(jié)點
        var li = document.createElement('li');
        //添加節(jié)點 node.appendChild(child) node父級 child是子級
        var ul = document.querySelector('ul');
        ul.appendChild(li);
</script>

在這段代碼中我們想在ul里面添加一個li

在瀏覽器中打開：

我們可以看到ul里面多了一個li標(biāo)簽

node.insertBefore(child,指定元素)

node.insertBefore() 方法將一個節(jié)點添加到父節(jié)點的指定子節(jié)點前面。類似于css里面的before偽元素

這里我們實現(xiàn)一下：

我們想在ul的li前面再添加一個li

示例代碼：

<script>
        //獲取父級元素
        var ul = document.querySelector('ul');
        //創(chuàng)建元素節(jié)點
        var lili = document.createElement('li');
        //添加元素節(jié)點
        ul.insertBefore(lili,ul.children[0]);
</script>

實現(xiàn)效果：

綜上所述，我們想要在頁面添加一個新的元素分兩步：1。創(chuàng)建元素 2.添加元素

7.刪除節(jié)點

node.removeChild(child) //node.removeChild(child) 方法從DOM中刪除一個子節(jié)點，返回刪除的節(jié)點

8.復(fù)制節(jié)點

node.cloneNode() //node.cloneNode() 方法返回調(diào)用該方法的節(jié)點的一個副本，也稱為克隆節(jié)點

示例：

比如我們想復(fù)制第一個li添加在第三個li后面：

示例代碼：

<script>
        //獲取父級元素
        var ul = document.querySelector('ul');
        //括號為空 淺拷貝，只復(fù)制標(biāo)簽不復(fù)制內(nèi)容
        //括號里面為true,復(fù)制標(biāo)簽復(fù)制里面的內(nèi)容
        var lili = ul.children[0].cloneNode(true);
        //克隆完之后需要添加節(jié)點
        ul.appendChild(lili);
</script>

實現(xiàn)效果：

注意：

1.我們在克隆完節(jié)點后，一定要添加節(jié)點才會實現(xiàn)效果

2.node.cloneNode() 如果括號為空是淺拷貝，只復(fù)制標(biāo)簽不復(fù)制內(nèi)容，括號里面為true,復(fù)制標(biāo)簽復(fù)制里面的內(nèi)容

到此這篇關(guān)于JavaScript DOM節(jié)點操作方式全面講解的文章就介紹到這了,更多相關(guān)JavaScript DOM節(jié)點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論