01-获取修改DOM元素内容、属性、间歇函数（定时器）

蜂蜜橘子
278 阅读4分钟

image-20221107124300906

DOM(文档对象模型)

BOM(浏览器对象模型)

  • DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

  • 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能

  • DOM作用

    • 开发网页内容特效和实现用户交互

获取DOM对象

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

document.querySelector('css选择器')

参数：

包含一个或多个有效的css选择器 字符串

返回值：

css选择器匹配的第一个元素，一个htmlelement对象，如果没有匹配到则返回null

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // 获取元素
        let ul = document.querySelector('ul li:nth-child(2)')
        console.log(ul)
    </script>

选择匹配多个元素

document.querySelectorAll('ul li')

参数:

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的NodeList 对象集合

  1. 获取一个DOM元素我们使用谁？

 querySelector()

  1. 获取多个DOM元素我们使用谁？

 querySelectorAll()

  1. querySelector() 方法能直接操作修改吗？

 可以

  1. querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？

 不可以， 只能通过遍历的方式一次给里面的元素做修改

其他获取DOM元素方法（了解）

  • 获取页面中的标签我们最终常用那两种方式？

    • querySelectorAll()

    • querySelector()

  • 他们两者的区别是什么？

    • querySelector() 只能选择一个元素， 可以直接操作

    • querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到

每一个元素

  • 他们两者小括号里面的参数有神马注意事项？

    • 里面写css选择器

    • 必须是字符串，也就是必须加引号

设置修改DOM元素内容

  • 元素innerText 属性

    • 将文本内容添加/更新到任意标签位置
    • 文本中包含的标签不会被解析

  • 元素.innerHTML 属性

    • 将文本内容添加/更新到任意标签位置

    • 文本中包含的标签会被解析

    <div>哈哈哈</div>
    <script>
        let box = document.querySelector ('div')
        box.innerText = '有意思'
    </script>
  1. 设置/修改DOM元素内容有哪3钟方式？

  • document.write() 方法

  • 元素.innerText 属性

  • 元素.innerHTML 属性

  1. 三者的区别是什么？

  • document.write() 方法 只能追加到body中

  • 元素.innerText 属性 只识别内容，不能解析标签

  • 元素.innerHTML 属性 能够解析标签

  • 如果还在纠结到底用谁，你可以选择innerHTML

设置修改DOM元素属性

  • 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

  • 最常见的属性比如： href、title、src 等

  • 语法

    对象.属性 = 值

设置修改元素样式属性

1.通过 style 属性操作CSS

对象.style.样式属性 = 值

注意：

修改样式通过style属性引出

如果属性有-连接符，需要转换为小驼峰命名法

赋值的时候，需要的时候不要忘记加css单位

2.操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

注意：

  1. 由于class是关键字, 所以使用className去代替

  2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

  3. 使用 className 有什么好处？

    可以同时修改多个样式

  4. 使用 className 有什么注意事项？

    直接使用 className 赋值会覆盖以前的类名

3.通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

  1. 使用 className 和classList的区别？

修改大量样式的更方便

修改不多样式的时候方便

classList 是追加和删除不影响以前类名

设置修改表单元素属性

  • 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框正常的有属性有取值的 跟其他的标签属性没有任何区别

    • 获取: DOM对象.属性名

    • 设置: DOM对象.属性名 = 新值

  • 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
    • 比如： disabled、checked、selected

<body>
    <input type="text" value="请输入密码">
    <button disabled>按钮</button>
    <input type="checkbox" class="ty">
    <script>
        // 隐藏密码
        let input = document.querySelector('input')
        input.value = '密码'
        input.type = 'password'
        // 启用按钮
        let but = document.querySelector('button')
        but.disabled = false
        //勾选复选框
        let checkbox = document.querySelector('.ty')
        checkbox.checked = true
    </script>
</body>

定时器-间歇函数

能够使用定时器函数重复执行代码

定时器函数可以开启和关闭定时器

  • 开启定时器

    • setInterval(函数,间隔时间)

    • 作用：每隔一段时间调用这个函数

    • 间隔时间单位是毫秒

注意：

  1. 函数名字不需要加括号

  2. 定时器返回的是一个id数字

  • 关闭定时器

注意：

  1. 函数名字不需要加括号

  2. 定时器返回的是一个id数字

  3. 一般不会刚创建就停止，而是满足一定条件再停止

avatar
文章
阅读
粉丝