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

demo操作，html

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

javascript 复制代码

// 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