一、獲取元素類型以及按類型挑選
<body>
<div id = "box">
<p id="word">xiaoming</p>
<!--<button id="btn">點(diǎn)我</button>-->
</div>
<script>
window.onload = function (ev) {
//1.獲取標(biāo)簽
var box = document.getElementById("box");
console.log(box);
//2.獲取標(biāo)簽內(nèi)的所有節(jié)點(diǎn)
var allNodeLists = box.childNodes;
console.log(allNodeLists);
//3.過(guò)濾元素節(jié)點(diǎn)
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);//復(fù)習(xí)一下表添加元素
}
});
console.log(newListArr);
}
</script>
</body>
二、深淺克隆
//2.刪除標(biāo)簽
var btn = document.getElementById("button");
var btnd = btn[0];
btn.remove(btnd);
window.onload = function (ev) {
//3.克隆標(biāo)簽
var newBox = btn.cloneNode();
console.log(newBox);//淺克隆,只克隆本節(jié)點(diǎn)，不克隆內(nèi)部的子節(jié)點(diǎn)
var newBox2 = btn.cloneNode(true);//深克隆
console.log(newBox2);//待ID的是不會(huì)被克隆出來(lái)的
}
三、節(jié)點(diǎn)的屬性設(shè)置
//節(jié)點(diǎn)屬性操作
window.onload = function (env) {
//1.獲取節(jié)點(diǎn)
var img = document.getElementsByTagName("img")[0];
console.log(img);
//2.獲取標(biāo)簽的屬性
console.log(img.getAttribute("src"));
console.log(img.getAttribute("alt"));
console.log(img.src);
console.log(img.alt);
//3.設(shè)置屬性
img.setAttribute("src","img/img_01.png");
img.setAttribute("alt","如花");
img.setAttribute("class","圖片");
//4.刪除屬性
// img.remove();//這句就把img這個(gè)標(biāo)簽刪除了
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)注微信公眾號(hào)：傅里葉變換，個(gè)人賬號(hào)，僅用于技術(shù)交流
|
