dom 相关问题

动态创建的值<select>未设置

// 首先我创建选择元素 让我们列出； 让 sel = document.createElement('select'); sel.style.fontSize = "18px"; sel.style.float = "右"; sel.style.mar...

难道真的没有办法在 IE 中暴露 html 元素的原型吗（<8)?

我编写了一个模式来使用其原型创建和扩展 html 元素。这在非 ie 浏览器中就像一个魅力。示例代码可以在@jsbin1找到 这种模式的优点应该是...

如何创建将容器的类属性更改为三个不同的重复类的 JavaScript 代码

我有一个自动生成php程序的html容器循环，我需要一个javascript代码将容器的class =“”属性更改为三个不同的重复c...

延迟 DOM 操作直到浏览器空闲的惯用/常见/适当方法是什么？

比如说，我想在文档中插入几个，但这些<script>的优先级非常低，因此，我希望这些插入在浏览器空闲时执行。 窗户。</desc> <question vote="0"> <p>比如说，我想在文档中插入几个<pre><code>&lt;script&gt;</code></pre>，但这些<pre><code>&lt;script&gt;</code></pre>的优先级非常低，因此，我希望这些插入在浏览器空闲时执行。</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback" rel="nofollow noreferrer"><pre><code>window.requestIdleCallback</code></pre></a> 似乎是一个足够的方法来做到这一点，但我们不应该对 <pre><code>window.requestIdleCallback</code></pre> 内部的 DOM 进行更新。</p> <p>将操作传递给 <em>just</em> <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" rel="nofollow noreferrer"><pre><code>window.requestAnimationFrame</code></pre></a> 似乎不够，因为它将仅在下一帧上执行，而 <strong> 不会 </strong> 当浏览器空闲时执行。</p> <p>我应该像这样把<pre><code>window.requestAnimationFrame</code></pre>包裹在<pre><code>window.requestIdleCallback</code></pre>里面吗？:</p> <pre><code>window.requestIdleCallback(() =&gt; { window.requestAnimationFrame(() =&gt; { /* Insert scripts */ }); }); </code></pre> <p>有更好/更合适的方法吗？</p> <p>这个问题并不是真正针对插入 <pre><code>&lt;script&gt;</code></pre> 的特定情况，而是针对当浏览器空闲时想要延迟任何 DOM 操作的任何情况（这听起来像是一个非常常见的用例）。</p> </question> <answer tick="false" vote="0"> <p>我自己没有这个需要。看看你的建议，也许队列是一个有效的选择</p> <pre><code>const domManipulationQueue = []; const performDOMManipulations = () =&gt; { if (domManipulationQueue.length &lt;= 0) return; // done const task = domManipulationQueue.shift(); task(); // Execute the task }; // Add tasks to the queue when needed domManipulationQueue.push(() =&gt; { // Insert script 1 }); domManipulationQueue.push(() =&gt; { // Insert script 2 }); window.requestIdleCallback(() =&gt; { performDOMManipulations(); // Execute the queued DOM manipulations }); </code></pre> </answer> </body></html>

使用 vanilla JS 根据日期动态更新 HTML 中的数据

我试图在 6 月 1 日在网页上更新年份（我在这一天需要它，因为它在我生日时更新年份）。问题是：有没有更好的方法来用 Van 来做......

AlpineJS + Laravel Blade - x-if 条件仍然显示在 #document-fragment 下的开发工具中

我在blade中应用这个条件，它似乎按预期工作，但是，在使用浏览器开发工具检查页面后，我仍然可以在不满足的条件下检查代码....

从元素获取.value时出现未定义

这里是奖金寿命为 1 的 HTML： 球员健康1 这里是奖金寿命为 1 的 HTML： <h3>PLAYER HEALTH<span value="1" id="bonus-life" >1</span></h3> <progress class="playerHealth health" max="100" value="100">100%</progress> 以下是获取跨度和进度元素值的 JavaScript： const playerHealthBar = document.querySelector(".playerHealth"); const bonusLifeEl = document.querySelector("#bonus-life"); console.log("In index.js bonusLifeEl.innerHTML: " + bonusLifeEl.innerHTML); console.log( "In index.js - bonusLifeEl value & typeof: " + bonusLifeEl.value + " " + typeof bonusLifeEl.value ); console.log( "In index.js - player health value & typeof: " + playerHealthBar.value + " " + typeof playerHealthBar.value ); 我能够获得正确的playerHealthBar值和typeof，但是当我尝试使用bonus-life时，我得到的所有内容都是未定义的，除非我使用innerHTML，然后我在内部html中获得“值”。 控制台日志输出： In index.js bonusLifeEl.innerHTML: 1 index.js:8 In index.js - bonusLifeEl value & typeof: undefined undefined index.js:14 In index.js - player health value & typeof: 100 number 仅 input、select 和某些其他特定元素具有 value 属性，而不是 span 元素。即使您在 value 上放置了 span 属性，也不会通过 value 属性反映出来（它也是 span 元素的无效属性）。要在该元素上放置任意值（除了其文本内容），您可以使用 data-* 属性 和 getAttribute 或 dataset 来检索它。 const value = bonusLifeEl.dataset.value; // Side note: I'd use `getElementById` rather than `querySelector` here const bonusLifeEl = document.querySelector("#bonus-life"); const value = bonusLifeEl.dataset.value; console.log(value,); <h3>PLAYER HEALTH<span data-value="1" id="bonus-life" >1</span></h3>

如何使用 document.queryselector() 编辑元素的 HTML 属性？

我正在学习 JavaScript 课程，我想知道为什么这段代码不起作用： document.querySelector('.message').style.width ='30rem'; document.querySelector('.message').style.

加载 iframe 而不将其注入到 DOM 中

我基本上有与这个问题相反的问题：How to Prevent iframe fromloading while displayed into the DOM? 我希望加载一个未注入 DOM 的 IFRAME 元素。 我是

JS - 将数组打印到 DOM

将过滤后的数组打印到 DOM 的好方法是什么？我正在尝试为 onclick 创建一个函数 (printJazzAlbums())，将过滤后的数组打印到 DOM。如果我只是用

使用 html-react-parser 解析 HTML5 <video> 元素

我有一些从 CMS 返回的 HTML 内容，我希望在 NextJS 应用程序中显示这些内容。我使用 html-react-parser 包而不是angerlySetHtml 来解析HTML 内容...

我想使用JavaScript数组打开动态页面

我正在使用 JavaScript 使用数组创建一个 html 动态页面。现在我想添加一个功能，一旦我单击博客文章，它就会带我到一个新的动态页面，其中应包含

即使通过 classList.remove 删除最后一个类，“class”属性仍保留在 HTML 标记中，有什么原因吗？

如果我执行以下代码片段， s = document.createElement('span'); 控制台.log(s) s.classList.add('foo'); 控制台.log(s) s.classList.remove('foo'); 控制台.log(s) 我得到这个输出： ...

在 <a> 上设置 href、下载和 onclick 属性不起作用

我尝试插入 gpx/xml blob 下载的链接，并且还想设置文件名的下载属性，以及单击链接时触发函数的 onclick 属性，然后...

如何告诉 Angular 从 DOM 获取输入值？

我工作的 SSO 填写我的登录表单的方式与我需要修复的 Angular 表单不兼容。 问题是用户看到 SSO 填写的表单： Angular 的形式看不到任何价值（

HTML 标签未使用 TinyMCE 文本编辑器在 React js 中以正确的方式呈现

我在 React js 中使用 TinyMCE 文本编辑器。使用富文本编辑器的目的是将数据与 html 标签一起保存。 我面临的问题是我用 'p' ta 保存在 firebase 中的数据...

JS 库项目的类型错误和 DOM 遍历问题

该项目是使用 vanilla JS 和 HTML 创建一个库。我已经基本上完成了整个项目，除了两个功能无法工作。 那些是删除书籍和更改阅读状态，h...

等待 iframe 在 JavaScript 中加载

我正在 JavaScript 中打开一个 iframe： righttop.location = "timesheet_notes.php"; 然后想向它传递信息： righttop.document.notesform.ID_client.value = 客户端； 但显然，...

通用事件处理程序无法识别 PointerEvent 扩展 Event

我在网站的前端使用 Typescript。 假设我正在为各种用户交互设置一些事件处理程序： const onClick = (事件: PointerEvent) => { console.log(`您点击了

DOM 操作 - 单击文本时显示不同的元素

正如标题所说，我正在开发一个小项目，只是为了测试一些 DOM 操作。 我正在开发 Todo-List，用户可以创建一些名为（如工作、健身房、财务等）的列表，然后...