JavaScript连载15-节点属性设置、深浅克隆节点
一、获取元素类型以及按类型挑选
<body>
<div id = "box">
<p id="word">xiaoming</p>
<!--<button id="btn">点我</button>-->
</div>
<script>
window.onload = function (ev) {
//1.获取标签
var box = document.getElementById("box");
console.log(box);
//2.获取标签内的所有节点
var allNodeLists = box.childNodes;
console.log(allNodeLists);
//3.过滤元素节点
var newListArr = [];
allNodeLists.forEach(function (value,key,parent) {
console.log("value.nodeType是：" + value.nodeType);
console.log("value是："+value);
console.log("key是：" + key);
console.log("parent是" + parent);
if(value.nodeType == 1){
newListArr.push(value);//复习一下表添加元素
}
});
console.log(newListArr);
}
</script>
</body>
二、深浅克隆
- 克隆标签的相关操作
//2.删除标签
var btn = document.getElementById("button");
var btnd = btn[0];
btn.remove(btnd);
window.onload = function (ev) {
//3.克隆标签
var newBox = btn.cloneNode();
console.log(newBox);//浅克隆,只克隆本节点，不克隆内部的子节点
var newBox2 = btn.cloneNode(true);//深克隆
console.log(newBox2);//待ID的是不会被克隆出来的
}
三、节点的属性设置
//节点属性操作
window.onload = function (env) {
//1.获取节点
var img = document.getElementsByTagName("img")[0];
console.log(img);
//2.获取标签的属性
console.log(img.getAttribute("src"));
console.log(img.getAttribute("alt"));
console.log(img.src);
console.log(img.alt);
//3.设置属性
img.setAttribute("src","img/img_01.png");
img.setAttribute("alt","如花");
img.setAttribute("class","图片");
//4.删除属性
// img.remove();//这句就把img这个标签删除了
img.removeAttribute("alt");
}
三、源码：
- D30_ElementType.html
- D30_2_Clone.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D30_ElementType.html https://github.com/ruigege66/JavaScript/blob/master/D30_2_Clone.html- 博客园：
https://www.cnblogs.com/ruigege0000/ - CSDN：
https://blog.csdn.net/weixin_44630050?t=1 - 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
赞 (0)