Web APIs 知识总结【获取DOM元素与修改属性】

刀刀小站
125 阅读4分钟

获取DOM元素与修改属性

Web API基本认知

  1. DOM 是 浏览器 提供的一套专门用来 操作网页内容 的功能。实现开发网页内容特效与用户交互。

  2. DOM树（DOM把以下内容都看作对象）

    • 文档：一个页面就是一个文档， DOM 用 document 表示

    • 元素：页面中所有标签都是元素， DOM 用 element 表示

    • 节点：网页中所有内容都是节点， DOM 用 node 表示

    • 作用：文档树直观的体现了标签与标签之间的关系。

  3. DOM对象

    • 浏览器根据 htnl 标签生成 JS 对象

    • 所有标签属性都可以在这个对象上找到

    • 修改这个对象的属性会自动映射到标签上

  4. DOM 核心思想

    • 把网页内容当做对象处理

    • 网页所有内容都在 document 里面



获取DOM对象

目标：能查找/获取DOM对象

根据CSS选择器来获取DOM元素 (重点)

  1. document.querySelector()

    • 返回 第一个 元素对象。

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

    • 返回值是CSS选择器匹配的第一个元素,一个 HTMLElement 对象。

  2. document.querySelectorAll()

    • 获取过来元素对象的集合，以伪数组的形式存储的

    • 想要依次打印里面的元素对象要采取遍历的方式

    • 得到的元素是动态的

    • 无论返回几个，返回的都是伪数组的形式

    • 如果没有元素，返回空的伪数组

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

  1. 使用 getElementById() 获取

    • ID 获取

    • 参数 id 是大小写敏感的字符串

    • 返回的是一个元素对象

  2. 使用 getElementByTagName() 获取

    • 标签名获取

    • 父元素必须是单个对象（必须指明是哪个元素对象），获取时不包括父元素自己

  3. 使用 getElementsByClassName() 获取

    • 类名获取

  4. 特殊元素获取

    • body 获取： document.body

    • html 获取： document.documentElement



设置/修改DOM元素内容

目标：能够修改元素的文本更换内容

document.write()

  1. 只能将文本内容追加到 </body> 前面的位置

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

  3. 不推荐使用

innerText

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

  2. 文本中包含的标签不会被解析

  3. 去除空格和换行

innerHTML

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

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

  3. 保留空格和换行

  4. 推荐使用 innerHTML

注意：

innerTetx 与 innerHTML 只能设置/修改双标签的文本内容，所有单标签以及 textarea 文本域双标签不适用这两个方法。



设置/修改DOM元素属性

设置/修改元素常用属性

  • img 标签

    1. src 路径

    2. title 标题

    3. alt 替换文本

  • 表单标签

    1. value 值

    2. checked 被选中/ selected 被选择中

    3. type 属性

    4. disabled 被禁用

设置/修改元素样式属性

  • 通过 style 属性操作 CSS
对象.style.属性

  1. 修改样式通过 style 属性引出

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

  3. 采取驼峰命名法

  • 操作类名( className ) 操作 CSS
对象.className = 类名

  1. 适用于修改的样式比较多

  2. 会直接更改元素的类名，会覆盖原先的类名

  3. 如果想要保留原先类名，可以使用多类名选择器 this.className='原先的类名 新的类名';

通过 classList 操作类控制 CSS

  1. 追加类名：对象.classList.add('类名')

  2. 删除类名：对象.classList.remove('类名')

  3. 切换类名：对象.classList.toggle('类名')

特点：

适用于修改不多样式的时候

不会覆盖之前的类名



设置/修改表单元素属性

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


总结

获取DOM元素与修改属性.png



今日习题

表单全选

  • 要求：点击全选复选框后所有的复选框都会被选中。

  • 思路：

  1. 获取全选复选框，为其设置点击事件
  2. 获取其选中状态，用变量 status 存储
  3. 获取剩下的复选框，由于是用 querySelectedAll 获取，是伪数组的形式，因此用遍历获取其中每一个值
  4. 让他们的被选中状态等于全选复选框的选中状态即可
        let checkAll = document.querySelector('.chkAll')
        let checks = document.querySelectorAll('.list input')

        checkAll.addEventListener('click', function() {
            // 获取全选复选框的选中状态
            let status = this.checked

            checks.forEach((v, i) => {
                v.checked = status
            })
        })


思考

  • 获取元素的几种方式的详细解读 获取方式常用 querySelected 与 querySelectedAll ，前一种获取第一个符合条件元素，可直接使用；后一种获取所有符合条件的元素，以伪数组的形式，需要遍历才能使用。

  • 样式操作之 className 和 classList 的差异

    className ：适用于多个样式的场合，会把原样式覆盖掉。

    classList ：适用于样式不多的场合，不会覆盖原基础的样式。

avatar
文章
阅读
粉丝