深入理解 DOM 操作：从基础到类名管理的全面解析

于 2025-01-02 08:22:38 发布
阅读量3.1k 收藏 35
点赞数 60
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65376846/article/details/144875549
版权

1.1.什么是DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2.DOM树

  • 文档：一个页面就是一个文档，DOM中使用doucument来表示
  • 元素：页面中的所有标签都是元素，DOM中使用 element 表示
  • 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM 把以上内容都看做是对象

2.获取元素

2.1.如何获取页面元素

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式：

  • 根据ID获取
  • 根据标签名获取
  • 通过class类名获取
  • 通过name属性获取
  • 通过选择器获取

2.2.根据ID获取

使用 getElementById() 方法可以获取带ID的元素对象

document.getElementById('id名')

使用console.log()可以快速打印我们获取的元素对象，更好的查看对象里面的属性和方法。

示例

<div id="time">2022-08-08</div>
<script>
  //1.因为我们文档页面从上往下加载，所以得先有标签，所以script写在标签下面
  //2.get 获得 element 元素 by 通过 驼峰命名法
  //3.参数 id是大小写敏感的字符串
  //4.返回的是一个元素对象
  var time = document.getElementById('time')
console.log(time)
//5.console.dir 打印我们的元素对象，更好的查看里面的属性和方法
console.dir(time)
</script>

2.3.根据标签名获取

根据标签名获取，使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

  • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
  • 得到元素对象是动态的
  • 返回的是获取过来元素对象的集合，以伪数组的形式存储
  • 如果获取不到元素，则返回为空的伪数组(因为获取不到对象)
<ul>
  <li>123</li>
<li>456</li>
<li>789</li>
<li>abc</li>
</ul>
<script>
  //1.返回的是获取过来元素对象的集合 以伪数组的形式存储
  var li = document.getElementsByTagName('li')
  console.log(li)
  console.log(li[1])
//2.依次打印，遍历
for (var i = 0; i < li.length; i++) {
  console.log(li[i])
}
// 3.如果页面中只有 1 个 li，返回的还是伪数组的形式
// 4.如果页面中没有这个元素，返回的是空伪数组
</script>

2.4.通过class类型获取

使用 getElementByClassName('类名') 方法可以返回元素对象合集

  • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
  • 得到元素对象是动态的
  • 返回的是获取过来元素对象的集合，以伪数组的形式存储
  • 如果获取不到元素，则返回为空的伪数组(因为获取不到对象)
document.getElementByClassName('类名')
<div class="demo">测试</div>
<div class="demo">测试1</div>
<div class="demo">测试2</div>
<div class="demo">测试3</div>
<div class="demo">测试4</div>
<script>
  var demo = document.getElementsByClassName('demo')
  console.log(demo)
</script>

2.5.通过name属性获取

document.getElementByName('name名')
<input type="text" name="input" id="">
  <script>
  var input = document.getElementsByName('input')
  console.log(input)
</script>

注意：该方法只有标签拥有name属性时，才能使用该方法。

2.6.通过选择器获取

使用 getElement.querySelector('选择器') 方法可以根据指定选择器返回第一个元素对象

document.querySelector('选择器');

// 切记里面的选择器需要加符号 
// 类选择器.box 
// id选择器 #nav
var firstBox = document.querySelector('.box');
<div class="app">
  hello world
    <p>111</p>
</div>
<script>
    //通过选择器获取div下的p元素
    var p = document.querySelector('.app p')
    console.log(p)
</script>

注意：使用此方法我们只能根据指定选择器返回第一个元素对象，如果后面有多个相同的元素对象，也只能返回第一个元素对象。想要返回所有的元素对象，需要使用getElement.querySelectorAll('选择器')方法,此时得到的也是一个对象的集合。

document.querySelectorAll('选择器')
<div class="app">
  hello world
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>
<script>
    //通过选择器获取div下的p元素
    var p = document.querySelectorAll('.app p')
    console.log(p)
</script>

2.7.通过节点关系获取节点

DOM节点并不是单独存在的，节点间存在相互关系：父子关系、非父子关系（兄弟关系）

2.7.1获取兄弟节点

  1. 获取下一个兄弟元素节点 || 获取下一个节点
nextElementSibling	下一个元素节点
nextElement					包含换行符、空格
<ul>
    <li>
        <span>6666</span>
        <span>3333</span>
        <p class="p">11111</p>
        <span>4444</span>
    </li>
    <li>
        <p>222</p>
    </li>
</ul>
<script>
  //选中第一个li中的p标签元素
  var p = document.querySelector('li:nth-child(1) p')
  //获取p标签元素的下一个元素节点，不包含空格、换行符
  console.log(p.nextElementSibling)       //<span>4444</span>
</script>

