JavaScript- DOM 原生 API 学习（querySelector，querySelectorAll，操作和修改表单属性，操作节点）

最新推荐文章于 2025-07-08 22:38:53 发布

原创最新推荐文章于 2025-07-08 22:38:53 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

JavaEE 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍JavaScript中的DOM操作方法，包括获取网页元素、事件处理、操作元素内容及样式、表单属性修改等内容，并提供了猜数字游戏及表白墙实例。

对于在浏览器上运行JS程序，最核心的库就是DOM API 库

DOM可以看作文档对象模型，HTML中会把每个html标签看作成一个JS中可操作的对象。

操作这个对象，就可以影响界面的显示。

文章目录

1. 获取网页元素（querySelector，querySelectorAll）
2. 练习案例，猜数字
- 练习：input表白墙

其中获取网页元素是DOM的基础。

1. 获取网页元素（querySelector，querySelectorAll）

当一个网页加载好后，会自动生成一个全局变量，叫做document，这其中有些方法和属性，让我们来操作网页内容。

querySelector的参数就是一个css的各种选择器
querySelectorAll函数功能与querySelector类似，只不过这个函数会将符合选择器条件的所有标签全部返回。返回一个伪数组对象，用法与数组类似。

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div class="one">
            hello js
        </div>

        <div id="test">
            hello id
        </div>

        <ul>
            <li>1234</li>
            <li>5678</li>
        </ul>

        <script>
            //选则标签，参数是一个css选择器
            let div=document.querySelector('.one');
            console.log(div)
            
            let id=document.querySelector('#test')
            console.log(id)

            let obj=document.querySelectorAll('ul li')
            console.log(obj)
        </script>
    </body>
</html>

在这里插入图片描述

JavaScript事件处理

在JS中的很多代码都是通过事件来触发。eg：鼠标点击页面，会产生鼠标点击事件等等。

事件的三要素：

那个HTML元素产生的事件。
事件类型（鼠标移动、鼠标点击等等）
事件处理程序
首先先获取标签元素，通过修改标签元素属性来实现这个标签的事件处理。

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>

        <button>按钮</button>
        <script>
            let but=document.querySelector('button')

            but.onclick=function(){
                alert('hello js')
            }
        </script>
    </body>
</html>

在这里插入图片描述

操作获取的元素

获取操作元素的内容
通过对象内的属性 innerHTML来实现。

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="screen">
            <ul>
                <li>123</li>
                <li>456</li>
            </ul>
        </div>

        <button id="submit">这是一个按钮</button>

        <button id="button">这是修改后的按钮</button>

        <script>
            let but=document.querySelector('#submit')
            but.onclick=function(){
                let screen=document.querySelector('.screen')
                console.log(screen.innerHTML)
            }

            let but2=document.querySelector('#button')
            but2.onclick=function(){
                let screen=document.querySelector('.screen')
                screen.innerHTML='<h1>修改后的标题</h1>'
            }
        </script>
    </body>
</html>

在这里插入图片描述

需要注意，input标签需要通过value值才可以获取输入框的值。eg：

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <input type="text" class="input" value="0">

        <button id="button">+</button>

        <script>
            let but=document.querySelector('#button')
            but.onclick=function(){
                let input=document.querySelector('.input')
                
                let val=input.value

                val=parseInt(val)
                console.log(typeof(val))

                val+=1
                input.value=val
            }
        </script>
    </body>
</html>

在这里插入图片描述

操作元素的属性

通过dom对象.属性名就可以进行操作元素属性

html标签内的属性eg：src、alt、title、id等属性后可以通过dom对象进行修改。

eg：点击图片切换下一张图片

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <img src="pic1281.jpg" alt="风景1">

        <script>
            let img=document.querySelector('img')
            img.onclick=function(){
                console.log(img.src)
                if(img.src.indexOf('pic1281.jpg')>=0){
                    img.src='pic1874.jpg'
                }else if(img.src.includes('pic1874.jpg')>=0){
                    img.src='pic1281.jpg'
                }
            }
        </script>
    </body>
</html>

在这里插入图片描述

通过console.dir(dom对象)来打印里面的所有属性。

操作和修改表单属性

表单专有的属性为：

value：input标签内的值
disable：禁用
checked：复选框会使用
selected：下拉框会使用
type：input的类型（文本，密码，按钮，文件等）

eg：实现全选操作

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <input type="checkbox" id="all">全选 <br>
        <input type="checkbox" class="food">面条 <br>
        <input type="checkbox" class="food">馒头 <br>
        <input type="checkbox" class="food">炸鸡<br>

        <script>
            //获取全部元素
            let all=document.querySelector('#all')

            //获取全部食物
            let foods=document.querySelectorAll('.food')

            //注册点击事件
            all.onclick=function(){
                for(let i=0;i<foods.length;i++){
                    foods[i].checked=all.checked
                }
            }

            //如果有一个没有选上，全选框就会取消。向所有框注册点击事件
            for(let i=0;i<foods.length;i++){
                foods[i].onclick=function(){
                    all.checked=checkFood(foods)
                }
            }


            function checkFood(foods){
                //判断是不是所有的框都被选中
                for(let i=0;i<foods.length;i++){
                    if(!foods[i].checked){
                        return ""
                    }
                }
                return "checked"
            }
        </script>
    </body>
</html>

在这里插入图片描述

操作元素的样式

style对应的是行内样式，直接把样式写到style里面。
className/classList对应内部样式/外部样式，应用了一个/一组CSS类名

