vue通过class获取dom_web前端教程JavaScript学习笔记DOM

最新推荐文章于 2025-02-22 15:30:00 发布
最新推荐文章于 2025-02-22 15:30:00 发布
阅读量1.2w 收藏 7
点赞数 3
文章标签： vue通过class获取dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30588427/article/details/113323745
版权
这篇JavaScript学习笔记介绍了DOM操作，包括通过getElementById、getElementsByClassName、getElementsByTagName和querySelector方法获取元素，以及操作元素的innerHTML、innerText、attributes、style和className等属性，展示了如何动态改变页面内容和样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

6d3d953b09da0bbb46251f27de4dac67.png

　　web前端教程JavaScript学习笔记 DOM一DOM（Document Object Model）： 文档对象模型

9569f51bff4cb7462221e7187bb0fda5.png

其实就是操作 html 中的标签的一些能力

　　我们可以操作哪些内容

　　获取一个元素

　　移除一个元素

　　创建一个元素

　　向页面里面添加一个元素

　　给元素绑定一些事件

　　获取元素的属性

给元素添加一些 css 样式

　　...

　　DOM 的核心对象就是 docuemnt 对象

　　document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法

　　DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

获取一个元素

  • 通过 js 代码来获取页面中的标签
  • 获取到以后我们就可以操作这些标签了
  • getElementById 是通过标签的 id 名称来获取标签的
  • 因为在一个页面中 id 是唯一的，所以获取到的就是一个元素

getElementById

<body>

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

<script>

var box = document.getElementById('box')

console.log(box) // <div></div> </script></body>

  • 获取到的就是页面中的那个 id 为 box 的 div 标签
  • getElementsByClassName 是用过标签的 class 名称来获取标签的
  • 因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素
  • 哪怕你获取的 class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已

getElementsByClassName

<body>

<div calss="box"></div>

<script>

var box = document.getElementsByClassName('box')

console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>

  • 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是伪数组
  • 这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个 div，需要用索引来获取
  • getElementsByTagName 是用过标签的 标签 名称来获取标签的
  • 因为页面中可能有多个元素的 标签 名称一样，所以获取到的是一组元素
  • 哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已

getElementsByTagName

<body>

<div></div>

<script>

var box = document.getElementsByTagName('div')

console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script></body>

  • 和 getElementsByClassName 一样，获取到的是一个长得很像数组的元素
  • 必须要用索引才能得到准确的 DOM 元素
  • querySelector 是按照选择器的方式来获取元素
  • 也就是说，按照我们写 css 的时候的选择器来获取
  • 这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素

querySelector

console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素

querySelectorAll

  • querySelectorAll 是按照选择器的方式来获取元素
  • 这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回

console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素

  • 获取到的是一组数据，也是需要用索引来获取到准确的每一个 DOM 元素
  • 通过我们各种获取元素的方式获取到页面中的标签以后
  • 我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上
  • 获取元素内部的 HTML 结构

操作属性

innerHTML

<body>

<div>

<p>

<span>hello</span>

</p>

</div>

<script>

var div = document.querySelector('div')

console.log(div.innerHTML)

/* <p> <span>hello</span> </p> */

</script></body>

  • 设置元素的内容

<body>

<div></div>

<script>

var div = document.querySelector('div')

div.innerHTML = '<p>hello</p>'

</script></body>

  • 设置完以后，页面中的 div 元素里面就会嵌套一个 p 元素
  • 获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）

innerText

<body>

<div>

<p>

<span>hello</span>

</p>

</div>

<script>

var div = document.querySelector('div')

console.log(div.innerText) // hello </script></body>

  • 可以设置元素内部的文本

<body>

<div></div>

<script>

var div = document.querySelector('div')

div.innerText = '<p>hello</p>'

</script></body>

  • 设置完毕以后，会把 <p>hello</p> 当作一个文本出现在 div 元素里面，而不会把 p 解析成标签
  • 获取元素的某个属性（包括自定义属性）

getAttribute

<body>

<div a="100" class="box"></div>

<script>

var div = document.querySelector('div')

console.log(div.getAttribute('a')) // 100 console.log(div.getAttribute('class')) // box </script></body>

setAttribute

  • 给元素设置一个属性（包括自定义属性）

<body>

<div></div>

<script>

var div = document.querySelector('div')

div.setAttribute('a', 100)

div.setAttribute('class', 'box')

console.log(div) // <div a="100" class="box"></div> </script></body>

removeAttribute

  • 直接移除元素的某个属性

<body>

<div a="100" class="box"></div>

<script>

var div = document.querySelector('div')

div.removeAttribute('class')

console.log(div) // <div a="100"></div> </script></body>

style

  • 专门用来给元素添加 css 样式的
  • 添加的都是行内样式

<body>

<div></div>

<script>

var div = document.querySelector('div')

div.style.width = "100px"

div.style.height = "100px"

div.style.backgroundColor = "pink"

