js--dom对象和dom对象操作

dom是什么？

dom就是将html页面变成js能操作的对象

dom就是网页在js里的换身

js里面选择对应的元素成为dom,操作dom

为什么需要dom呢？

  • 访问dom.操作dom,让这个网页动起来

dom作用

  • 把 HTML 变成 JS 能认识的对象树

  • 让 JS 能获取页面元素

  • 让 JS 能修改页面元素（内容、样式、点击事件）

dom树

img

可以看到包含很多的标签

dom节点---节点类型

html文档中的每个成分都是一个节点

节点查找(三个方式)

将html标签转换为js可以操作对象的集合

通过id进行查找

返回的是一个对象，如果没有找到，返回一个null 空


    <div id="hello"></div>
    <script>
        document.getElementById("hello")
        // 直接进行打印即可 拿到的是一个标签对象
        console.log(document.getElementById("hello"));
       
       // 以对象的形式返回该元素，有些浏览器需要使用dir才能看到，不然的话，上面这个log也能看到以对象的形式返回了这个元素
       console.dir(document.getElementById("hello"))
        

        // 一般情况下，如果获取到dom对象，存入到一个变量中，方便使用
        let a = document.getElementById("hello")
        // id重复的话，获取的时候，只能获取到一个

        // 第二种，通过标签名来进行获取

    </script>

img

通过标签名来进行获取

得到的是一个数组

    <span>你好世界</span>
    <span>中国</span>
        let b = document.getElementsByTagName("span")
        console.log(b);

不管有几个标签都能直接获取到

img

通过类名进行获取

    <div class="box1"></div>
        let c = document.getElementsByClassName("box1")
        console.log(c);

img

有没有通用的方式获取了，就是一个方法就能获取到上面三个方式

        // 获取类名
        let d = document.querySelector(".box1")
        // 获取标签
        let e = document.querySelector("span")
        // 获取id
        let x = document.querySelector("#hello")

        console.log(d);
        console.dir(d)

        // 上面就是获取单个标签，不能同时获取到所有的标签
        // 因此的话，使用querySelectorAll 就能获取到所有的标签
        let e = document.querySelectorAll("span")
        console.log(e);

img

获取(dom)后做什么呢

上面已经讲了怎么获取dom，其实就是获取html标签元素，然后对这些进行操
作，样式的修改等等

获取的目的就是可以操作它

修改样式

获取后，返回的是一个对象，这对象里面有很多的键值对，可以对其进行操作，修改颜色等等操作，都在style里面

对象取值的就是对象名.value

img

    <div>你好世界</div>
    <script>
        let div = document.querySelector("div")
        console.log(div);
        console.dir(div)
        // 字体颜色就变红色了
        div.style.color = "red"
        // 修改字体大小
        //  这种写法是错误的，js里面不允许写-，且后面单词首字母要大写
        // div.style.font-size = "20px"
        // 这样写才是对的
        div.style.fontSize = "20px"
        // 修改div宽度
        div.style.width = "100px"
        // 修改高度
        div.style.height = "100px"
        // 修改背景颜色
        div.style.backgroundColor = "green"       
    </script>

上面是修改标签里面的样式style里面的

修改文本内容

现在就是需要获取文本内容呢
可以修改文本内容

img

innerText：不管你是赋值还是取值，只能识别纯文本

innerHtml：既可以识别纯文本，也可以识别标签，推荐使用这个

    <div class="box1">我生病了</div>
    <script>
        let div = document.querySelector(".box1")
        // console.log(div);
        // console.dir(div)
        // 修改文本内容
        div.innerHTML = "我好多了"
    </script>

img

修改输入框的内容

修改输入框里面默认的值

获取input对象，里面有一个value可以修改默认值

img

    <div class="box1">我生病了</div>
    <input type="text" value="输入框默认值">
    <script>
        // let div = document.querySelector(".box1")
        // // console.log(div);
        // // console.dir(div)
        // div.innerHTML = "我好多了"

        let input = document.querySelector("input")
        // console.dir(input)
        input.value = "修改后的默认值"
    </script>

img

事件(页面交互的核心)

事件，就是页面上发生的各种行为，js可以监听这些行为，并执行对应的代码

点击按钮后，出现一个弹窗

简单说： 用户/浏览器做了某件事，触发事件，运行你写的代码

事件的三要素

  • 事件源，事件被谁触发的

  • 事件类型，是一个什么事件

  • 事件处理程序，当事件被触发了，有一个什么样的事情

常见事件分类

鼠标事件

  • click 点击

  • dbclick 双击

  • mouseover 鼠标移入

  • mouseout 鼠标移出

  • mousemove 鼠标移动

键盘事件

  • keydown 按键按下

  • keyup 按键松开

表单事件

  • input 输入内容

  • submit 提交

  • button 按钮

  • change 内容改变并失去焦点，输入框内容发生改变，就会被触发

