一、獲取元素類型以及按類型挑選
<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.獲取標簽內(nèi)的所有節(jié)點
var allNodeLists = box.childNodes;
console.log(allNodeLists);
//3.過濾元素節(jié)點
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);//淺克隆,只克隆本節(jié)點，不克隆內(nèi)部的子節(jié)點
var newBox2 = btn.cloneNode(true);//深克隆
console.log(newBox2);//待ID的是不會被克隆出來的
}
三、節(jié)點的屬性設置
//節(jié)點屬性操作
window.onload = function (env) {
//1.獲取節(jié)點
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
- 歡迎關(guān)注微信公眾號：傅里葉變換，個人賬號，僅用于技術(shù)交流
本站僅提供存儲服務，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
