【Web API DOM02】如何获取、操作DOM元素

一:获取DOM元素

1 根据CSS选择器获取

语法格式如下:

(1)选中一个DOM元素

javascript 复制代码
document.querySeletor('CSS选择器')
javascript 复制代码
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
document.querySelector('li')//只能获取第一个li

该选择器只能选中第一个DOM元素,因此选择时,要慎重选择对应的DOM元素;

选中的元素可以通过对象调用属性和方法的方式,修改元素的属性和方法

(2)可以选中多个DOM元素

javascript 复制代码
document.querySelectorAll('CSS选择器')

一次可选中HTML文档中的多个标签,并且返回该以该标签组成的伪数组

伪数组的特征:

  1. 有长度和索引值
  2. 没有pop()、push()等数组方法

二:操作DOM元素内容

1 对象.innerHTML属性

  1. 将文本内容添加/修改到任意标签位置
  2. 会解析标签,但多标签的情况下,建议使用模板字符串

2 对象.innerText属性

  1. 可以修改/添加标签中的文字内容
  2. innerText不会像引号、以及模板字符串中可以解析html的标签

三:操作DOM元素属性

1 操作元素常用属性

例如img的src属性、a的href属性

可以通过:对象.属性 = 值的方式修改

获取后:img.src = '....'

2 操作元素样式属性

通过style修改元素样式

  1. 语法格式:对象.style.属性 = '值'
  2. 对于CSS中background-color、margin-top等有短横线的,在JS中要修改成小驼峰的形式
  3. 生成的是行内样式表,权重比较高

通过className修改元素样式

  1. 语法格式:元素.classsName = '类名'
  2. 注意:
    1. 如果在原有类名的基础上添加类名,那么应保留在字符串中保留之前的类名,否则会覆盖之前的类名
    2. 这种方法常用于修改较多样式需要修改的情况

通过classList修改元素样式(重点)

  1. 为了解决className容易覆盖以前类名,可以通过classList方式追加和删除类名
  2. 语法格式
    1. 添加类名:元素.classList.add('类名')
    2. 删除类名:元素.classList.remove('类名')
    3. 切换类名:元素.classList.toggle('类名')
      1. 对于"切换类名"含义指,操作的元素"有括号内书写的类名"就删除掉该类名;元素上没有该类名就添加上该类名;

四:操作表单元素属性

1 常用操作表单元素属性

  • 利用value获取表单输入元素的值
  • 利用type修改表单元素的类型
  • checked(复选框是否被选中)、disabled(是否禁用某一按钮),checked和disabled都是默认为false

2 自定义元素属性

  • 在标签中一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取
相关推荐
kevlin_coder8 分钟前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生9 分钟前
JS 性能优化
前端·javascript
peachSoda713 分钟前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
hbqjzx13 分钟前
记录一个自动学习的脚本开发过程
开发语言·javascript·学习
浪裡遊18 分钟前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
fruge21 分钟前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript
Aoda35 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
幸运小圣36 分钟前
Set数据结构【ES6】
javascript·数据结构·es6
zxg_神说要有光1 小时前
我好像找到了最适合我的生活状态
前端·javascript
爱上妖精的尾巴1 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