js獲取clonenode（Js獲取元素高度）

本文目錄一覽：

• 1、2019-11-24-JS中cloneNode（）與cloneNode（true）之間區別
• 2、JS的獲取一個DOM對象怎麼才能複製它
• 3、js 的clonenode怎麼用
• 4、js克隆的時候為什麼會把屬性名也帶下來
• 5、js cloneNode 的克隆節點 怎麼刪除對應節點？
• 6、JS之DOM操作

2019-11-24-JS中cloneNode（）與cloneNode（true）之間區別

cloneNode（）或者叫cloneNode(false)克隆的節點複製真節點的樣式，標籤，屬性。至於標籤里的元素，事件沒有複製，所以我們可以稱它淺克隆。

cloneNode（true）完全把真節點的東西給複製了過來，我們稱它為深克隆。也會克隆他的子節點

JS的獲取一個DOM對象怎麼才能複製它

var div = document.getElementsByTagName(‘div’)[0];

var clone = div.cloneNode();

js 的clonenode怎麼用

定義和用法

cloneNode() 方法創建節點的拷貝，並返回該副本。

cloneNode() 方法克隆所有屬性以及它們的值。

如果您需要克隆所有後代，請把 deep 參數設置 true，否則設置為 false。

var ele=document.getElementById(‘id’);

var eleClone=ele.cloneNode(true);

document.body.appendChild(eleClone);

js克隆的時候為什麼會把屬性名也帶下來

1、JAVASCRIPT 的cloneNode() 方法可創建指定的節點的精確拷貝。cloneNode() 方法拷貝所有屬性和值。

2、cloneNode() 這個方法的定義就規定了會複製屬性名和值。這個沒什麼為什麼，這個方法就是這麼定義的。

3、你如果不需要屬性名，你可以複製完之後自己再去除。獲取你可以自己實現一個cloneNode 方法，不複製屬性名就可以了。

4、希望對你有幫助。

js cloneNode 的克隆節點 怎麼刪除對應節點？

!– test.htm —

html

head

titleTest of cloneNode Method/title

script type=”text/javascript” src=”test.js”/script

/head

body

div id=”main”

div id=”div-0″

spanCloud018 said, /span

span”Hello World!!!”/span

/div

/div

/body

/html

// test.js

window.onload = function () {

var sourceNode = document.getElementById(“div-0”); // 獲得被克隆的節點對象

for (var i = 1; i 5; i++) {

var clonedNode = sourceNode.cloneNode(true); // 克隆節點

clonedNode.setAttribute(“id”, “div-” + i); // 修改一下id 值，避免id 重複

sourceNode.parentNode.appendChild(clonedNode); // 在父節點插入克隆的節點

}

}

JS之DOM操作

DOM： Document Object Model，文檔對象模型；js提供了豐富的api來操作文檔內容。

DOM樹： html文檔中的內容是以樹形結構排布，html是DOM樹根，html下只有兩個子標籤head、body

節點： DOM將所有的分支端都成為節點。節點有很多類型，常見的節點類型有：文本節點、元素節點。

可以通過 nodeType查看節點類型 ： 1元素節點、3文本節點

特殊的元素節點：

1、html元素

2、body元素

3、head元素

節點操作的api（屬性和方法）

1、nodeName：只讀屬性，可以讀取節點名稱

2、nodeType：只讀屬性，讀取節點類型

3、 hasChildNodes()：判斷調用方法的節點是否存在子節點，存在返回true，不存在返回false。

主流瀏覽器會將換行符、製表符、空格當做文本節點處理，IE9以下會忽略它們。

4、childNodes：只讀屬性，獲得節點的子節點集合，子節點集合是一個類數組結構，有數組特點無數組方法

5、firstChild：獲得節點的第一個子節點

6、lastChild：獲得節點的最後一個子節點

7、querySelector()：

參數：string類型，css選擇器

作用：獲得文檔中第一個符合選擇器條件的節點

兼容：在IE9以下不支持

8、 querySelectorAll()： // 獲得的都是靜態集合

參數：string類型，css選擇器

作用：獲得文檔中所有符合選擇器條件的節點集合（類數組結構）

兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素節點。

9、previousSibling：獲取節點的前一個兄弟節點

10、nextSibling：獲取節點的後一個兄弟節點

11、parentNode：獲得節點的父節點（父節點一定是元素節點）

12、removeChild()：節點刪除它的指定子節點

DOM操作元素：暫時不用的隱藏、一定不用的刪除。

13、cloneNode()：克隆一個節點

參數：boolean類型，true深克隆，false淺克隆，默認淺克隆

深克隆：不僅克隆節點和節點的屬性，還會克隆節點的子節點

淺克隆：只克隆節點和節點的屬性，不會克隆節點的子節點

14、a.replaceChild(b,c)：用b替換c

其中a是c的父節點，c是文檔上已經存在的節點，b可以是節點也可以是已存在節點，被替換的節點會從文檔結構中刪除。

15、a.replaceWith(b)：用b替換a

a已存在的節點，b可以是新節點也可以是已存在節點，被替換的節點從DOM樹刪除。

16、a.insertBefore(b,c)：在c前面插入b

其中，a是c的父節點，c是已經存在的節點，b是新節點

17、a.appendChild(b)：在a末尾追加b

a是父節點，b是a的子節點, c是子節點

元素節點的相關api

1、getElementsByTagName()：根據標籤名獲得元素集合（類數組結構）

區別：HTMLCollection 是動態集合，NodeList 是靜態集合。

2、createElement()：根據標籤名創建新元素

3、id：讀寫屬性，可以讀取或設置元素的id值

4、className：讀寫屬性，可以讀取或設置元素的class值

5、classList：讀取標籤的類名集合（類數組結構）

add()：為元素新增類名，如果類名已存在不會重複添加

remove()：刪除元素指定類名，如果類名不存在不會執行操作

元素的屬性分為兩類：

一類是元素本里就擁有的屬性，例如：id、class、style、src、herf、target、alt、title、type、value等等，這些屬性可以在js中直接通過.語法讀取或設置。

再一類是我們為了解決問題給元素添加的自定義屬性，這些屬性在js中無法直接通過.語法讀取，需要通過操作方法訪問。

6、setAttribute(name,value)

參數：name表示要設置的屬性名，value要為屬性設置的值

無返回值

7、getAttribute(name)

參數：name表示要讀取的屬性名

返回值：返回屬性的值，如果屬性不存在會返回null

8、removeAttribute(name)

參數：name表示要刪除的屬性名

無返回值

說明：setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地屬性和自定義屬性。

element拓展：

兼容：以下屬性、方法在IE9以下不支持。

1、children：讀取元素的所有元素子節點集合（類數組）

2、parentElement：讀取元素的父元素節點

3、previousElementSibling：讀取前一個元素兄弟節點

4、nextElementSibling：讀取後一個元素兄弟節點

5、firstElementChild：讀取第一個元素子節點

6、lastElementChild：讀取最後一個元素子節點

7、remove(): 將調用方法的元素從DOM結構中刪除