<ul>
    <li>
        <span>6666</span>
        <span>3333</span>
        <p class="p">11111</p>
        <span>4444</span>
    </li>
    <li>
        <p>222</p>
    </li>
</ul>
<script>
  //选中第一个li中的p标签元素
  var p = document.querySelector('li:nth-child(1) p')
  //获取p标签元素的下一个元素节点，包含空格、换行符，
  //此时p标签元素后方有空格，所以它的下一个元素节点是文本节点
  console.log(p.nextSibling)       //#text
</script>

  1. 获取上一个兄弟元素节点 || 获取上一个节点
previousElementSibling				上一个元素节点
previousSibling								包含换行符、空格
<ul>
      <li>
          <span>6666</span>
          <span>3333</span>
          <p class="p">11111</p>
          <span>4444</span>
    </li>
    <li>
          <p>222</p>
    </li>
</ul>
<script>
  //选中第一个li中的p标签元素
  var p = document.querySelector('li:nth-child(1) p')
  //获取p标签元素的上一个节点元素，不包含空格、换行符
  console.log(p.previousElementSibling)       //<span>3333</span>
</script>

<ul>
      <li>
          <span>6666</span>
          <span>3333</span>
          <p class="p">11111</p>
          <span>4444</span>
    </li>
    <li>
          <p>222</p>
    </li>
</ul>
<script>
  //选中第一个li中的p标签元素
  var p = document.querySelector('li:nth-child(1) p')
  //获取p标签元素的上一个节点元素，包含空格、换行符
  console.log(p.previousSibling)       //#text
</script>

2.7.2.获取子节点

  1. 获取第一个子节点 || 获取第一个元素子节点
firsetChild					获取第一个子节点		包含空格、换行符
firstElementChild		获取第一个元素子节点
    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>
        var li = document.querySelector('ul li:first-child')
        console.log(li.firstChild)      //#text
    </script>

    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>
        var li = document.querySelector('ul li:first-child')
        console.log(li.firstElementChild)   //<span>6666</span>
    </script>

  1. 获取最后一个子节点 || 获取最后一个元素子节点
lastChild					获取最后一个子节点		包含空格、换行符
lastElementChild		获取最后一个元素子节点
    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>
        var li = document.querySelector('ul li:first-child')
        console.log(li.lastChild)       //#text
    </script>

    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>
        var li = document.querySelector('ul li:first-child')
        console.log(li.lastElementChild)        //<span>4444</span>
    </script>

  1. 获取所有的子节点（包含换行符、空格）
childNodes
    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>
        var li = document.querySelector('ul li:first-child')
        console.log(li.childNodes)
    </script>

注意：因为这种方法包含换行符和空格，所以最终集合的元素中元素个数为9

  1. 获取指定元素的子节点的集合（不包含换行符、空格）
children
    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>
        var li = document.querySelector('ul li:first-child')
        console.log(li.children)
    </script>

2.7.3获取父节点

获取指定元素的父元素

parentNode		
    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>
        var li = document.querySelector('ul li:first-child')
        console.log(li.parentNode)
    </script>

    <ul>
        <li>
            <span>6666</span>
            <span>3333</span>
            <p class="p">11111</p>
            <span>4444</span>
        </li>
        <li>
            <p>222</p>
        </li>
    </ul>
    <script>

        var ul = document.querySelector('ul')
        console.log(ul.parentNode)
    </script>

3.DOM内容及属性的设置

3.1.操作元素节点的属性

  1. 原生属性
class/id/style

元素.属性名 = 属性值
    <div id="app" style="color: red;" class="demo">
        11111
    </div>
    <script>
        var app = document.querySelector('#app')
        app.id = 'box'
        app.className = 'text'
        app.style = 'color:blue;font-size:50px'
    </script>

  1. 自定义属性

不是标签原生自带的属性

元素.setAttribute('自定义的属性名','属性值')
    <div id="app" style="color: red;" class="demo">
        11111
    </div>
    <script>
        var app = document.querySelector('#app')
        app.setAttribute('a', '1')
    </script>

    <div>
        11111
    </div>
    <script>
        var div = document.querySelector('div')
        div.setAttribute('class', 'demo')
        div.setAttribute('id', 'app')
    </script>

注意：推荐使用自定义属性的方法，因为自定义的方法使用范围大于原生属性的使用范围。

  1. data-自定义名

h5新标签属性

自定义属性

主要用来通过js操作当前dom

//格式
<元素标签 data-自定义名1="值1" data-自定义名2="值2" ...></元素标签>

获取data-自定名的值 通过元素.dataset.自定义名 获取

    <div id="app" data-index="100" class="demo active app" data-item="hello" data-index="100">11111</div>
    <script>
        var app = document.querySelector('#app')
        console.log(app.dataset.index, app.dataset.item)
    </script>

3.2.原生操作处理类名

