复习javascript-CSDN博客

本文链接：https://blog.csdn.net/2401_89467413/article/details/147857937

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>