页面事件

  • load 页面/资源加载完成

  • resize 窗口大小改变

  • scroll 页面滚动

案例

点击按钮，出现一个弹窗

    <button>这是一个按钮</button>
    <script>
        let btn = document.querySelector("button")
        // add这个方法就是监听事件的方法，
        // 第一个参数，什么事件，这里是click 点击事件
        // 第二个参数，回调函数，就是自己调用，不需要手动调用，当点击触发就自动调用
        btn.addEventListener("click", () => {
            alert("我被点击了")
        })
    </script>

实现的效果就是点击按钮，出现一个弹窗

img

点击按钮，让div里面的文字发生变化

    <button>这是一个按钮</button>
    <div>我是div</div>
    <script>
        let btn = document.querySelector("button")
        let div = document.querySelector("div")
        // add这个方法就是监听事件的方法，
        // 第一个参数，什么事件，这里是click 点击事件
        // 第二个参数，回调函数，就是自己调用，不需要手动调用，当点击触发就自动调用
        btn.addEventListener("click", () => {
            // alert("我被点击了")
            div.innerHTML = "我是修改后的div内容"
        })
    </script>

实现的效果就是点击这个按钮，div里面的内容就被修改了

change事件(文本内容这样的)

就是获取输入框的内容，并将内容渲染到页面上

放到h1标签上

回调函数里面有一个默认形参，是一个事件对象，里面有输入框的内容

    <input type="text">
    <h1></h1>
    <script>
        let input = document.querySelector("input")
        let h1 = document.querySelector("h1")
        // 回调函数默认形参是一个事件对象，里面存入发生了哪些事情，如文本输入这样的
        input.addEventListener("change", (e) => {
            // 打印的是一个对象，称为事件对象
            console.log(e);
            // 输出这个值出来
            console.log(e.target.value);
            // 将输入框的内容渲染到页面上
            h1.innerHTML = e.target.value
        })
    </script>

img

键盘事件

键盘事件就是用户按下了某个键就能触发

就是百度搜索，除了百度这个搜索按钮，还有一个回车事件

为input绑定keydown事件，

里面有一个对象就是key,对这个key进行判断

案例：输入内容后，按下回车键，弹出对话框


    <input type="text">
    <script>
        // 获取input对象
        let input = document.querySelector("input")

        input.addEventListener("keydown", (e) => {
            // console.log(e);
            // 这个e.key就能获取到那个回车键
            if (e.key === "Enter") {
                alert("被触发了")
            }
        })
    </script>

改进版，登入密码，弹出登录成功，并清空输入框里面的内容

    密码：<input type="password">
    <script>
        // 获取input对象
        let input = document.querySelector("input")

        input.addEventListener("keydown", (e) => {
            // console.log(e);
            // 这个e.key就能获取到那个回车键
            if (e.key === "Enter") {
                alert("登录成功")
                // 获取输入框的内容
                input.value = ""
            }
        })
    </script>

img

弹出框后，文本里面的内容就会被清空

补充(定时器)

之前我们学习了定时器的内容，就是时间到了，触发一次，还有就是每隔多久执行一次

通过点击事件停止定时器

    <script>
        setInterval(() => {
            console.log("我执行了");
        }, 2000);
    </script>

每隔2秒执行一次

img

改进版，点击按钮，停止定时器

    <button>点击我，停止定时器</button>
    <script>
        let a = setInterval(() => {
            console.log("我执行了");
        }, 2000);

        let btn = document.querySelector("button")
        btn.addEventListener("click", () => {
            // 点击按钮后，停止定时器,下面这个方法
            // 停止定时器，还需要告诉到底是哪一个(当有多个的时候)
            // 停止的是哪一个定时器
            clearInterval(a)
        })
    </script>

改进版，点击按钮，启动回调函数

    <button>点击我，停止定时器</button>
    <!-- 需要一个类名，否则会冲突的 -->
    <button class="box1">再次点击，启动定时器</button>
    <script>
        let a = setInterval(() => {
            console.log("我执行了");
        }, 2000);

        let btn = document.querySelector("button")
        let bbox1 = document.querySelector(".box1")
        btn.addEventListener("click", () => {
            // 点击按钮后，停止定时器,下面这个方法
            // 停止定时器，还需要告诉到底是哪一个(当有多个的时候)
            clearInterval(a)
        })

        // 再次点击，就会启动这个定时器
        bbox1.addEventListener("click", () => {
            setInterval(() => {
                console.log("我又开始执行了");
            }, 2000);
        })
    </script>

总结

js首先获取到html标签里的对象，dom，将html标签转换成js可以操作的对象集合

js可以对dom里面做很多操作，样式，文本内容，输入框等等

js还有一个事件，就是发生了什么事件，做出对应的操作，这个就是页面交互的核心

表单的学习下午学习即可

posted @ 2026-05-29 13:45  乔的港口  阅读(13)  评论(0)    收藏  举报