详解JavaScript如何操作元素属性,样式和类名

DOM – Document Object Model

一整套操作文档流的属性和方法

• 操作页面的标签(元素)
  操作标签的增删改查
  操作标签的属性(id, class, type, …)
  操作标签的样式
  …

• 认识一些内容
  -document：文档流，页面，根节点，但不是元素(标签)
  -html：承载所有标签的最大的元素，根元素节点
  -head：专门承载当前页面的说明标签，这里的内容一般不显示在页面上
  -body：专门承载当前页面的显示标签，真实显示在网页的内容

获取元素

用一个变量保存页面中的某个或者某些元素
获取元素的方法分为两类
1、获取非常规元素

• html：document.documentElement
• head：document.head
• body：document.body

2、获取常规元素

• 根据 id 获取元素
  语法：document.getElementById
  返回值：如果页面上有 id 对应的元素，那么就是这个元素，如果没有就是 null

• 根据 类名 获取元素
  语法：document.getElementsByClassName(‘元素类名’)
  返回值：必然是一个伪数组
  如果页面上有 类名 对应的元素, 那么有多少获取多少, 放在伪数组内返回
  如果页面上没有 类名 对应的元素, 那么就是一个空的伪数组

• 根据 标签名 获取元素
  语法：document.getElementsByTagName(‘标签名’)
  返回值：必然是一个伪数组
  如果页面上有 标签名 对应的元素, 那么有多少获取多少, 放在伪数组内返回
  如果页面上没有 标签名 对应的元素, 那么就是一个空的伪数组

• 根据选择器获取 一个 标签
  语法：document.querySelector(‘选择器’)
  返回值：如果页面上有 选择器 对应的元素, 那么返回选择器对应的第一个元素
  如果页面上没有 选择器 对应的元素, 那么就是 null

• 根据选择器获取 一组 标签
  语法：document.querySelectorAll(‘选择器’)
  返回值：必然是一个伪数组
  如果页面上有 选择器 对应的元素, 有多少获取多少, 放在一个伪数组内返回
  如果页面上没有 选择器 对应的元素, 那么就是一个空的伪数组

操作元素样式

• 在 JS 内操作元素样式有三种
  1、获取元素行内样式(只能获取到行内样式)
  2、获取元素非行内样式(包含行内和非行内)
  3、设置元素的样式(只能设置行内样式)
  注意:涉及到带有中划线的样式名的时候
  转换成驼峰命名法
  使用数组关联语法

• 获取元素行内样式
  语法：元素.style.样式名

console.log(ele.style.width) console.log(ele.style.height) // 非行内样式 console.log(ele.style.fontSize) console.log(ele.style['font-size'])

• ·获取元素非行内样式
  语法：window.getComputedStyle(要获取样式的元素).样式名

console.log(window.getComputedStyle(ele).width) console.log(window.getComputedStyle(ele).height) console.log(window.getComputedStyle(ele).fontSize) console.log(window.getComputedStyle(ele)['background-color'])

• 设置元素样式(只能设置行内样式)
  语法：元素.style.样式名 = 样式值

ele.style.backgroundColor = 'red'

操作元素类名

目的：批量给变样式

• className
  原生属性的操作
  因为 JS 内有一个关键子叫做class，为了避开改名叫做className
  注意：类名的值是一个字符串, 但是字符串中可能包含多个类名

• classList
  每一个 元素节点 身上自带一个属性叫做classList
  是一个类似素组的数据结构，存放的是该元素的所有类名
  增删改查都是对 classList 的操作，给出专用的api
  增：元素.classList.add(类名)
  删：元素.classList.remove(类名)
  切换：元素.classList.toggle(类名)
  -原先有就删除，原先没有就增加