dom 相关问题

JavaScript 在页面上运行，但最终删除了自己的 DOM 节点。我如何测试它做了什么？

一个场景， 我在 DOM 中有一个脚本元素 该脚本在页面上执行了“操作”，然后自行删除 (</desc> <question vote="3"> <p>一个场景，</p> <p>我在 DOM 中有一个脚本元素</p> <p>这个脚本在页面上做了“事情”，然后它<strong>删除了自己</strong></p> <pre><code>&lt;script type=&#34;text/javascript&#34; id=&#34;the-javascript&#34;&gt; (function (d){ var ..., script = d.getElementById(&#39;the-javascript&#39;), ...; // lotsa code !! script.parentNode.removeChild(script); }(document)); &lt;/script&gt; </code></pre> <p>这是一个匿名 IIFE（立即调用函数执行）<br/> 我怎么知道JavaScript在页面上被执行了。陷入了我必须找到的场景。</p> <p>除了<pre><code>view-source</code></pre>还有什么吗？</p> <p>我正在运行一个测试用例，需要查找 JavaScript 是否在页面上运行<br/> 我知道开发者工具的使用。呃！ <pre><code>code</code></pre> 位于 <pre><code>script</code></pre> 标签中，代码删除了 <pre><code>script</code></pre> 标签<br/> 该代码是匿名的，因此我无法在控制台或任何地方检查全局变量<br/> 我必须找出 JavaScript 是否创建了任何 DOM 元素，而不使用 <pre><code>view-source</code></pre></p> </question> <answer tick="true" vote="2"> <blockquote> <p><em>“我的一行问题是 - “如果 JavaScript 代码自行删除，我如何找到该代码已在页面上执行”。”</em></p> </blockquote> <p>如果脚本从 DOM 中删除了自身，则<em>无法</em>找到它...因为它不存在...因为它已被删除。</p> <hr/> <p>为了解决更新的问题和评论，除了对页面发出 XHR 请求并分析收到的内容之外，实际上没有任何方法可以安全地检测脚本是否运行然后自行删除。</p> <p>你可以搜索代码的副作用，但可能性实在是太大了，有可能是脚本没有可见的副作用。</p> </answer> <answer tick="false" vote="2"> <p>Chrome 或 IE 等浏览器具有开发人员工具，可以告诉您（几乎）有关页面的所有信息。只需激活工具并观察页面加载即可。</p> <p>如果您想知道脚本的作用，您也可以导航到其地址：<pre><code>http://theirSite/main.js</code></pre></p> <p>注意：脚本并没有删除自身，它只是删除了加载它的节点。</p> </answer> </body></html>

获取 iframe 的当前位置/url 并分配给变量

我在自己的服务器上托管了一些内容，我动态地向用户显示这些内容。然而，内容有几层深，我需要 iframe 的 url/位置，以便我可以将其分配给...

如何使用 Excel VBA 从浏览器下载 pdf 文件

我正在使用下面的代码片段从网站下载 PDF 文件。 选项显式 私有声明函数 URLDownloadToFile Lib“urlmon”别名“URLDownloadToFileA”_ （作者：Val pCaller A...

Datatable-如何每次从渲染的 html 元素中按不同的值对一列进行自定义排序

我们假设数据表的单元格呈现如下： 列定义：[ { 目标：0， 类型：'百分比'， 渲染：函数（数据，...

DOM 是一个 API，还是 API 是 DOM 的一部分？

我读到 API 是用来操作 DOM 的，然后我在其他地方读到 DOM 是 API 的一个示例，那么 dom 和 api 是如何组合在一起的呢？

无法从存储在sessionStorage中的InnerHTML字符串段中提取ID

我的 html 页面脚本部分中的 teo 行是这些...... var mySession = sessionStorage.getItem("catProfile"); var myValue = mySession.getElementByID("catAge");

如何用Phantomjs向下滚动加载动态内容

我正在尝试从当用户向下滚动到底部（无限滚动）时动态生成内容的页面中抓取链接。我尝试过用 Phantomjs 做不同的事情，但不行...

有没有办法确定<select>下拉菜单是否打开？

我正在寻找一种方法来确定 元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需弄清楚它在给定时间是打开还是关闭即可。 我可以听 我正在寻找一种方法来确定 <select> 元素的菜单是否/何时打开。我不需要强制它打开或关闭，只需弄清楚它在给定时间是打开还是关闭即可。 我可以监听焦点/模糊、鼠标向上/鼠标向下等事件，但我认为我无法可靠地从这些事件中找出菜单的状态。例如，mousedown 后跟 mouseup 可能意味着用户单击并拖动到某个选择并释放（在这种情况下，菜单现在关闭）或单击并释放以打开菜单（在这种情况下，菜单打开）。下拉菜单的具体行为似乎也可能取决于浏览器。 我知道如果我滚动自己的下拉菜单就可以做到这一点，但我更喜欢使用 <select>。 有没有可靠的方法来确定下拉菜单是否打开？或者这是 Javascript 无法知道的东西？ 结论：似乎没有任何有保证的方法来确定选择菜单是否打开，无论是通过询问对象还是通过侦听它触发的事件。 对于我自己的使用，我只是使用 onfocus 和 onblur 来跟踪选择是否具有焦点。我假设没有焦点就无法打开菜单，这在我测试过的所有浏览器中似乎都是如此。它实际上并没有告诉我菜单何时打开，但它告诉我何时不能打开，这对于我的目的来说已经足够了。 您可以在 select 的 mouseenter 子元素中使用 option 事件，因为只有在选择菜单打开时才能进入其中，或者也可以在 click 元素上使用 select 事件，通常在打开它时抛出. 要在精确的时刻测试它是否打开我认为是不可能的。 在 Internet Explorer 中选择元素是出了名的棘手。我认为没有任何方法可以可靠地确定一个是打开还是关闭。 我可以查看选择是否打开，然后当用户选择新选项或完全模糊选择时关闭。但是，如果您单击相同的选项，或者仅单击一次选择（关闭它但不模糊它），它仍然显示“向下”。致力于制定更完整的解决方案。所以，期待这个答案有编辑...... <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> var selected $( document ).ready( function() { $( '#test' ) .mousedown( function(){ console.log( 'down' ); selected = $( this ).val() } ) .blur( function(){ console.log( 'out' ) } ) .change( function(){ console.log( 'out' ) } ) .mouseleave( function(){ console.log( 'out' ) } ) .mouseup( function(){ if( $( this ).val() == selected ) console.log( 'out' ) } ) } // function ) // ready </script> <select id="test"> <option>1</option> <option>2</option> </select> 编辑：添加鼠标悬停 Edit2：添加了 mouseup - 现在可以使用！ 这是您问题的完整答案。是的，它有点长，但它在所有场景中都具有魅力。 当用户在我的实验中快速选择一个选项时，上面使用 onClick 的答案不起作用，所以我为什么不给出完整的答案 function App() { const [isOpen, setIsOpen] = useState(false); const componentRef = useRef(null); const selectClickHandle = (event) => { if (componentRef.current) { const rect = componentRef.current.getBoundingClientRect(); const { clientX, clientY } = event; const isInComponent = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom; console.log(isInComponent); if (isInComponent == false) { setIsOpen(false); } } } const selectBlurHandle = () => { console.log("blur"); setIsOpen(false); } const selectkeyHandle = (event) => { console.log("key"); if (event.key === 'Enter' || event.keyCode === 13 || event.key === ' ' || event.keyCode === 32) { setIsOpen(true); } }; const selectMousePress = (event) => { console.log("mouse"); setIsOpen(!isOpen); } return ( <div className="App"> <h1 style={{ paddingTop: "200px" }}>currently closed {isOpen ? "true" : "false"}</h1> <div id="outer-container" > <select id="fruit" name="fruit" ref={componentRef} onMouseDown={selectMousePress} onClick={selectClickHandle} onBlur={selectBlurHandle} onKeyDown={selectkeyHandle} > <option value="apple" >Apple</option> <option value="banana">Banana</option> <option value="grape">Grape</option> </select> {/* <div className='hidden-copy' > {isOpen && options.map((item, idx) => ( <p key={idx} style={{ fontSize: "0.95rem" }}>copy</p> ))} </div> </div> */} </div> ); } export default App; 我还在媒体上写了一篇关于它的文章，如果需要更多说明，请访问。 https://medium.com/@ijlal.tanveer294/how-to-know-if-a-select-dropdown-is-open-555a304e7dda 更完整的解决方案是： <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript"> var selected,selected2 $( document ).ready( function() { $( 'select[id$="test"]' ) .mousedown( function(){ console.log( 'predown' ); if( $( this ).val() != selected ) { console.log( 'down' ); selected = $( this ).val(); selected2=null;} else selected=null;} ) .blur( function(){ if (selected2==selected) { console.log( 'outb' ); selected=null; selected2=null;} } ) .mouseup( function(){ console.log( 'preoutu' ); if( $( this ).val() != selected || $( this ).val() == selected2 ) { console.log( 'outu' ); selected=null; selected2=null; } else selected2=$( this ).val(); } ) } // function ) // ready </script> <select id="1test"> <option>1</option> <option>2</option> </select> <select id="2test"> <option>1</option> <option>2</option> </select>

警告：活动的 WebGL 上下文过多。最旧的上下文将丢失（Mapbox+React+Marzipano）

我们在我们的一个项目中将 marzipano 与 Mapbox 一起使用，我们用来在地图上显示点，单击任何点我们将在 marzipano 的帮助下显示 360 度图像。我们需要单击

需要在动态表中控制表单输入

我正在使用 PHP、Jquery 和 BootStrap。 我正在生成一个表单，以便用户可以提供其可用性以供上游流程考虑。 用户单击一个按钮，就会在网络中添加一个新行...

如何在next.js中使用DOMParser？

我想操作一个html字符串，在vanillaJS中我会这样做： 让 HTMLString = '你好 ...</desc> <question vote="8"> <p>我想操作一个 html 字符串，在 vanillaJS 中我会这样做：</p> <pre><code> let HTMLString = &#39;&lt;p&gt;hello&lt;/p&gt; &lt;style&gt; p{ color:black } &lt;p&gt;world&lt;/p&gt; &#39; const parser = new DOMParser(); const doc = parser.parseFromString(HTMLString, &#34;text/html&#34;); doc.querySelectorAll(&#39;style&#39;).forEach(item =&gt; item.remove()) </code></pre> <p>这也适用于react，但我相信自从下一次编译服务器端后它只会抛出<pre><code>DOMParser is not defined</code></pre>，我尝试过像<pre><code>html-react-parser</code></pre>这样的包，它们只是将html解析为react元素并提供非常有限的功能，之后，我的最后一个度假村为此使用正则表达式，但我认为这不是一个好主意。</p> <p>任何帮助都会很好，谢谢</p> </question> <answer tick="false" vote="8"> <p>您可以尝试我在 next.js 项目中出于类似原因使用的 node-html-parser 组件： <a href="https://www.npmjs.com/package/node-html-parser" rel="noreferrer">https://www.npmjs.com/package/node-html-parser</a></p> <p>这个想法是在 getStaticProps() 函数的服务器端使用它，如下所示：</p> <pre><code>import { parse } from &#39;node-html-parser&#39;; const root = parse(&#39;&lt;ul id=&#34;list&#34;&gt;&lt;li&gt;Hello World&lt;/li&gt;&lt;/ul&gt;&#39;); console.log(root.querySelector(&#39;#list&#39;)); </code></pre> <p>正如你所看到的，你可以使用标准 ES6 查询选择器遍历这个虚拟生成的 dom，而且还有更多选项，所以我发现这个非常强大。</p> </answer> <answer tick="false" vote="0"> <p><strong>Cheerio</strong> 似乎是另一个流行的选择：<a href="https://github.com/cheeriojs/cheerio" rel="nofollow noreferrer">https://github.com/cheeriojs/cheerio</a></p> <p>如其自述文件所示：</p> <pre><code>import * as cheerio from &#39;cheerio&#39;; const $ = cheerio.load(&#39;&lt;h2 class=&#34;title&#34;&gt;Hello world&lt;/h2&gt;&#39;); $(&#39;h2.title&#39;).text(&#39;Hello there!&#39;); $(&#39;h2&#39;).addClass(&#39;welcome&#39;); $.html(); //=&gt; &lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;h2 class=&#34;title welcome&#34;&gt;Hello there!&lt;/h2&gt;&lt;/body&gt;&lt;/html&gt; </code></pre> </answer> </body></html>

Google 自定义搜索元素出现在包含下拉菜单的 div 元素上

我正在尝试将 Google 自定义搜索元素添加到网页。 这是我正在使用的代码： 我正在尝试将 Google 自定义搜索元素添加到网页。 这是我正在使用的代码： <div class="gcse-searchbox-only" data-resultsUrl="https://example.com/search-results/" data-newWindow="false" data-queryParameterName="q" id="search"></div> 小部件本身运行良好，但小部件放置在包含其他动态显示的 div 元素的 div 元素下方，以呈现下拉菜单。 下拉菜单出现在小部件后面。 如何让下拉菜单出现在小部件前面？ 到目前为止，我已经尝试通过更改下拉菜单的 z 索引和包含小部件的 div 元素的 z 索引来解决此问题，但没有任何效果。 Z-index 仅适用于具有绝对、相对、固定或粘性位置值的项目。如果您有任何定位现实或继承的东西，则 z 索引将不起作用。您可以通过以下链接阅读更多内容： [W3C 学校 Z 索引属性][1] [1]: https://www.w3schools.com/cssref/pr_pos_z-index.php#:~:text=Note%3A%20z%2Dindex%20only%20works,of%20display%3Aflex%20elements) .

<a ping>的特征检测（超链接审核）

a 元素的 ping 属性用于超链接审核 - 基本上，当跟踪链接时，属性中列出的每个 url 都会使用 HTTP POST 进行“ping”。 根据我可以使用它吗...

调用 onclick() 进行 GET 下载时在 HTMLAnchorElement 上添加标头

我需要在浏览器中下载非常大的文件，因此我需要浏览器支持才能下载该文件。它应该看起来像这样： 我的问题是我必须使用 JWT 标头进行身份验证。我的

在TextField中写入，之前的第一个节点没有从DOM中移除

我正在尝试使用初始文本“xyz”将“abc”覆盖到 MathQuill 的 TextField 中 var MQ = MathQuill.getInterface(2); var mySpan = document.getElementById('A'); var textField = MQ.TextField(mySp...

无法同时滚动两个元素

在reactjs中，我有一个在给定useRef时滚动元素的函数： ref.current?.scrollIntoView({ 行为：“平稳”， 块：“最近的”， 内联：“岑...

使 DOM 元素有效地只读

我正在编写一个 .NET 表单控件来使用 MSHTML 编辑 HTML。 我正在创建一些自定义元素，并希望使它们有效地只读。 我想我可以通过专注于整个事情来解决这个问题

当里面有很多文本时，在文本区域中输入速度非常慢

我在 Chrome 中尝试过这个。有一个文本区域，里面有很多文本，最后编辑部分会变得非常慢。光标和键盘输入响应变得缓慢。 但如果我做到了...

清除element.classList

element.classList 是 DOMTokenList 类型。 有没有办法清除这个列表？

努力使用 JS 创建 HTML 元素并用新内容替换它（document.createElement）

我目前正在开发一个小型“项目”（如果你可以这样称呼它的话）。 这是非常简单的两个按钮，它们影响单独工作的元素，但现在我决定使用对象和 DOM 来...