1.修改元素内的内容
<div>zsgh</div>
<script>
const box1=document.querySelector("div")
box1.innerText="ppp"
box1.innerHtml=`<h1>修改</h1>`
</script>
2.随机点名练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box1"> 点名喽</div>
<script>
const box1=document.querySelector("div")
let arr1=["gao","qiu","li","yang","yu","yan","lo"]
function x(n,m){
return Math.floor(Math.random()*m+1-n)+n
}
let d=x(0,arr1.length-1)
box1.innerHTML=`<h1>用户:${arr1[d]}</h1>`
</script>
</body>
</html>3.修改元素对象样式
<div></div>
<script>
const box= document.querySelector("div")
box.style.width="500px"//css属性
box.style.height="500px"
box.style.backgroundColor="颜色"
</script>4.键盘输入，
<textarea></textarea>
<script>
const txt=document.querySelector("textarea")
txt.addEventListener("keydown",function(e){
if(e.code=="Enter"){
alert("哈哈哈，你输入的内容被我看的一清二楚")
}
})
</script>
5.查找子节点
<div class="father">
<div class="son1">子盒子</div>
<div class="son2">子盒子</div>
<div class="son3">子盒子</div>
<div class="son4">子盒子</div>
<div class="son5">子盒子</div>
</div>
<script>
const son3=document.querySelector(".son5")
console.log(son3.parentNode)
const father=document.querySelector(".father")
console.log(father.children)
const son3=document.querySelector(".son3")
console.log(son3.nextElementSibling)//下一兄弟节点
console.log(son3.previousElementSibling)//上一兄弟节点
6.创建节点
<ul>
<li>zs</li>
</ul>
<script>
let newli=document.createElement("li")
newli.innerHTML=`<div class="box1">这是动态节点</div>`
console.log(newli)
ul.appendChild(newli)
ul.innsertBefore(newli,ul.children[1])
</script>
7.捕获或冒泡
<div class="gf">
<div class="f">
<div class="son">
<div>
<div>
<div>
<script>
const gf=document.querySelector(".gf")
const f=document.querySelector(".f")
const s0n=document.querySelector(".son")
gf.addEventListener("click",function(){
console.log("我是你爷爷")}，true)
f.addEventListener("click",function(){
console.log("我是你爹")
e.stopPropagation()//阻止元素对象的冒泡或捕获
}，true)
</script>
