首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我怎么才能在他出现后得到div呢?

要在某个元素出现后获取到该元素,可以通过以下几种方式实现:

  1. 使用JavaScript的事件监听器: 可以使用JavaScript中的事件监听器来监测元素的出现。可以通过监听元素的父元素的变化事件,当该元素被添加到父元素中时,就可以获取到该元素。 示例代码:
代码语言:txt
复制
// 监听父元素的变化
var parentElement = document.getElementById('parentElementId');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 判断是否为添加节点的变化
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      // 遍历添加的节点
      mutation.addedNodes.forEach(function(node) {
        // 判断是否为目标元素
        if (node.id === 'targetElementId') {
          // 获取到目标元素
          var divElement = document.getElementById('targetElementId');
          // 执行后续操作
          // ...
        }
      });
    }
  });
});

// 配置观察选项
var config = { childList: true };

// 开始观察
observer.observe(parentElement, config);

上述代码通过MutationObserver对象监听父元素的变化,当有子元素被添加时,遍历添加的节点,如果目标元素出现,则获取到该元素并执行后续操作。

  1. 使用定时器轮询: 可以使用定时器来不断检查目标元素是否已经出现。通过设置一个间隔时间,不断检查元素是否存在,一旦存在则获取该元素。 示例代码:
代码语言:txt
复制
// 检查目标元素是否存在
function checkElement() {
  var divElement = document.getElementById('targetElementId');
  if (divElement) {
    // 获取到目标元素
    // 执行后续操作
    // ...
  } else {
    // 目标元素还不存在,继续等待
    setTimeout(checkElement, 1000); // 1秒后再次检查
  }
}

// 开始检查
checkElement();

上述代码通过checkElement函数不断检查目标元素是否存在,如果目标元素出现,则获取该元素并执行后续操作。如果目标元素还不存在,则设置一个间隔时间后再次检查,直到获取到目标元素为止。

需要注意的是,以上方法只是获取目标元素的方式之一,具体的实现方式还需要根据页面结构和需求进行调整。此外,还可以结合使用CSS选择器、jQuery等工具来定位目标元素。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

算法浅谈——怎么才能选到真命天子

当一个比前面k个男生都要好的男生出现的时候,她果断选择接受,从此和他共度一生。 如此一来,这就成了一个数学问题,究竟这个k应该等于多少,才可以使得女生选中所有男生当中最好的那个的概率最大?...所以,我们应该怎么求出这个K? 对于某个固定的K,我们假设最佳配偶出现在了第i的位置。想让他能被挑选中,必须要保证前面i-1个人中的最好的配偶出现在前K个人当中。这个概率不难计算,是: ? 。...这里的e就是数学当中经常出现的欧拉常数,也叫自然底数, ? 约等于37%。那么,算到了这个结果,这个问题也就有了答案。...我们假设这三百个追求者的好坏层次不齐,按照分数排序,可以得到一个0到299的序号。排名越靠后,说明分数越大,男生越优质,然后我们再对这些男生进行乱序。...迭代的次数越多,这个得到的结果越逼近真实值。用大量的实验去测算某个事件发生的概率,这个也是统计学上常用的方法。 通过建模,我们把一个抽象的,无从下手的问题,简化成了一个明确的数学问题。

79810

你不知道的 CSS flex 陷阱

例如,当我们使用 flex-wrap: wrap 属性,发现元素之间出现了意想不到的上下间距,这到底是为什么怎么才能解决这个问题?...效果跟我上面预想的不太一样,第一行和第二行之间,出现了莫名的间距。为了更好的展示当时有问题的代码,把示例代码简化成了这样: 4 仔细看没毛病啊,也没有设置对齐方式什么的,这个间距是哪儿来的?...通过G 字头的搜索引擎,查询关键词flex-wrap 出现间距 ,得到的第一个结果,就是想要的答案。...总结通过这篇文章,想必你对使用 flex-wrap: wrap 元素之间意外间距出现的原因非常熟悉了,下次遇到你就知道可以通过设置 align-content 属性来解决这一问题。

