JavaScript正确操作DOM元素的方式

liuian 2024-12-30 05:16 19 浏览

根据css选择器操作DOM元素

获取DOM元素就是利用JS原则页面中的标签元素
document.querySelector('CSS选择器')，选择匹配第一个元素，只匹配一个元素

<body>
  <div id="box"> 123 </div>

  <script>
    const box = document.querySelector('#box')
    console.log(box);

  </script>
</body>

document.querySelectorAll('CSS选择器'),匹配多个元素,返回的是一个NodeList对象集合

<body>
  <div id="box"> 123 </div>
  <ul>
    <li> 测试1 </li>
    <li> 测试1 </li>
    <li> 测试1 </li>
  </ul>

  <script>
    const box = document.querySelectorAll('ul li')
    console.log(box);

  </script>
</body>

通过DOM选择器改变ul li列表中的字体颜色

<body>
  <ul>
    <li> 测试1 </li>
    <li> 测试2 </li>
    <li> 测试3 </li>
  </ul>
  <script>
    const li = document.querySelectorAll('ul li')
    console.log(li.length);
    for (let index = 0; index < li.length; index++) {
      const element = li[index];
      element.style.color = 'blue'
    }
  </script>
</body>

操作元素内容

DOM对象都是根据标签生成的，所有操作标签，本质上就是操作DOM对象，如果想要修改标签元素里面的内容，可以使用两种方式

对象.innerText 属性，将文本内容添加/更新到任意标签位置，显示纯文本，不解析标签

<body>
  <div> 呱呱小程序开发工作室 </div>
  <div class="box"> 我是div </div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    // 修改文字内容
    box.innerText = '123'
  </script>
</body>

对象.innerHTML属性，将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模板字符串

<body>
  <div> 呱呱小程序开发工作室 </div>
  <div class="box"> 我是div </div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    // 修改文字内容  对象.innerText 属性
    box.innerHTML = `<h1> 123 </h1>`
  </script>
</body>

操作元素属性

操作元素常用的属性

可以通过JS设置/修改标签元素属性，比如通过 src 更换图片
最常见的属性比如：href、title、src等
语法：对象.属性 = 值

操作元素样式列表

通过 style 属性操作css
语法：对象.style.样式属性 = 值
如属性有-字符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

操作类名(className)操作css，如果修改的样式比较多，直接通过style属性修改比较繁琐，我们就可以借助于css类名的形式
语法：元素.className = '类名'
注意：由于class是关键字，所以使用className去代替，className是使用新值换旧值，新值覆盖旧值，如果需要添加一个类，需要保留之前的类名

<body>
  <div> 呱呱小程序开发工作室 </div>
  <script>
    // 获取元素
    const div = document.querySelector('div')
    div.className = 'box'
    // 如果两个 css 样式都需要多个类名，类名与类名之间必须要加空格
    div.className = 'nav box'
</script>
</body>

通过 classList 操作类控制 css，为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
追加一个类的语法：元素.classList.add('类名')
删除一个类的语法：元素.classList.remove('类名')
切换一个类的语法：元素.classList.toggle('类名')

<body>
  <div class="nav"></div>
  <script>
    // 获取元素
    const div = document.querySelector('.nav')
    // 追加一个元素
    div.classList.add('box')
    // 删除一个元素
    div.classList.remove('box')
    // 切换一个类
    div.classList.toggle('box')
  </script>
</body>

toggle javascript

上一篇：JavaScript中的querySelector()方法是什么，它是如何工作的?
下一篇：使用简单的JavaScript创建一个屏幕录屏工具

JavaScript正确操作DOM元素的方式

根据css选择器操作DOM元素

操作元素内容

操作元素属性

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

【验证码逆向专栏】vaptcha 手势验证码逆向分析

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

JavaScript正确操作DOM元素的方式

根据css选择器操作DOM元素

操作元素内容

操作元素属性

相关推荐

Python实现人事自动打卡，再也不会被批评

Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控

一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案

【验证码逆向专栏】vaptcha 手势验证码逆向分析

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄

C++ std::vector 简介

python使用fitz模块提取pdf中的图片

《人人译客》如何规划你的移动电商网站(2)

Jupyterhub安装教程 jupyter怎么安装包

网页转成pdf文件的经验分享网页转成pdf文件的经验分享怎么弄