优秀的编程知识分享平台

网站首页 > 技术文章正文

JavaScript正确操作DOM元素的方式

nanyue 2025-01-02 18:08:56 技术文章 2 ℃

根据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>

上一篇： vue3-类与样式绑定
下一篇： Fabric.js 元素选中状态的事件与样式

猜你喜欢

2025-01-02 JavaScript字符串toString()方法教程
2025-01-02 vue3 - 内置组件Teleport的使用
2025-01-02 网页三维CAD中加载和保存STEP模型
2025-01-02 在.NET Web API中设置响应输出Json数据格式的两种常用方式
2025-01-02 剖析Selenium代码执行时元素查找失败的缘由
2025-01-02 H5的Canvas绘图——使用fabricjs绘制一个可多选的随机9宫格
2025-01-02 jscanify:支持 Node.js/浏览器/React 移动文档扫描仪
2025-01-02 js事件机制详解
2025-01-02 Java ArrayList用法详解附代码示例
2025-01-02 如何用枚举快速提高编程效率，数据元素快速对应，小枚举大作用

最近发表