JS：获取和修改网页元素

文章目录

• 一、获取网页中元素
• 二、操作元素属性
  • 1.修改属性值
  • 2.通过类名添加或移除属性
  • 3.自定义属性
• 总结

---

一、获取网页中元素

获取网页元素一般是用CSS选择器document.querySelector('标签')

document.querySelector('标签')

输入doc.qs回车

当页面中没有相同标签元素时，可以用这种方法简单获取元素

如果页面中有相同元素，我们只获取其中某一个，就需要在创建标签时添加类名等属性，通过属性获取元素。就相当于我们要获取某个学生的信息，不能通过“学生”来获取，而是通过学生的名字，或学号这种属性

通过类名获取元素的语法是document.querySelector('.类名')

document.querySelector('.类名')

通过id获取类名的语法是document.querySelector('#id')

document.querySelector('#id')

需要注意的是，给标签添加id属性时尽量不要用纯数字，否则获取元素时容易报错

通过其他属性获取元素的语法是

document.querySelector('[键=值]')

 除了直接通过属性获取网页中的元素，还能通过兄弟节点，父亲节点等元素关系获取元素，后续介绍事件流的时候将会详细介绍

无序列表ul下的小li一般不会设定属性，如果我们想获取小li，用document.querySelector('标签')方法只会获取第一个符合的标签，因此我们要用方法document.querySelectorAll('标签')

document.querySelectorAll('标签')

输入doc.qsa回车

 querySelectorAll方法返回值是一个伪数组(可通过Array.length获取数组长度)，只具有数组属性但不能使用数组方法(例如Array.push()尾插元素)

二、操作元素属性

1.元素.属性

qs获取元素的返回值是一个对象，因此可以操作元素属性就是对象.属性

(1)修改标签内容：元素.innerHTML或元素.innerText

元素.innerHTML

修改这两个属性可以修改元素内容(<div></div>之间的内容)，可以通过这种方式结合`${变量}`在盒子内批量添加不同的标签。两者的区别显而易见：innerHTML可以识别标签，而innerText不能，因此大部分情况下使用innerHTML

(2)修改标签属性：表单.属性

下面列举几种标签的特有属性

通过value属性修改表单内容

ipt.value

 修改type为password使内容不可见

元素.type=password

 input类型为checkbox时为勾选框，可以通过chekced属性查看是否勾选，true为勾选，false未勾选

 button.disabled禁用按钮

 disabled属性为"禁用吗？"默认为不禁用，disabled为false

2.通过类名添加或移除属性

先在head部分添加style，通过.active创建active样式，就可以通过

元素.classList.add('active')

添加样式到自己的属性中

移除属性：元素.classList.remove('类名')

元素.classList.remove('类名')

切换属性：元素.classList.toggle('类名')

元素.classList.toggle('类名')

若原本有该属性则删除，若无则添加

 

3.自定义属性

在设置标签时，我们需要区分并获取诸如ul中多个小li，应对多个相同元素的情况，除了复杂的类名，还可以添加一个自定义属性快速获取某一个元素

设定自定义属性：data-自定义属性名

访问自定义属性的语法：元素.dataset.自定义属性名 

如图，在循环中只有id为2的小li没有添加active类

自定义属性在后续学习事件委托和事件对象时非常重要

---

总结