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>3
dd
<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