领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

JavaScript正确操作DOM元素的方式

nixiaole 2025-01-11 16:02:37 知识剖析 16 ℃

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

Tags：

猜你喜欢

最近发表
标签列表