demo操作，html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- defer延遲加載 ，整個html執行完成之后，再執行script的屬性，只外引--><script src="../../js/dom操作.js" defer></script></head><body><!-- <div>bbbb</div><div id="aa">bbb</div><div class="aaa">111</div><span class="aaa">222</span><div class="aaa">333</div><ul><li> 王</li><li>1</li><li class="a">2</li><li>3dd<span>4</span>cc</li></ul> --><div class="aa"><span class="bb">sss</span><p>aaa</p><h1>222</h1></div><!-- <ul class="bb"><li>1</li><li></li></ul> -->
</html>demo操作.js
// document object model
// 對象
// 增刪改查// 第二種方法
// 整個文件加載完成之后再執行
// window.onload=function(){
// var obj =document.getElementById("aa")
// console.log(obj)
// }// // 查找,id返回的為符合條件的第一個對象
// var obj =document.getElementById("aa")
// console.log(obj)// // 查找，class返回符合條件數組
// // 綁定事件和執行事件不是同一時間
// // this當前事件觸發者
// var arr =document.getElementsByClassName("aaa")
// console.log(arr)
// for(var i=0;i<arr.length;i++){
// arr[i].onclick=function(){
// this.style.background="red"
// this.style.fontSize="50px"// }
// }// // 查找div，元素名稱查找
// var arr =document.getElementsByTagName("div")
// console.log(arr)// //querySelector 根據選擇器查找對象 返回符合條件的第一個對象
// // querySelectorALL 返回符合條件的所有對象
// var obj=document.querySelector(".a")
// // 找嵌套
// console.dir(obj)// // 關系查找
// console.log(obj.parentNode)
// console.log(obj.parentElement)// console.log(obj.child)// 修改
// 修改屬性，改樣式，style
// var obj = document.querySelector(".aa")
// console.log(obj)
// obj.innerText="22"
// // obj.innerHTML="<h1>元素<h1>"
// obj.style.background="red"
// obj.style.fontSize="50px"
// obj.style.cssText="color:green;"// // 原生屬性 對象.屬性
// obj.setAttribute("xyz","aabbcc")
// console.log(obj.getAttribute("xyz"))// // 框框里面改// 添加
// 1.創建元素var obj=document.createElement("h1")
obj.innerText = "新添加的元素"
obj.className="cc"
obj.style.color="red"
console.log(obj)
// 復制元素
var old =document.querySelector(".bb")
var newnode=old.cloneNode(true)
console.log(newnode)
newnode.style.color="green"// 2.添加元素(先找，再在父級元素添加)
// 找父級元素，容器,放到容器里var container=document.querySelector(".aa")var spannode=document.querySelector("span")// 添加容器里最后一個孩子
// container.appendChild(obj)
// 添加同級的標簽，在此標簽之前
// container.insertBefore(obj,spannode)
// 替換
// container.replaceChild(obj,spannode)
container.appendChild(newnode)// // 刪除
// // 找父級元素
// var container=document.querySelector(".aa")
// var spannode =document.querySelector("span")
// // container.removeChild(spannode)
// spannode.parentNode.removeChild(spannode)to do list.html
?
)
