本文目录一览:
- 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结构中删除