前端，demo操作，增删改查，to do list小项目
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