元素.className = '新值'
<div id="app" data-index="100" class="demo">11111</div>
<script>
  var app = document.querySelector('#app')
  app.className = ('active')
</script>

3.2.1.获取当前元素所有的类名的列表

元素.classList
<div id="app" data-index="100" class="demo active app">11111</div>
<script>
  var app = document.querySelector('#app')
  console.log(app.classList)
</script>

3.2.2.使用原生操作添加类名

元素.classList.add('类名')
<div id="app" data-index="100" class="demo active app">11111</div>
<script>
  var app = document.querySelector('#app')
  app.classList.add('test')
</script>

3.2.3.使用原生操作删除类名

元素.classList.remove('类名')
<div id="app" data-index="100" class="demo active app">11111</div>
<script>
  var app = document.querySelector('#app')
  app.classList.remove('app')
</script>

3.2.4.使用原生操作替换类名

元素.classList.replace('old','new')
<div id="app" data-index="100" class="demo active app">11111</div>
<script>
  var app = document.querySelector('#app')
  app.classList.replace('app', 'test')
</script>

3.2.5.使用原生操作切换类名

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

示例：

页面中有一行文字和一个按钮，点击按钮时文字会出现和隐藏。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" class="app demo">1111</div>
    <button onclick="toggle()">显示/隐藏</button>
    <script>
        var app = document.querySelector('#app')
        function toggle() {
            app.classList.toggle('active')
        }
    </script>
</body>

</html>

DOM操作
qq_53566222的博客
07-14 2238
DOM是当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。把文档中的代码翻译成一个对象模型在这个模型中所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象这些对象之间在文档模型数据结构中存在某种关系根节点父子节点同胞节点等等1.只有一个根节点document2.除了根节点外所有节点都有唯一的一个父节点3.document是window对象的属性。............
第一章 JavaScript --下
业精于勤，荒于嬉
07-15 308
由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。 2.5.6.5 属性操作 需求 操作方式 读取属性值 元素对象.属性名 修改属性值 元素对象.属性名=新的属性值 2.5.6.6 标签体的操作 需求 操作方式 获取或者设置标签体的文本内容 element.innerText 获取或者设置标签体的内容 element.innerHTML 2.5.6.7
深入理解Shadow DOM：Web组件技术全面解析
资源摘要信息:"Shadow DOM是一个Web组件技术，它允许开发者在文档的DOM树中嵌入一个隐藏的独立DOM树。这种隐藏的DOM树被称为'影子树'，它与主文档的DOM树相互隔离，因此对主文档的DOM树不会产生影响。这样，开发者...
深入理解DOM操作：动态修改网页内容的专家指南
本文全面探讨了文档对象模型（DOM）操作的理论基础和编程实践技巧。首先，介绍了DOM树结构的基本概念，节点类型、层级关系以及核心节点的属性和方法。然后，详细分析了DOM事件机制，包括事件流的三个阶段、事件对象...
【VB-WebBrowser控件与HTML DOM：文本提取的深入探索】：从基础到进阶
文章从HTML DOM的节点结构解析、元素选择与遍历，到DOM元素的创建、修改与删除提供了深入的分析，并且覆盖了VB-WebBrowser控件的初始化、页面交互、自动化测试和故障排除技术。此外，还介绍了在文本提取方面应用的...
深入理解ExtCore：JavaScript库解析
"这篇文档是关于ExtCore的详细介绍，它是一个轻量级的JavaScript库，提供了DOM操作、Ajax、事件处理、动画、模板和 pub/sub 机制等功能，适用于快速Web开发。文档由TommyMaintz、AaronConran、JamesDonaghue、Jamie ...
掌握jQuery选择器：从基础到深入详解
通过上述分析，我们可以了解到这份文件是一份关于jQuery选择器的全面学习材料，它不仅包含了丰富的理论知识，还提供了实用的示例代码和演示材料，使得初学者可以深入理解并掌握jQuery选择器的用法。
dom操作
最新发布
aoe_z的博客
08-08 1005
dom操作。
DOM的操作
Mr_115的博客
11-01 3038
DOM的操作
DOM（操作）
weixin_45789701的博客
11-19 2639
前端笔记4 JavaScript - DOM
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托&冒泡
浅弋、璃鱼的博客
04-13 1724
文章目录一、节点操作:1. 删除节点:1.2. 案例：删除留言2.2 实现: 一、节点操作: 1. 删除节点: node.removeChild(child) node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点 <button>删除</button> <ul> <li>熊大</li> ...
操作DOM
小白菜的博客
06-17 507
    DOM(文档对象模型)是W3C指定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的Web 标准。DOM规定了一系列标准接口，允许开发人员通过标准方式访问文档结构，操作网页内容，控制样式和行为等。    文章要点：了解DOM使用JavaScript操作结点使用JavaScript操作元素节点使用JavaScript操作文本和属性结点使用JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不在··

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值