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

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

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

一、獲取元素的兩種方式

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

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

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

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

所以這樣獲取元素帶來(lái)的邏輯性不強(qiáng)，只要用到都要獲取。

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

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

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

2.邏輯性強(qiáng)，但是兼容性差

二、節(jié)點(diǎn)概述

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

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

DOM樹(shù)：

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

值得注意的是：

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

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

元素節(jié)點(diǎn)nodeType為1

屬性節(jié)點(diǎn)nodeType為2

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

我們?cè)趯?shí)際開(kāi)發(fā)中，節(jié)點(diǎn)操作主要操作的是元素節(jié)點(diǎn)

三、節(jié)點(diǎn)層級(jí)

1.父級(jí)節(jié)點(diǎn)

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

2.子節(jié)點(diǎn)

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

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

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

現(xiàn)在我們可以通過(guò)節(jié)點(diǎn)操作來(lái)獲取子節(jié)點(diǎn)了

有以下兩種方法：

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

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

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

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

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

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

3.第一個(gè)子元素和最后一個(gè)子元素

有以下代碼：

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

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

var ol = document.querySelector( 'ol ');   //獲取父級(jí)節(jié)點(diǎn)
console.log(ol.firstChild);   //獲取第一個(gè)孩子

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

輸出結(jié)果：

為什么沒(méi)有獲取到li呢，答案是因?yàn)閒irstChild獲取的是第一個(gè)子節(jié)點(diǎn)，

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

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

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

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

注意：這兩個(gè)方法有兼容性問(wèn)題，IE9以上才支持

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

實(shí)際上開(kāi)發(fā)的方法，既沒(méi)有兼容性問(wèn)題又返回第一個(gè)和最后一個(gè)元素：

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

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

實(shí)現(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" >評(píng)論</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" >評(píng)論</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" >評(píng)論</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" >評(píng)論</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; //得到四個(gè)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é)點(diǎn)

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

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

document.createElement('tagName')

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

node.appendChild(child)

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

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

示例代碼：

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

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

在瀏覽器中打開(kāi)：

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

node.insertBefore(child,指定元素)

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

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

我們想在ul的li前面再添加一個(gè)li

示例代碼：

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

實(shí)現(xiàn)效果：

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

7.刪除節(jié)點(diǎn)

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

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

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

示例：

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

示例代碼：

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

實(shí)現(xiàn)效果：

注意：

1.我們?cè)诳寺⊥旯?jié)點(diǎn)后，一定要添加節(jié)點(diǎn)才會(huì)實(shí)現(xiàn)效果

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

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

相關(guān)文章

最新評(píng)論