获取DOM元素

已于 2022-08-22 00:55:28 修改
阅读量207 收藏
点赞数
分类专栏： JS进阶webAPI 文章标签： javascript
于 2022-07-26 22:32:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45773069/article/details/125957054
版权

WEB API基本认识

使用js去操作html和浏览器

分类：DOM（文档对象模型）BOM（浏览器对象模型）

DOM是浏览器提供一套专门用来操作网页内容的功能

DOM作用：开发网页特效，实现用户交互

DOM树

将html文档以树状结构直观表现出来，我们称之为文档树或者DOM树，直观的体现了标签和标签之间的关系

DOM对象

DOM对象：浏览器根据html标签生成的js对象

所有的标签属性都可以在对象上面找到

修改这个对象的属性会自动映射到标签身上

DOM核心思想：把网页内容当作对象来处理

获取DOM对象

根据css选择器来获取DOM元素

1选择匹配的第一个元素

document.querySelector('CSS选择器')

返回css选择器匹配到的第一个元素，若没有返回null

2选择匹配的多个元素

document.querySelectorAll('CSS选择器')

返回匹配到的集合，得到的是一个伪数组，有长度和索引号，没有push，pop等方法

其他方式获取DOM元素

93e53f0169994feda0c658b8da3c2c41.png

weixin_45773069
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
获取dom的最终的css属性值
现在学习也不晚
11-10 2083
需求我们有的时候需要测试看一下属性是否设置成功，所以需要通过dom去获取css样式。但是，如果使用原生去获取的话，会发现只有在dom身上设置的才能够获取的到，如dom.style.width，只有直接写到标签上，才能够获取的到，而在别的地方的我们将获取不到，今天我们就研究一下，直接获取写在style标签的css属性。就像jq的css()方法一样getComputedStyle方法我们可以通过getC
Dom基础 特殊的节点 获取元素节点的内容 获取元素的属性 css属性 Dom获取元素的方法
cc12345_10的博客
04-29 277
1.Dom基础 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dom基础</title> </head> <body> <div id="wp" class="aa bb cc"> 黄梅时节家家雨 <p id="cont">清明时节雨纷纷</p> <!-- &l
js根据CSS选择器来获取DOM元素
2203_75410429的博客
05-12 729
第一个第一个。
获取DOM元素的方法
最新发布
qq_53642101的博客
09-26 184
一下两种方法不具有 实时性（只能获取页面已经存在的元素）使用 css 选择器 进行选择（.类名）
CSS-Used-ChromeExt：获取所选DOM及其子级使用的所有CSS规则
01-30
CSS使用 获取所选DOM及其子级使用的所有css规则。 在Chrome网上应用店中获取它： 总览 获取所选DOM及其子级使用的所有css规则。 仅用于提取使用过CSS。 因此，未使用CSS将被忽略。 如果所选的DOM是正文，则当前的结果将是整个页面使用的所有CSS。 用法 F12打开开发人员工具，选择dom并激活“ CSS Used”面板。 所选dom及其子级CSS规则将在正确的textare中列出。 您可以单击“预览”以查看具有清晰样式规则的所选零件。 常问问题 允许阅读我的浏览历史记录 参见 本地预览不正确 对于.wrap p{...}这样CSS规则，如果仅选择<p> ，则结果.wrap p{...}可能不会直接应用于<p> 。 将此规则的选择器更改为p{...}或在最终HTML中为<p>提供.wrap父级。 并非所有CSS都有 结果基于当前HTML DOM生成。 如果文档中不存在div，除非经过特定的用户交互，否则结果可能会漏掉刚出生的div的样式规则。 总是说要刷新页面 首先，检查是否为Chrome Web Store页面，即https://chrome.g
DOM获取和属性操作
Hbb_000的博客
06-29 568
作用:直观体现了标签与标签之间的关系核心思想:把网页内容当成对象处理根据css选择器来获取DOM元素document.queryselector('css选择器'):只能获取一个元素参数:包含一个或多个有效的css选择器返回值如果没有匹配到返回nulldocument.queryselectorAll('css选择器'):能获取多个元素返回值:匹配到返回一个伪数组,匹配不到返回一个空数组注意:就算只有一个元素也必须用下标来获取目标:获取标签中间内容语法:对象.innerText 对象.innerHTML
一、DOM-获取元素
qq_55891636的博客
11-29 568
DOM（文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API；即DOM是浏览器提供的一套专门用来操作网页内容的功能。
获取DOM元素，修改属性
qq_59381940的博客
07-04 892
1.作用和分类作用：就是使用js去操作html和浏览器分类：DOM(页面文档对象模型)，BOM（浏览器对象模型）js分为ECMAScript（js语言基础）和WebAPIsWebAPI又分为DOM(页面文档对象模型)，BOM（浏览器对象模型）2.什么是DOMDOM(页面文档对象模型)是用来呈现以及与任意HTML或XHL文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页的功能 操作html和css作用：开发网页内容特效和实现用户交互3.DOM树将html文档以树状结构直观的表现出来，我们称之为文
获取DOM对象——根据css选择器来获取DOM元素
往前爬的蜗牛
04-01 2087
文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。 语法： elment = document.querySelector('css选择器') 如： <button id= 'do' class= 'in'></button> `document.querySelector:` document.querySelector('butto
vue获取dom元素注意事项
08-28
主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
vue获取DOM元素并设置属性的两种实现方法
08-29
下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在vue中获取dom元素内容的方法
08-30
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
JS中获取 DOM 元素的绝对位置实例详解
12-10
在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置，例如 本文 左侧的悬浮导航，当页面滚动到它以前会正常地渲染到文档流中，当页面滚动超过了它的位置，就会始终悬浮在左侧。 本文会详述各种获取 DOM 元素绝对...
WebAPIs学习---基本认知、获取DOM元素、设置/修改DOM元素内容、修改元素的样式、className和classList修改样式
Yajyaj123的博客
06-27 793
WebAPIs学习
DOM获取、修改元素CSS样式的方法
speano的博客
07-05 1469
获取元素的style相关样式时，出现属性值为空的情况，是因为element.style只能获取行内样式。
css dom名称,获取元素id或者CSS选择器 / 获取节点
weixin_33139275的博客
08-03 1948
获取元素id或者CSS选择器:1. document.getElementById("idName");a.通过指定id获取元素b.返回第一个符合条件的元素c.如果获取一个不存在的元素，则返回nulld.只有document下有存在getElementById，id是当前页面总唯一的2. parent.querySelector("CSS 选择器");document.querySelector(...
JS获取dom的CSS样式
huyao的博客
06-20 3016
获取样式//获取样式属性值 function getStyle(obj, attr) { if(obj.currentStyle) {    //兼容IE return obj.currentStyle[attr];     } else {    //兼容火狐谷歌 return window.getComputedStyle(obj,false)[attr...
javaScript中获取DOM元素的CSS样式
qq_42674779的博客
12-27 1686
上一篇在我的博客中提到设置和读取css样式，都是内联样式。但在实际操作中我们确很少写内联样式，所以读取一个元素的样式就会用到另一个方法。 获取元素的当前样式，当前显示的样式。 1、语法：object.currentstyle.style name 适用于IE8及以下的游览器。 例：object.currentstyle.style name &lt;html&gt; &lt;head&gt; &l...
uniapp 获取dom元素
03-31
在uniapp中，可以使用以下方法获取dom元素： 1. 使用原生的querySelector方法获取dom元素： ```js let dom = uni.createSelectorQuery().select('#id'); // 通过id获取dom元素 ``` 2. 使用ref属性获取dom元素： ```html <template> <div ref="myDiv"></div> </template> <script> export default { mounted() { let dom = this.$refs.myDiv; // 获取dom元素 } } </script> ``` 3. 使用$nextTick方法获取dom元素： ```html <template> <div ref="myDiv"></div> </template> <script> export default { mounted() { this.$nextTick(() => { let dom = this.$refs.myDiv; // 获取dom元素 }) } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值