JS操作dom節點及相容性

阿新 • • 發佈：2019-01-13

父節點 parentNode

獲取到的是自己的親父親（直屬關係）

// 點選孩子隱藏父親
<script>
    window.onload = function(){
        var child = document.getElementById("child");
        child.onclick = function(){
            this.parentNode.style.display = "none";
        }
    }
</script>

兄弟節點 nextSibling previousSibling

nextSibling，下一個兄弟，ie 678相容。
nextElementSibling，下一個兄弟，相容除了ie678的其他瀏覽器。
previousSibling，上一個兄弟，ie 678相容。
previousElementSibling，上一個兄弟，相容除了ie678的其他瀏覽器。
想要相容,我們可以合寫 || ，注意：必須先寫正常瀏覽器,後寫 ie678。

<script>
    window.onload = function () {
        var box = document.getElementById("box");
        var select = box.nextElementSibling || box.nextSibling;
        select.style.backgroundColor = "pink";
        var select2 = box.previousElementSibling || box.previousSibling ;
        select2.style.backgroundColor = "yellow";
    }
</script>

<body>
    <div></div>
    <div id="box"></div>
    <div></div>
</body>

子節點

firstChild 第一個孩子，ie678
firstElementChild 第一個孩子，其他瀏覽器
相容寫法 var boy = someone.firstElementChild || someone.firstChild;
lastChild 最後一個孩子，ie678
lastElementChild 最後一個孩子，其他瀏覽器
相容寫法 var boy = someone.lastElementChild || someone.lastChild;
childNodes 選出全部的孩子。注意：谷歌火狐等會把換行也當成一個孩子。所有要遍歷所有的孩子節點，利用nodeType == 1 時才是元素節點,來獲取元素節點。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function()
        {
            var ul = document.getElementById("ul")
            var childrens = ul.childNodes; //選擇全部的孩子
            alert(childrens.length);  //結果是7 因為谷歌火狐會把換行也當成一個孩子
            //利用nodeType == 1 時才是元素節點,來獲取元素節點
            for(var i=0; i<childrens.length; i++)
            {
                if( childrens[i].nodeType == 1)    
                {
                   childrens[i].style.backgroundColor = "pink";
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul">
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
</body>
</html>

children 選取所有的孩子（只有元素節點）。推薦用這個來代替childNodes。注意：ie 678會包含註釋節點，這個要避免開。

建立節點 creatElement();

建立一個div元素節點：var div = document.creatElement(“div”);

插入節點 appendChild() insertBefore()

appendChild() 新增節點到父盒子的最後面。
insertBefore(插入的節點，參照節點) 新增節點到參照節點的前面。注意：如果第二個引數為 null 則預設將插入的節點放到最後面。

移除節點 removeChild()

// 移除demo中的test
var test = document.getElementById("test");
demo.removeChild(test);

克隆節點 cloneNode()

括號裡面可以跟引數，如果裡面是 true，則深層複製，除了複製本節點，還複製其子節點。
如果為 false 淺層複製，只複製本節點，不復制其子節點。

程式碼示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function() {
            var demo = document.getElementById("demo");
            var childrens = demo.children; //選中demo所有的孩子

            //建立節點
            var firstdiv = document.createElement("div");
            //新增節點
            demo.appendChild(firstdiv); //從後面新增

            //建立節點
            var test = document.createElement("div");
            //插入節點
            demo.insertBefore(test, childrens[0]); 
            //insertBefore(插入的節點，參照節點) ,新增到參照節點的前面。
            //demo.insertBefore(test,null)  參照節點為null，預設放在盒子的最後面。

            var test_1  = document.getElementById("test_1");
            demo.removeChild(test_1); //移除節點

            var last = childrens[0].cloneNode(); //克隆節點，克隆demo中的第一個孩子。
            demo.appendChild(last); //插入節點到demo的最後

            //克隆一個demo
            demo.parentNode.appendChild(demo.cloneNode(true)); //給我的爸爸新增一個孩子，就是我的兄弟。
        }
    </script>
</head>
<body>
<div id="demo">
    <div id="test_1"></div>
    <div id="test_2"></div>
</div>
</body>
</html>

JS操作dom節點及相容性

父節點 parentNode 獲取到的是自己的親父親（直屬關係） // 點選孩子隱藏父親 <script> window.onload = function(){ var child = document.getElementById("

js操作dom節點，建立,複製,刪除,新增,查詢等操作總結

1.建立節點 document.createElement(“div”);//建立一個div元素，引數需要是標籤名； document.createTextNode(“233”);//建立一個文

5月25日-js操作DOM遍歷子節點

bsp 單選 function nbsp 選擇 ngs pan alert find() 一、遍歷節點遍歷子節點 children();//獲取節點的所有直接子類遍歷同輩節點 next(); prev()

js操作DOM對象（節點的增刪改）

pre charset char body creat title 替換 type script <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&

js的DOM節點操作：創建，插入，刪除，復制，查找節點

con 函數 nts html屬性追加 clas tracking nodes 末尾 DOM含義：DOM是文檔對象模型(Document Object Model，是基於瀏覽器編程的一套API接口，是W3C出臺的推薦標準。其賦予了JS操作節點的能力。當網頁被加載時，瀏

js中dom基礎及操作dom

span htm 們的 cti class rem itl ech http dom基礎認識　　1.dom節點　　1）children,獲取的是所有的孩子節點，獲取的是數組　　2）parentNode,獲取的是父節點，獲取的是對象　　2.dom操作方法　　1）ap

原生 js 操作dom的方法（建立節點和操作節點的幾種方法）

var newNode= document.createElement("p");//建立新節點 var text= document.createTextNode("hello");//建立文字節點 newNode.appendChild(text); docum

js操作DOM--新增、刪除節點

js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javas

node.js零基礎詳細教程(7)：node.js操作mongodb，及操作方法的封裝

font 裏的 ges 格式上進 ins 方法回調函數方式第七章建議學習時間4小時課程共10章學習方式：詳細閱讀，並手動實現相關代碼學習目標：此教程將教會大家安裝Node、搭建服務器、express、mysql、mongodb、編寫後臺業務邏輯、編寫接口

JavaScript 操作DOM 節點

cnblogs -1 操作dom -- append com 技術分享節點 doctype 1、添加DOM節點 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

js操作DOM對象

ons 獲取 ont logs nod 愛的容器 ren gem <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

js操作dom時發生了什麽？

16px 什麽 pan bsp nbsp 元素性能需要操作dom 每次對dom的操作都會觸發"重排"，這嚴重影響到能耗，一般通常采取的做法是盡可能的減少dom操作來減少"重排" 處理方法：創建一個文檔碎片將需要添加的大量元素先添加到文檔碎片中，

JS--操作DOM樹

ole before 獲取 n) parent 節點刪除創建 click lac <ul id="ul1"> <li id="li1">111</li> <li id="li2">222</li> <

jQuery 操作DOM節點

children end inner put htm 詹姆斯 rip clas function html 內容！ <body > <p>你最喜歡的名人是？</p> <ul> <li t

為什麼說js操作DOM很慢

為什麼說js操作DOM會影響效能呢？在瀏覽器中DOM得實現和ECMAScript是分離得。在IE中EMCMAScript是實現在jscript.dll中，DOM實現在mshtml.dll中。在Chrome中使用Webkit中的WebCore處理DOM和渲染，ECMAScript是在V8引擎中實現的。其

【js操作dom物件學習筆記五之事件冒泡、location物件、history物件、定時器】

1.總結addEventListener()和attachEvent()的區別相同點:都可以為元素繫結事件不同點:1.方法名不一樣 2.引數的個數不一樣addEventListener三個引數，attachEvent兩個引數

原生JS中DOM節點相關API合集

節點屬性 Node.nodeName //返回節點名稱，只讀 Node.nodeType //返回節點型別的常數值，只讀 Node.nodeValue //返回Text或Comment節點的文字值，只讀 Node.textContent //返回當前節點和它的所有後代節點的文字內容，可讀寫 N

JS操作子節點移動位置

HTML： <div id="father"> <div class="son" style="color: #8C85E6">1</div>

JS獲取DOM節點

DOM操作 getElementById() 返回帶走指定ID的元素 getElementByTagName() 返回指定標籤名稱的所有元素的節點（節點陣列） getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表

js操作dom

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM元素操作<

JS操作dom節點及相容性

父節點 parentNode

兄弟節點 nextSibling previousSibling

子節點

建立節點 creatElement();

插入節點 appendChild() insertBefore()

移除節點 removeChild()

克隆節點 cloneNode()

程式碼示例

相關推薦