复习javascript
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>