vue通过class获取dom_JavaScript学习笔记（十三） DOM(上）

最新推荐文章于 2024-07-26 20:40:28 发布

四散

最新推荐文章于 2024-07-26 20:40:28 发布

阅读量5.4k

点赞数 1

文章标签： vue通过class获取dom

本文链接：https://blog.csdn.net/weixin_42656416/article/details/113323748

版权

这篇博客介绍了JavaScript操作DOM的基本方法，包括getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAll等，以及如何使用innerHTML、innerText、getAttribute、setAttribute、removeAttribute、style和className来操作元素的属性和样式。

摘要由CSDN通过智能技术生成

DOM(上)

DOM(Document Object Model)：文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容

获取一个元素

移除一个元素

创建一个元素

向页面里面添加一个元素

给元素绑定一些事件

获取元素的属性

给元素添加一些 css 样式

...

DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM：页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

获取一个元素

通过 js 代码来获取页面中的标签
获取到以后我们就可以操作这些标签了

getElementById

getElementById 是通过标签的 id 名称来获取标签的
因为在一个页面中 id 是唯一的，所以获取到的就是一个元素

<body> <div id="box">div> <script>   var box = document.getElementById('box')   console.log(box) // script>body>

获取到的就是页面中的那个 id 为 box 的 div 标签

getElementsByClassName

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

<body> <div calss="box">div> <script>   var box = document.getElementsByClassName('box')    console.log(box) // [    console.log(box[0]) // script>body>