eg：点击放大字体

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div style="font-size: 20px">文本</div>

        <script>
            let div=document.querySelector("div")
            div.onclick=function(){
                //获取当前字体大小
                let size=parseInt(div.style.fontSize)
                //扩大字体大小
                size+=5
                //注意加单位px，否则修改无效
                div.style.fontSize=size+"px"
            }
        </script>
    </body>
</html>

在这里插入图片描述

当要修改的属性很多时，直接通过style修改比较麻烦，可以借助css类进行修改样式

在HTML中表示类名的属性为class，但是在JS中，属性名就变为了className，classList。因为class在JS中是关键字。

eg：日间模式与夜间模式

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <style>
        .day{
            background-color: pink;
            color: black;
        }
        .night{
            background-color: black;
            color: white;
        }
    </style>

    <body>
        <div class="day" style="height:500px">hello JavaScript</div>

        <button>夜间模式</button>
        
        <script>
            let div=document.querySelector('div')
            let but=document.querySelector('button')
            but.onclick=function(){
                if(div.className=='day'){
                    div.className='night'
                    but.innerHTML='日间模式'
                }else if(div.className=='night'){
                    div.className='day'
                    but.innerHTML='夜间模式'
                }
            }
        </script>
    </body>

</html>

在这里插入图片描述

操作节点

新增节点（createElement）

创建新节点
将节点挂到DOM树上（appendChild）

删除节点（removeChild）

先拿到父节点，再拿到待删除的子节点
通过removeChild就删除了

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="center">Hello word</div>

        <button>删除 new div</button>

    </body>
    <script>
        //创建新的div标签
        let newDiv=document.createElement('div')
        newDiv.id='new'
        newDiv.innerHTML='hello new div'
        newDiv.className='newDivs'

        console.log(newDiv)

        //挂到DOM树上
        let center=document.querySelector('.center')
        center.appendChild(newDiv)

        let btn=document.querySelector('button')

        btn.onclick=function(){
            center.removeChild(newDiv)
        }
    </script>
</html>

2. 练习案例，猜数字

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>GuessNum</title>
    </head>
    <body>
        <button id="reset">重新开始猜</button><br>
        <span>要猜的数字（1-100）: </span>
        <input type="text">

        <button id="guess">猜</button><br>

        <span>结果：</span><span id="resault"></span><br>

        <span>已经猜测的次数：</span><span id="times">0</span>
    </body>

    <script>
        //获取上面的所有元素
        let reset=document.querySelector('#reset');
        let input=document.querySelector('input')
        let guess=document.querySelector('#guess')
        let resault=document.querySelector('#resault')
        let times=document.querySelector('#times')

        //生成1-100随机数
        let randomNum=Math.floor(Math.random()*100)+1

        console.log(randomNum)

        guess.onclick=function(){
            //读取input内容，转成整数

            if(input.value==""){
                return
            }
            let usrNum=parseInt(input.value)

            if(usrNum<randomNum){
                resault.innerHTML='猜小了'
                resault.style.color='red'
            }
            else if(usrNum>randomNum){
                resault.innerHTML='猜大了'
                resault.style.color='red'
            }
            else{
                resault.innerHTML='猜对了'
                resault.style.color='green'
            }

            //更新比较次数
            let guessTime=parseInt(times.innerHTML)
            console.log(guessTime)
            times.innerHTML=guessTime+1
        }

        reset.onclick=function(){
            // location控制页面的链接
            location.reload()
        }
    </script>
</html>

在这里插入图片描述

练习：input表白墙

<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>wall</title>
    </head>

    <style>
        /* 去除浏览器默认样式 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .content{
            width: 100%;
        }
        h3{
            text-align: center;
            padding: 20px 0px;
            font-size: 24px;
        }
        p{
            text-align: center;
            color: #777;
            padding: 10px 0px;
        }

        .row{
            width: 400px;
            margin: 0 auto; 
            height: 50px;

            display: flex;
            justify-items: center;
            align-items: center;

        }

        .row span{
            width: 100px;
            font-size: 20px;
        }

        .row input{
            width: 300px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            text-indent: 0.5em;
            outline: none;
        }

        .row #submit{
            width: 200px;
            height: 50px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;
            border: none;
            color: black;
            background-color: pink;
            border-radius: 10px;
        }

        /* 按下提交后反馈 */
        .row #submit:active{
            background-color: gray;
        }

    </style>

    <body>
        <div class="content">
            <h3>表白墙</h3> 
            <p>输入后点击提交,会将信息显示在表格上</p>

            <div class="row">
                <span>谁: </span>
                <input type="text">
            </div>

            <div class="row">
                <span>对谁: </span>
                <input type="text">
            </div>

            <div class="row">
                <span>说: </span>
                <input type="text">
            </div>
            
        </div>

        <div class="row" >
            <button id="submit">提交</button>
        </div>

        <script>
            let submit=document.querySelector('#submit')
            submit.onclick=function(){
                let msg=document.querySelectorAll('input')
                let from =msg[0].value
                let to=msg[1].value
                let speck=msg[2].value

                if(from==''||to==''||speck==''){
                    return
                }

                //提交新的div
                let newDiv=document.createElement('div')

                newDiv.innerHTML=from+'对'+to+'说'+speck

                newDiv.className='row'

                let content=document.querySelector('.content')
                content.appendChild(newDiv)

                //清空输入框内容
                for(let i=0;i<msg.length;i++){
                    msg[i].value=''
                }
            
            }
        </script>
    </body>

</html>