草庐IT

improving-the-dom

全部标签

javascript - 调用同一个函数的两个 dom 事件如果同时发生,则应该只调用该函数一次

我有一个输入和一个按钮。当我从输入模糊并且输入发生变化时,应该调用price()函数。此外,当我单击按钮时,应该调用price()函数。问题在于,当用户修改输入值并单击按钮时,price()函数被调用了两次。我不希望发生这种情况。我尝试了老式的方法,在输入时将变量“inPriceFunction”设置为true,并在输入前检查它是否未设置。这没有用,因为两个事件(模糊和点击)是在同一时间执行的,if和变量集没有时间发生。我怎样才能避免这种情况?我尝试过的:testcalled=0;functionprice(){if(called==true){return;}else{called=

javascript - 如何遍历 HTML DOM?以及如何获取元素的事件、样式和属性(附示例)

编辑2(解决方案)Javascript对于“可能的”javascript方式,请参阅下面的@sabof回答:https://stackoverflow.com/a/22172009/3309243…………JQUERY事件:我很快制作了一个示例函数getEvents(),但它似乎有效:)属性:我在互联网上的某个地方找到了这个,通过使用.attr()返回所有属性另外,我刚刚发现了有关在浏览器中进行调试的知识,因此现在知道如何查看对象。可能有人想知道如何:打开您的控制台(在FireFox中至少为f12)并在控制台命令行中键入例如$("body")(一直在底部),单击返回的对象并查看控制台:P

javascript - OO Javascript - 我应该让一个类将自身添加到 DOM 中还是让它返回一个元素然后添加到 DOM 中?

我正在练习OOJavascript,制作一种用于查看Manga(漫画)的网络应用程序现在我有几个类:搜索结果漫画(根据搜索结果中的数据生成)章节(包含在漫画中)页面(包含在章节中)图片(包含在页面中)我通过生成元素的html将搜索结果添加到DOM,然后使用jQuery附加它。这就是我的问题所在:我应该生成html(或jQueryDOM元素)并从类中的函数返回它,然后将此元素添加到类之外,还是为类提供对容器的引用会更明智,它应该将元素放入其中并让它通过追加将元素放入该容器中?所以这个?function(data,result,response){var$resultContainer=$

javascript - 使用适当的 GC 删除 DOM 节点(无泄漏)

问题添加节点,同时从DOM中删除旧节点,不会从内存中丢弃旧节点。(至少不是全部,没有明显的原因)。如何看待这种情况(你已经知道了,但无论如何..)右键单击输出区域并使用Chrome开发人员工具进行检查。单击时间轴选项卡,然后单击左上角的圆圈(点)开始录制。现在点击body元素,它将开始每300ms添加和删除项目(删除的节点应该被垃圾收集)。停止记录,将数据采样区域扩展到最大,您将在屏幕的下半部分看到绿色的节点。预期的图形将上下波动(其中向下表示节点已被GC正确丢弃)。测试页面这2个测试页面非常原始。当然,在现实生活中,开发人员使用生成大量文本的模板,这些文本应转换为DOM并注入(inj

javascript - react : componentDidMount + setState not re-rendering the component

我对使用componentDidMount和setState来使用react并努力更新自定义组件相当陌生,这似乎是推荐的做法。下面是一个示例(包括用于获取数据的axiosAPI调用):importReactfrom'react';import{MyComponent}from'my_component';importaxiosfrom'axios';exportdefaultclassExampleextendsReact.Component{constructor(props){super(props);this.state={data:[]};}GetData(){returnax

javascript - 浏览器 "drag and drop"事件 : Can anyone fill in the blanks?

直到现在我才真正需要使用任何拖动功能,所以让我向您介绍一下我到目前为止的发现:拖动事件是在用户拖动对象时发生的事件。这是“正确的”操作系统拖动,例如:隐藏一些文本并拖动它,或者甚至从浏览器外部拖入某些内容。据我所知,拖动时不会触发其他浏览器事件。(例如,onmouseover被忽略)。唯一有效的事件是拖动事件。在所有现代浏览器中,onDragEnter和onDragOver似乎都可以工作...但firefox缺少“onDragLeave”。对于拖放,FF使用“onDragDrop”,而IE和其他使用“onDrop”,而Safari似乎不支持它。事件似乎只适用于“可放置”元素,例如文本区

javascript - 如何在加载头部之后但在 DOM 之前立即运行脚本?

制作一个GoogleChrome扩展,需要在加载head后运行脚本,因为head中有脚本,我需要它们运行。在加载DOM之前,因为其中有一个我需要击败的内联脚本。我该怎么做?如何检测头部加载时间? 最佳答案 当您注入(inject)您的内容脚本时,您可以在list中将“run_at”参数声明为“document_start”,这些文件在来自css的任何文件之后注入(inject),但在构建任何其他DOM或运行任何其他脚本之前.可以找到更多信息here.{"name":"Myextension",..."content_scripts"

javascript - 从 DOM 中有效地删除文本节点

在不涉及太多细节的情况下,我正在使用javascript清理表格内的空白。我需要删除大量的文本节点。当涉及到IE9时,这似乎是我的脚本中的瓶颈。以下所有方法都可以完成这项工作,但它们会导致速度大幅下降。domNode.removeNode(true);domNode.nodeValue="";domNode.parentNode.removeChild(domNode);有没有办法进行批量删除或将它们隐藏在dom等中。只是更快一些。我也在文本节点上试过这个:domNode.innerHTML='';虽然它执行得很快,但文本节点似乎没有被它定相。此外,我需要保留事件绑定(bind),因此

javascript - 如何在 Chrome Developer 中查看 DOM 对象的属性?

我想在GoogleChromeWebDeveloperTools中检查DOM对象的属性,因此我调用了console.debug();并将DOM元素作为参数:HTML:Yourbrowserdoesnotsupporttheaudiotag.Javascript:console.debug(document.getElementsByTagName('source')[0]);​JSFiddle但是,Chrome控制台仅在调用console.debug();时显示元素的HTML,而不会显示DOM节点对象的任何javascript属性。如何在ChromeDeveloper中查看DOM对象的

javascript - DOM 渲染是否保证在单个(同步)函数执行期间阻塞?

DOM阻塞是许多不熟悉JavaScript严格的单线程同步执行模型的人发现的困难方法,它通常只是我们想以某种方式解决的问题(使用超时、网络worker等)。一切都很好。但是,我想知道阻止实际的用户可见渲染是否是您实际上可以依赖的东西。我有90%的把握事实上在大多数浏览器中都是这种情况,但我希望这不仅仅是一个愉快一致的意外。我似乎无法从DOM规范甚至MDM等vendor文档中找到任何明确的声明。让我有点担心的是,虽然从页面上看确实看不到DOM的变化,但内部DOM几何结构(包括CSS转换和过滤器)确实在同步执行期间实际上更新了。例如:console.log(element.getBound