console.log(div)

// <div style="width: 100px; height: 100px; background-color: pink;"></div> </script></body>

  • 页面中的 div 就会变成一个宽高都是100，背景颜色是粉色
  • 专门用来操作元素的 类名的

className

<body>

<div class="box"></div>

<script>

var div = document.querySelector('div')

console.log(div.className) // box </script></body>

  • 也可以设置元素的类名，不过是全覆盖式的操作

<body>

<div class="box"></div>

<script>

var div = document.querySelector('div')

div.className = 'test'

console.log(div) // <div class="test"></div> </script></body>

  • 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
元庆国
关注
记一次VUE使用中通过class获取div下所有元素并做操作
weixin_44439070的博客
07-29 6329
实现目的： 当点击其中一个元素时设置背景颜色同时修改兄弟元素背景色 例子如下： <template> <div class="tab-index-item" id="aqi" @click="addDatas('aqi',$event)" title="aqi" style="cursor: pointer;color: #ffffff">AQI</div> <div class="tab-index-item tabactive" @click="a
前端学习笔记____Vue2+Vue3全家桶
weixin_55181759的博客
08-09 7388
前端学习笔记____Vue2+Vue3全家桶前言第一部分 VUE基础一、Vue简介1. Vue是什么?2. Vue发展历史3. Vue的特点二、初识Vue1. Vue模板语法2. 数据绑定▲单向数据绑定v-bind▲ 双向数据绑定v-model3. el与data的两种写法▲ el的两种写法▲ data的两种写法4. MVVM模型5.数据代理6. 事件处理▲ 事件处理v-on▲ 事件修饰符▲ 键盘事件key7. 计算属性computed与监视(侦听)属性watch▲ 计算属性－computed▲ 监视(侦听
vue如何判断dom的class
08-27
主要介绍了vue如何判断dom的class,vue点击给dom添加class然后获取含有class的dom文件，具体内容详情大家参考下本
vue通过class获取dom_.NET Core通过Json或直接获取图形验证码（务必收藏备用）
weixin_42332910的博客
01-18 207
(给DotNet加星标，提升.Net技能)转自：殷慈航cnblogs.com/jiyuwu/p/11803979.html很多人写的博客大家看了会一知半解，不知道怎么用，应该引用什么类库或者代码不全，这样很多小白很是头疼，尤其是尝新技术更是如此。我们这边不止告诉你步骤，而且还提供开源demo。随着时间的推移，我们的demo库会日益强大请及时收藏GitHub：https://github....
在 Vue3 中获取元素的 class
最新发布
繁若华尘的博客
02-22 582
根据具体需求选择合适的方式，大多数情况下推荐使用 Vue 的响应式数据驱动 class 变化，而不是直接操作 DOM class。
Vue.js——获取Dom对象的类选择器名(className)
热门推荐
五柳
03-06 4万+
方法一：通过监听器监听方法event参数获取dom对象 代码： &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;
【在 Vue 中按class查找所有元素】
u012632105的博客
06-26 1137
在 Vue 中按class查找所有元素
JavaScript_StudyNote:JavaScript学习笔记
03-29
在JavaScript_StudyNote的学习笔记中，我们可以深入理解并掌握JavaScript的基础知识和高级特性。 1. **基础语法** - 变量声明：JavaScript支持var、let和const关键字声明变量，其中let和const是ES6新增的。 - ...
JavaScript的MVVM库Vue.js入门学习笔记_.docx
10-09
### JavaScript的MVVM库Vue.js入门学习笔记 #### 一、Vue.js简介 Vue.js是一个用于构建用户界面的渐进式框架。它被设计为可以自底向上逐层应用，并且可以在现有项目中逐步地引入，而不是一次性地重写整个项目。Vue...
Vue源码解析：虚拟dom详解
2401_84438067的博客
04-29 449
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件。
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 1032
前端第一部分：Vue（Ⅰ）
详解在Vue中通过自定义指令获取dom元素
08-31
本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ，具有一定的参考价值，有兴趣的可以了解一下。
在vue中获取dom元素内容的方法
08-30
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
通过Class类获取对象(实例讲解)
08-30
下面小编就为大家带来一篇通过Class类获取对象(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js/vue/tsx 中获取dom元素的方法集合
weixin_44727080的博客
09-26 910
整理下常用的获取dom元素的方法。比如js、vue、vue3、tsx中的
vue获取dom节点当前点击元素 子元素 兄弟元素 根据兄弟class获取
weixin_45599105的博客
05-23 1022
vue获取dom节点当前点击元素 子元素 兄弟元素 根据兄弟class获取
vue通过class获取dom_JavaScript学习笔记（十三） DOM(上）
weixin_42656416的博客
01-22 5479
DOM(上)DOM(Document Object Model)：文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容 获取一个元素 移除一个元素 创建一个元素 向页面里面添加一个元素 给元素绑定一些事件 获取元素的属性 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值