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

js常用節(jié)點操作實例總結(jié)

 更新時間：2023年04月24日 10:53:09   作者：小白白中之白  
這篇文章主要介紹了js常用節(jié)點操作,結(jié)合實例形式總結(jié)分析了JavaScript針對dom節(jié)點的遍歷、查找、創(chuàng)建、刪除、克隆等相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下

一：父節(jié)點

1：返回父節(jié)點

element.parentNode，得到的是離元素最近的父節(jié)點。如果找不到則返回為null
代碼：

<body>
    <div>
        <div>
            <div></div>
        </div>
    </div>
    <script>
        var divs=document.querySelector(".s")
        console.log(divs.parentNode);
    </script>
</body>

效果：
在這里插入圖片描述

二：子節(jié)點

1:返回子節(jié)點

element.children,是一個只讀屬性，返回所有子元素節(jié)點，其余節(jié)點不返回
代碼：

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.children);
    </script>
</body>

效果:
在這里插入圖片描述

2：返回第一個和最后一個子節(jié)點

2.1:

element.firstElementChild,element.lastElementChild分別返回第一個和最后一個子元素節(jié)點，IE9+
代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
    </script>
</body>

效果：
在這里插入圖片描述

2.2：

element.children[0] , element.children[element.children.length-1]分別返回第一個和最后一個子元素節(jié)點
代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var ul=document.querySelector("ul")
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length-1]);
    </script>
</body>

效果：
在這里插入圖片描述

三：兄弟節(jié)點

1：返回兄弟節(jié)點

element.nextElementSibling，返回當(dāng)前元素下一個兄弟元素節(jié)點，找不到則返回null
element.previousElementSiblig，返回當(dāng)前元素上一個兄弟元素節(jié)點，找不到則返回null
IE9+

四：創(chuàng)建和添加元素節(jié)點

1：創(chuàng)建元素節(jié)點

1.1：

document.createElement()，動態(tài)創(chuàng)建元素節(jié)點

1.2：

innerHtml，創(chuàng)建節(jié)點

1.3：

document.write,創(chuàng)建節(jié)點，但導(dǎo)致頁面重繪

2：添加節(jié)點

2.1:

fartherelement.appendChild(childelement)，將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾
注意事項：創(chuàng)建和添加元素節(jié)點需要聯(lián)合使用

1&2：
添加前代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
    </script>
</body>

效果：
在這里插入圖片描述
添加后代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
      var ul=document.querySelector("ul")
      var li=document.createElement("li");
      ul.appendChild(li)
    </script>
</body>

注意：appendChild()中無引號。因為：規(guī)定變量或?qū)ο笫遣挥眉右柕?/strong>
效果：
在這里插入圖片描述

2.2:

element.insertBefore(child,指定元素)，將一個節(jié)點添加到父節(jié)點指定節(jié)點前面
代碼：

<body>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
      var ul=document.querySelector("ul")
      var li=document.createElement("li");
      ul.insertBefore(li,ul.children[0])
    </script>
</body>

效果：
在這里插入圖片描述

五：刪除節(jié)點

1：刪除元素節(jié)點

element.removeChild()
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    button{
        width: 100px;
        height: 100px;
    }
    </style>
</head>
<body>
    <button></button>
    <ul>
        <li>我第一</li>
        <li></li>
        <li></li>
        <li></li>
        <li>我最后</li>
    </ul>
    <script>
        var button=document.querySelector("button")
        var ul=document.querySelector("ul")
        button.onclick=function(){
        ul.removeChild(ul.children[0])
      }
    </script>
</body>
</html>

六：克隆節(jié)點

1：克隆節(jié)點（元素或文本）

element.cloneNode(),括號參數(shù)為空或者為false則為淺拷貝，只復(fù)制標(biāo)簽。括號參數(shù)為ture則復(fù)制標(biāo)簽和里面的內(nèi)容。克隆節(jié)點需要和添加節(jié)點一起使用

感興趣的朋友可以使用本站在線工具： http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果~

相關(guān)文章

  • 使用JavaScript實現(xiàn)一個簡易的熱更新

    使用JavaScript實現(xiàn)一個簡易的熱更新

    熱更新是指在應(yīng)用程序運行時,對程序的部分內(nèi)容進行更新,而無需重啟整個應(yīng)用程序,熱更新是在不停止整個應(yīng)用程序的情況下,將新的代碼、資源或配置應(yīng)用于正在運行的應(yīng)用程序,本文講給大家介紹一下使用JavaScript實現(xiàn)一個簡易的熱更新,需要的朋友可以參考下
    2023-08-08
  • js canvas實現(xiàn)紅包照片效果

    js canvas實現(xiàn)紅包照片效果

    這篇文章主要介紹了js canvas實現(xiàn)紅包照片效果
    2018-08-08
  • js實現(xiàn)的光標(biāo)位置工具函數(shù)示例

    js實現(xiàn)的光標(biāo)位置工具函數(shù)示例

    這篇文章主要介紹了js實現(xiàn)的光標(biāo)位置工具函數(shù),結(jié)合實例形式分析了JavaScript操作textarea文本框光標(biāo)位置及文本操作相關(guān)技巧,需要的朋友可以參考下
    2016-10-10
  • 百度移動版的url編碼解碼示例

    百度移動版的url編碼解碼示例

    這篇文章主要介紹了百度移動版的url編碼解碼的具體實現(xiàn),需要的朋友可以參考下
    2014-04-04
  • 關(guān)于JavaScript遞歸經(jīng)典案例題詳析

    關(guān)于JavaScript遞歸經(jīng)典案例題詳析

    遞歸是算法中一個重要的解法,因此,有必要單拎出來講講,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript遞歸經(jīng)典案例題的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 頁面使用密碼保護代碼

    頁面使用密碼保護代碼

    這是一個由JS實現(xiàn)的網(wǎng)頁密碼保護代碼，在進入網(wǎng)頁前需要在彈出框中輸入密碼才可以，不過現(xiàn)在不怎么用了，一般情況下，目前都在后臺處理這種功能，用戶輸入用戶名和密碼后交給服務(wù)器處理，然后再返回信息，若登錄無誤就可看到某些內(nèi)容
    2013-04-04
  • JavaScript中async和await的使用及隊列詳情

    JavaScript中async和await的使用及隊列詳情

    這篇文章主要介紹了JavaScript中async和await的使用及隊列詳情，主要圍繞js中async和await簡單解析展開面試中可能會問到的關(guān)于隊列的一些場景和知識點,需要的朋友可以參考一下
    2022-07-07
  • BootStrapValidator校驗方式

    BootStrapValidator校驗方式

    做輸入校驗的時候如果你前端框架用的是bootstrap的話，首推bootstrapValidator校驗方式，下面通過本文給大家分享下校驗流程，一起看看吧
    2016-12-12
  • JS版獲取字符串真實長度和取固定長度的字符串函數(shù)

    JS版獲取字符串真實長度和取固定長度的字符串函數(shù)

    JS版獲取字符串真實長度和取固定長度的字符串函數(shù)...
    2007-04-04
  • TypeScript常見類型及應(yīng)用示例講解

    TypeScript常見類型及應(yīng)用示例講解

    這篇文章主要介紹了TypeScript常見類型及應(yīng)用示例講解，本章我們會講解?JavaScript?中最常見的一些類型，以及對應(yīng)的描述方式，有需要的朋友可以借鑒參考下
    2022-02-02

最新評論