> 技术文档 > 前端，demo操作，增删改查，to do list小项目

前端，demo操作，增删改查，to do list小项目

技术文档

demo操作，html

   Document      <!-- bbbb
 bbb
 111
 222 333
   王
 1
 2
 3 dd 4 cc 
  
 -->  sss aaa
 222
 
 <!--  1
 
 
 -->

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=\"元素\"// 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