JS DOM用不同方法獲取節點及對節點插入、複製和移除

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/07/12273549.html
-Advertisement-
Play Games

操作節點的方法 appendChild() insertBefore() replaceChild() cloneNode() normalize() splitText() sppendChild() 追加子元素 .firstElementChild() 第一個子元素節點 返回值是被操作的那個子節 ...


操作節點的方法

appendChild()

insertBefore()

replaceChild()

cloneNode()

normalize()

splitText()

 

 

sppendChild()  追加子元素

.firstElementChild()  第一個子元素節點

返回值是被操作的那個子節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);
            var myli=ul.appendChild(li);
            console.log(myli);//返回值是被操作的那個子節點

            // 獲取到的第一個子元素被移動到了最後
            var firstLi=ul.firstElementChild;
            ul.appendChild(firstLi);


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

.children.item(n) 獲取第n+1個子元素節點

.children[n]  獲取第n+1個子元素節點

父元素.insertBefore(被插入的元素，要插入的位置）  會在指定位置之前插入元素

返回值就是新插入的節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);

            var pos=ul.children[2];
            ul.insertBefore(li,pos);
            var myli=ul.insertBefore(li,pos);
            console.log(myli);//返回值是被操作的那個子節點


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

當第二個參數設置為null時，能夠實現與appendChild相同的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);

            ul.insertBefore(li,null);


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

replaceChild(要插入的節點，被替換掉的節點）

返回值是被替換的節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("myul");
            var txt=document.createTextNode("4");
            var li=document.createElement("li");
            li.appendChild(txt);

            //ul.replaceChild(li,ul.lastElementChild);
            var oldLi=ul.lastElementChild;
            var returnNode=ul.replaceChild(li,oldLi);
            console.log(returnNode);


        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

 

 不過我發現在控制台嘗試想要選中被返回的節點，頁面就崩潰了

 

 .cloneNode() 淺拷貝

.cloneNode(true)  深拷貝，會把子元素也拷貝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("myul");
            var newNode=ul.cloneNode();
            console.log(newNode);

            var newNode2=ul.cloneNode(true);
            console.log(newNode2);

            document.body.appendChild(newNode2);

        });

    </script>
</head>
<body>
    <ul id="myul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

 

 normalize()

normalize() 方法移除空的文本節點，並連接相鄰的文本節點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var div=document.createElement("div");
            var txt1=document.createTextNode("hello~");
            var txt2=document.createTextNode("cyy~");
            div.appendChild(txt1);
            div.appendChild(txt2);
            document.body.appendChild(div);
            console.log(div.childNodes.length);//2   <div>"hello~" "cyy~"</div>
            div.normalize();
            console.log(div.childNodes.length);//1  <div>hello~cyy~</div>

        });

    </script>
</head>
<body>
    
</body>
</html>

splitText(n) 把一個文本節點分割為兩個，從位置n開始

並且返回新的文本節點

splitText()方法將在指定的 offset 處把 Text 節點分割成兩個節點。原始的 Text 節點將被修改，使它包含 offset 指定的位置之前的文本內容（但不包括文本內容）。新的 Text 節點將被創建，用於存放從 offset 位置（包括該位置上的字元）到原字元結尾的所有字元。新的 Text 節點是該方法的返回值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var div=document.createElement("div");
            var txt=document.createTextNode("hello~cyy~");
            div.appendChild(txt);
            document.body.appendChild(div);
            console.log(div.childNodes.length);//1  "hello~cyy~"
            
            //div.childNodes[0].splitText(5);
            //console.log(div.childNodes.length);//2   "hello" "~cyy~"

            var newNode=div.childNodes[0].splitText(5);
            console.log(newNode);//"~cyy~"

        });

    </script>
</head>
<body>
    
</body>
</html>

removeChild()

返回被刪除的子節點

必須傳入參數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("ul");
            ul.removeChild(ul.children[1]);
        });

    </script>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

 

removeNode()

是IE的私有實現

刪除目標節點。預設參數是false，僅刪除目標節點

當參數為true，則會把目標節點的子節點也刪除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            // var ul=document.getElementById("ul");
            // var removedNode=ul.removeNode();
            // console.log(removedNode.outerHTML);//<ul id="ul"></ul>

            var ul=document.getElementById("ul");
            var removedNode=ul.removeNode(true);
            console.log(removedNode.outerHTML);
            // <ul id="ul">
            //     <li>1</li>
            //     <li>2</li>
            //     <li>3</li>
            // </ul>
        });

    </script>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

removeChild() 和innerHTML的區別

第一組對比

結論：使用removeChild()刪除子節點，在IE8以下會有殘留，久而久之占用記憶體

使用innerHTML刪除子節點，沒有殘留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var div=document.createElement("div");
            console.log(div.parentNode);//null 還沒有裝載到dom樹上

            // document.body.removeChild(document.body.appendChild(div));
            // console.log(div.parentNode);//IE8以下存在文檔碎片，其他瀏覽器為null

            document.body.innerHTML="";
            console.log(div.parentNode);//null
        
        });

    </script>
</head>
<body>

</body>
</html>

第二組對比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • redis兩種持久化方式RDB和AOF
    目錄 前言 1. Redis 資料庫結構 2. RDB 持久化 2.1. RDB 的創建和載入 2.1.1. 手動觸發保存 SAVE 命令 BGSAVE 命令 SAVE 和 BGSAVE 的比較 2.1.2. 自動觸發保存 2.1.3. 啟動自動載入 2.2. RDB 的文件結構 2.2.1. 存儲 ...
  • mysql簡單備份與恢復
    1.備份 mysqldump -u root -h 127.0.0.1 -p --set-gtid-purged=OFF abc > /data/mysqlBak/abc_20200206.sql 2.恢復 將備份的資料庫恢復到新的資料庫abc-2 1)需要創建資料庫abc-2 mysql -u r ...
  • 【React Native錯誤集】* What went wrong: Execution failed for task ':app:installDebug'.
    錯誤1：* What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallExc ...
  • HTML連載66-過度模塊的連寫、彈性效果
    一、過渡模塊的連寫 1.過渡連寫格式： 過渡屬性 過渡時長 運動速度 延遲時間； 2.過渡連寫註意點： （1）和分開寫一樣，如果想要多個屬性添加過渡效果，也是使用逗號來隔開即可。 （2）連寫的時候可以省略後面的兩個參數，因為只要編寫了前面的兩個參數就已經滿足了過渡的三要素。 （3）如果多個屬性運動的 ...
  • 1.Android網路編程-HTML介紹
    1.HTML介紹 超文本標記語言（HyperText Markup Language，簡稱：HTML）是一種用於創建網頁的標準標記語言。 在Eclipse下則可以使用自帶的瀏覽器瀏覽html: 2.HTML常用元素標簽 <head> 標簽用於定義文檔的頭部 把 <head> 標簽放在文檔的開始處，緊 ...
  • JS事件綁定的三種方式比較
    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: b ...
  • JS筆記之第二天
    一元運算符：++ -- 分為前++和後++ and 前--和後-- 如果++在後面，如：num++ +10參與運算，先參與運算，自身再加1 如果++在前面，如：++num+10參與運算，先自身加1，然後再參與運算 如果--在後面，如：num-- +10參與運算，先參與運算，自身再減1 如果--在前面 ...
  • JS DOM屬性，包括固有屬性和自定義屬性，以及屬性獲取、移除和設置
    屬性分為固有屬性property和自定義屬性attribute 固有屬性查看 固有屬性可以通過ele.property 來獲取，自定義屬性不行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document ...
一周排行
    -Advertisement-
    Play Games
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類