33173
  • 设计师也能轻松掌握的前端小知识

    有人说DW早就淘汰了,造啊,然后还打算用小红本(editPlus)讲,哈哈哈哈…… 希望乃们接受这种循序渐进的过程。...而且大部分时间是不用每个div都附上颜色的,我们今天只是拿带颜色的矩形来模拟一下,所以真正应用时仅存的颜色那一句都会被删掉。 ? 但是提取出来的公共样式又要放到哪里?...否则你就是个单词而已,再读下去就是一些括号,单词,浏览器就懵了,说好的点怎么不按套路出牌。...告诉你看上面那张图片看到了几块吧?以前画素描的时候,老师是不是告诉过你要眯着眼睛看光影关系,因为人容易被一些细节所影响,所以先铺大面,再抠细节,一张合格的素描才能被很好的完成。...好吧,说多了晕,来看看我的分法吧,这种思路可能跟你在设计时考虑怎么放东西有点相仿: ?

    86480

    WordPress评论滑动拉链解锁myQaptcha修改为自动提交的方法

    其实,这个功能的想法是从无主题博客小武那“剽窃”过来的,小武第一个想到滑动自动提交,才能进一步提高用户体验,毕竟少了一步操作嘛!稍微会折腾的朋友,其实分析一下就能自己写代码了,根本用不到分享。...一、下载代码 为了省去如何修改代码洋洋洒洒的几百字,张戈决定直接将修改好的代码打包分享出来: 下载地址 下载解压,将得到的 myqaptcha 文件夹整体上传到 WordPress 主题目录下备用。...总是把希望寄托在他人身上,殊不知他人也是从小白过来的,和你最大的区别也就是比你动的脑筋多一些而已。...完了问题来了,很多朋友各种提问,Jquery 版本是怎么升级或怎么降级的?擦,这问题实在是太那啥了!...你实在搞不清楚怎么升级 Jquery,你就不会查看张戈博客的网页源代码,从里面找到 JQ 的连接,然后下载走么??? 估计 Jquery 是什么都不清楚吧,可是为啥不百度

    1.4K50

    HDOJ 1214 圆桌会议

    Problem Description HDU ACM集训队的队员在暑假集训时经常要讨论自己在做题中遇到的问题.每当面临自己解决不了的问题时,他们就会围坐在一张圆形的桌子旁进行交流,经过大家的讨论一般没有解决不了的问题...这也只有HDU ACM集训队特有的圆桌会议,有一天你也可以进来体会一下哦:),在一天在讨论的时候,Eddy想出了一个极为古怪的想法,如果他们在每一分钟内,一对相邻的两个ACM队员交换一下位子,那么要多少时间才能得到与原始状态相反的座位顺序...(即对于每个队员,原先在他左面的队员后来在他右面,原先在他右面的队员在他左面),这当然难不倒其他的聪明的其他队友们,马上就把这个古怪的问题给解决了,你知道是怎么解决的吗?...Input 对于给定数目N(1<=N<=32767),表示有N个人,求要多少时间才能得到与原始状态相反的座位顺序(reverse)即对于每个人,原先在他左面的人后来在他右面,原先在他右面的人在他左面...,表示需要的时间(以分钟为单位) Sample Input 4 5 6 Sample Output 2 4 6 思路: 把圆桌分成两部分,分别求两部分的逆序数,然后再让分开的圆桌合并

    30020

    【性能】计算首屏白屏时间

    浏览器绘制之前,肯定先解析 head 2、head 结束,解析 body 所以一般我们认为,开始解析 body 就是 页面开始解析的时间 那么到底怎么获取白屏时间?...,或者部分元素没有展示 首屏时间一般在 5秒以内是优秀,10秒以内可接受,10s 以后根本不能忍 现在,我们并没有一个明确的API来直接得到 首屏时间那我们到底要怎么得到首屏时间?...那么就可以使用这种办法 毕竟这种办法是最为简单的,然后就大概给自己一个简单的参考值 2统计首屏最慢图片加载时间 一般来说,首屏内容加载最慢的就是图片资源 所以,可以把 首屏内加载最慢的图片的时间 ,当做首屏时间 那么我们怎么获取首屏内最慢的图片...你又问了 怎么获取首屏内的所有图片?...上面的各种算法是作为一个参考,最好在实际生产中要通过自身业务制定方法,而不是死记硬背一个方法来实现计算 只要掌握原理,然后根据自己的项目才能定制一个适合的方法

    3.8K11

    记一次 Nuxt.js 登录页性能优化

    前言 最近有测试和 local 投诉,我们后台管理系统的登录页面经常要加载很久,常常会出现页面已经显示出来了,但是点击登录毫无反应,直到全部加载才能登录。于是,他们提出让我们去优化。...那么这个大文件是什么文件去 Jenkins 上看一下构建记录,在 build 的时候看到这个文件就是基于第三方包打出来的 vendors 文件。...本地执行了一次 analyze 得到的构建图是这样的,可以看出来 vendors 明显远比其他的包都要大,尤其是 xlsx、iview、moment、lodash 这几个库,几乎占了一大半体积。...真是个好主意,可是问题来了,怎么才能不去加载 vendors ?...于是去看了一下 Nuxt 源码,发现这里还是暴露了配置给我们去定义一个新的 HTML 模板的。当然,到最后也没去尝试这种方法,只是觉得应该可以实现。

    99110

    AI预知死亡:算法预测临终时间,准确率90%

    他对化疗和放疗反应良好,我们通过手术切除了他的食道,在他的体内也没有发现任何恶性肿瘤。 一天下午,在他完成治疗几周谨慎地提出了临终关怀的话题。虽然当时他情况良好,但还是存在很小的复发的可能性。...尽管有所顾虑,还是同意了他的观点,癌症看样子是不会回来了。 但是复发真的出现的时候,像洪水一样吞噬了他的生命。...疾病造成的疼痛非常可怕,只有最高剂量的止痛药物才能镇痛,而S先生在他的生命最后几周始终处于昏迷状态,无法回应在他的床边的家人。 他的母亲起初恳求我对他进行化疗,然后指责没有及时预知S先生的状况。...Avati告诉:“医院的临终关怀小组面临严峻的挑战。我们怎么能找到那些会在三到十二个月内死亡的病人?”这个时间间隔是临终关怀的最佳的区间。...那么该怎样通过这个人的信息,就能使医生准确预知病人会在三到十二个月的时间内死亡?又需要什么样的数据才能教会算法来进行这样的预测? ?

    73450

    如何理解并拥有同理心

    因为为了和对方连接感同身受,比如说必须把自己的情绪、把心里能够体验到你当时出现的这种抑郁、焦虑、郁闷连接在一起。所以这个时候怎么才能形成同理?...假设自己经历过与你同样的苦难或困境,当对方愤怒的时候,要在内心深处去挖掘的愤怒的这种感受,这个时候才能理解到对方现在的这种情绪的状态,这样的话,我们两个才能连接在一起,这样才能形成一个非常好的关系...朋友S失恋了,约她出来见面,刚见面就嚎啕大哭,眼泪止也不住,现在怎么办,告诉她人生还有很多选择,上帝给你关上一扇门还会打开一扇窗么?告诉她别灰心生活要向前看么?...他们更需要跟你分享自己的难过,他们希望宁肯你说也不知道该怎么解决你的问题,但是非常高兴你能跟我分享这些东西,你能听到我的倾诉,而且也非常愿意和你待在一起。...同理心一个核心是激发这种连接,感同身受,让受伤者得到支持、得到理解,变成战友。而同情心则是失去了这种连接,所以说我们有的时候要更多的用自己的同理心,而不是同情心去帮助他人。

    37220

    手摸手打造类码上掘金在线IDE(二)——编辑器篇

    hidden; margin-bottom: 15px; } 将以上代码导入vue 即可初始化编辑器,然而比较坑的是,他还需要导入一些包和做一些配置,来运行编辑器, 不然会出现以下错误...我们要怎么关联怎么解析?...好在,社区的力量是强大的,翻了codesandbox的源码 在他的源码中找到了蛛丝马迹 monaco-textmate 这个库,专门用来解析monaco-editor 他的功能类似于vscode-textmate...现在他已经跟新到了codemirror5 vue-codemirror其实就是在他的基础上做了个vue 的封装 接下来我们就直接使用vue这个版本来封装一个属于我们的编辑器 用到的包相对于monaco-editor...所以咱们的残废版码上掘金,要毅然决然的选择 monaco-editor 毕竟有难度,才够装x,面试官才能能佩服,佩服才能高薪,高薪才能走向人生巅峰!

    2.7K11

    什么是事务?事务的四个特性以及事务的隔离级别

    在他存钱的过程中,银行年费扣了5元,余额只剩95元。突然他又想着这100元要用来请女朋友看电影吃饭,不打算存了。在他撤回存钱操作,余额依然为他存钱之前的100元。所以那5块钱到底扣了谁的?...小明非常郁闷,明明银行卡里还有100元,怎么会余额不足?(他女朋友更郁闷。。。)...这个时候,程序员的聊天群里有人推荐了一本书,小明一看,哎呀,真是本好书,还是限量发行一定更要买到。于是小明赶紧找到购买渠道,进行付款操作。...那怎么解决脏读?Read committed!读提交,能解决脏读问题。 Read committed(可避免脏读的发生。) 读提交,顾名思义,就是一个事务要等另一个事务提交才能读取数据。...当妻子打印程序员的消费记录清单时(妻子事务提交),发现花了1.2万元,似乎出现了幻觉,这就是幻读。 那怎么解决幻读问题?Serializable!

    14.9K113

    【CSS】323- 深度解析 CSS 中的“浮动”

    其实你会发现,absolute和float都不会去覆盖掉在他们之前的正常文档流,这应该和浏览器渲染机制有关系,会从上到下依次渲染内容,渲染成功,就不会因为后续元素浮动而使其被覆盖住 (不考虑使用 fix...那么问题来了,怎样才能消除因为z1的浮动而对z4,z5造成的影响? 首先我们要知道,z1这个浮动造成了哪些影响,影响如下: 第一个影响:影响了z4,z5的布局。...解决外部矛盾 触发 bfc 第一个是触发bfc,为什么,因为触发bfc,高度会包括浮动元素的高度。...怎么触发,可以给父级元素设置overflow:auto;对于其他的触发bfc方式,就不说了,主要说一下原理。代码如下 <!...怎么解决内部矛盾,也就是父元素内部的浮动元素的高度和后面的同级元素的高度有重叠。这个时候,我们先不着急解决内部矛盾,我们来看一下,另一种解决外部矛盾的方式。

    98820

    记一次 Nuxt.js 登录页性能优化(性能提升十倍加)

    Nuxt.js 登录页性能优化 前言 最近有测试和 local 投诉,我们管理系统的登录页面经常加载很久,常常会有页面已经出来了,但是点击登录毫无反应,直到全部加载才能登录。...image 那么这个大文件是什么文件去 Jenkins 上看一下构建记录,在 build 的时候看到这个文件就是基于第三方包打出来的 vendors 文件。 ?...本地执行了一次 analyze 得到的构建图是这样的,可以看出来 vendors 明显远比其他的包都要大,尤其是 xlsx、iview、moment、lodash 这几个库,几乎占了一大半体积。...真是个好主意,可是问题来了,怎么才能不去加载 vendors ?...image 在开启了缓存之后,几乎是秒开,耗时只有短短 100ms,可以说性能得到了几十倍的提升。 ?

    3.2K10

    今天是个神奇的日子。附猪八戒网公司外包私活经历

    不对不对 有什么事比获得你们的青睐,让可以无休止的向你们推送更有趣(厌烦)的公众号(或广告)来的高兴。哈哈 不就是开通个流量主吗?至于那么高兴吗。5000粉丝意味着什么?...那这些是如何做到的?...而在他们的 js 中,会对 data 属性进行解析。想事件的朋友可以试着用一下wow.js这个插件(在 animation.css 基础上开发的动画库)。可以了解一下这一机制。...当 data(edit)有值时,页面提供一个输入框,自己编辑保存,他们会保存这样的数据,给你单独使用。...虽然自己在接私活做,还是不推荐大家去接。道理我就不多赘述了,那句话怎么说的来着(宁可我负天下人,不可天下人付),好像不是这句话。 个人观点,不喜勿喷

    2.1K20

    JS-选项卡制作解释部分

    / 总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div。...这样,给当前被点击li对应的div空类名,去除掉j循环中添加在他身上的hide枷锁,他就得意重见天日了!.../alert(this.index); /得到你当前点击的li的下标 } } } ...//总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div。...这样,给当前被点击li对应的div空类名,去除掉j循环中添加在他身上的hide枷锁,他就得意重见天日了!

    1.9K20

    现代 CSS 解决方案:CSS 原生支持的三角函数

    : 如果我们,设定多个一模一样的小球,同一个运动轨迹,设定不同的 animation-delay,效果会上怎么?...对 box-shadow 足够了解的同学应该知道,box-shadow 是支持多重阴影的,借助这个特性,出现了很多单标签,借助 box-shadow 来绘图的案例。...我们来看一个 DEMO: @function shadowSet($vx, $vy, $color) { $shadow:...3 条波浪线: 单独看其中一个,其实是这样一坨 box-shadow 代码: 好吧,这个方法确实一定程度上弥补了之前 CSS 无法有效绘制波浪线的缺陷,但是,缺点也非常明显,编译的代码量太多了!...熟悉的读者一定对 CSS-doodle 不陌生,袁川老师,也就是 CSS-doodle 库的作者,在他的 Codepen 首页背景板中,使用的就是使用了三角函数实现的一副纯 CSS 画作: Codepen

    45220

    【Vue原理】Render - 源码版 之 静态 Render

    保存 3、静态 render 怎么执行 --- 什么是 静态Render 静态 render 其实跟 render 是一样的,都是执行得到 Vnode 只是静态 render,没有绑定动态数据而已,也就是说不会变化...执行并绑定 Vue 实例为上下文对象 然后得到 Vnode 2 缓存静态render 结果 这一步就是要把上一步得到的 Vnode 缓存起来 那么缓存在哪里?...[公众号] 3 标记 静态 render 执行得到的 Vnode 我们已经执行静态render得到了 Vnode,这一步目的是标记 标记什么 1、添加标志位 isStatic 2、添加 Vnode...前面我们添加的所有静态标志位都是针对 模板生成的 ast 这里我们是给 Vnode 添加 isStatic,这才能完成Vue的目的 Vue 目的就是性能优化,在页面改变时,能尽量少的更新节点 于是在页面变化时...最后 静态 render 我们就讲完了,是不是很简单,在没看源码之前,以为很难 现在看完,发现也简单的,不过也是看了几个月的。。。。

    1.1K30

    JS事件,你真的懂吗(捕获,冒泡)?

    那么问题来了,我们通常看到的事件都是直接触发之后就执行了,那么我们怎么才能看到事件的捕获和冒泡都是怎么进行的,这里给大家准备了一个例子 addEventListener() 例子之前首先给大家简单介绍一下...阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件的冒泡,这个时候就会用到一个方法。...应用场景举例 可能很多朋友感觉,这个东西根本用不到啊,不会出现这种情况,怎么会把父元素和子元素绑定相同的事件? 我们在使用中多数情况下只使用冒泡监听。...我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递,点击删除button,会显示商品详情。显然这不是我们想看到的。...这时我们给button一个阻止事件传递的功能,点击删除按钮,事件就会结束,就不再显示商品详情。 本文为作者原创,手码不易,允许转载,转载请以链接形式说明文章出处。

    2.4K20

    「网站优化」网站优化心态很重要——保持一颗平常心

    网站怎么快速提升关键词排名? 怎么才能提高网站流量? 等等…… 关于以上问题解答的文章数不胜数,每个SEOer都有自己的思想。...如果你的网站排在他搜索结果的第一位,这样就能得到无限的用户。 当然SEO有利有弊。利用好会被搜索引擎喜爱从而得到更多的流量;弊端就是如果出现垃圾内容会得到搜索引擎的惩罚,轻则降权重则网站被K。...二、网站SEO优化得到什么 之所以出现这么多的SEOer,就是因为一个网站的大部分来源都是通过搜索引擎带来的。 而一些其他方式带来的流量是非常烂的而且非常带来的数量也非常有限。...我们改怎么了解SEO是什么?正确的认识SEO不让自己盲目对网站优化。 在上面说的SEO能做什么“画龙点睛”,能最终让来的用户留下因此网站优化需要注重网站内容。

    45771
    领券