dom 相关问题

为什么 Facebook Business 登录 Instagram 在连接到 Instagram 时卡住了？

我正在尝试为 Instagram 实现 facebook 业务登录。下面是我构建的 url 和调用该 URL 的 href 标记。但是，流程在连接到 Instagram 时卡住并出现错误 辉...

以编程方式在更改事件处理程序中设置日期输入的值会触发 Firefox 中的更改事件

每当有人选择休息日的日期（例如星期六或星期日，它可能是一系列关闭日中的任何一天）时，我想呈现错误。 我有 HTML： 每当有人选择休息日的日期（例如星期六或星期日，它可能是一系列关闭日中的任何一天）时，我想呈现错误。 我有 HTML： <div> <input type="date" id="date-input"> </div> <br> <div id="error-container"> </div> CSS： .d-error{ background: orangered; color: white; padding: 4px 8px; } 这是 JavaScript： 'use strict'; const dateInput = document.getElementById('date-input'); const errorContainer = document.getElementById('error-container'); const closingDays = [0, 6]; const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday']; const displayError = function ({ parentEl, message, position = 'prepend', durationSec = 0 }) { const errorElement = document.createElement('p'); errorElement.classList.add('d-error'); errorElement.textContent = message; parentEl[position](errorElement); if (durationSec) { setTimeout(() => { errorElement.remove(); }, durationSec * 1000); } }; const handleDateChange = function (event) { const selectedDay = new Date(event.currentTarget.value).getDay(); if (closingDays.includes(selectedDay)) { displayError({ parentEl: errorContainer, message: `We are closed on ${weekDays[selectedDay]}. Please select another day.`, durationSec: 5 }); event.currentTarget.value = ''; } }; dateInput.addEventListener('change', handleDateChange); 这可行，但错误会呈现两次。一次是由于用户更改，一次是由于以编程方式更改输入值 event.currentTarget.value = '';。那么，如何暂时删除 change 事件监听器并重新附加到它呢？或者有其他方法可以解决这个问题吗？ 我尝试过： const handleDateChange = function(event) { ... event.currentTarget.removeEventListener('change', handleDateChange); event.currentTarget.value = ''; event.currentTarget.addEventListener('change', handleDateChange); ... } 但这并没有解决问题。 更新： 首先，正如@Sebastian 所指出的，以编程方式设置输入的值不会触发change事件。所以一定还有其他原因导致事件触发两次。 我非常抱歉没有在 Firefox 以外的其他浏览器中进行测试。这个问题似乎只出现在 Firefox 中，因为在基于 chromium 的浏览器中，一切都按预期工作（尽管在 Firefox android 中工作）。所以，我猜测这是 Firefox 中的某种错误，但我个人无法确认。请尝试在不同的浏览器中运行代码片段。 'use strict'; const dateInput = document.getElementById('date-input'); const errorContainer = document.getElementById('error-container'); const closingDays = [0, 6]; const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const displayError = function({ parentEl, message, position = 'prepend', durationSec = 0 }) { const errorElement = document.createElement('p'); errorElement.classList.add('d-error'); errorElement.textContent = message; parentEl[position](errorElement); if (durationSec) { setTimeout(() => { errorElement.remove(); }, durationSec * 1000); } }; const handleDateChange = function(event) { const selectedDay = new Date(event.currentTarget.value).getDay(); if (closingDays.includes(selectedDay)) { displayError({ parentEl: errorContainer, message: `We are closed on ${weekDays[selectedDay]}. Please select another day.`, durationSec: 5 }); event.currentTarget.value = ''; } }; dateInput.addEventListener('change', handleDateChange); .d-error { background: orangered; color: white; padding: 4px 8px; } <div> <input type="date" id="date-input"> </div> <br> <div id="error-container"> </div> 这里是一个较短版本的代码片段，用于在 Firefox (121) 中重现该错误。 OP 是正确的，第二个事件实际上是由以编程方式设置事件处理程序内的输入字段的值引起的（根据第一个注释在规范中，情况不应该是这样）。但是，第二个事件中打印到控制台的值与第一个事件的值相同。此外，在事件处理程序之外设置值根本不会触发事件（应该如此）。与此同时，OP here on bugzilla 报告了这种不一致的行为（它可能与 this other 有关）。 function onChange(event) { console.log('changed to ' + dateInput.value) dateInput.value = ''; // somehow triggers a second event in Firefox }; dateInput.addEventListener('change', onChange); dateInput.value = '2024-02-07'; // does not trigger the event! <div> <input type="date" id="dateInput"> </div> 其他浏览器似乎没问题。特别是 Chromium 121 的行为符合预期（只有一个事件）。 作为 Firefox 的解决方法，OP 的尝试离成功并不遥远。事实证明，以下方法适用于不监听第二个事件（尽管请参阅下面更好的解决方案） dateInput.removeEventListener('change', onChange); dateInput.value = ''; // somehow triggers a second event setTimeout(() => dateInput.addEventListener('change', onChange), 0); Firefox 似乎没有立即调度额外的事件（因此不在同一调用堆栈内）。因此，在重新连接侦听器之前添加超时会有所帮助。如果您使用布尔标志，代码可能会更加透明和高性能，正如 @isherwood 所建议的。 正如 @AayushKarna 的评论中所指出的，在 Firefox 中仍然缺少在事件处理程序中重置输入字段的可见反馈。因此，还必须设置额外的超时时间。但随后它就不再触发 Firefox 中的事件，因此删除事件侦听器就变得多余了。我仍然在答案中保留上述建议，因为问题中明确要求了这一点。尽管如此，现在更简单的解决方法片段是： function onChange(event) { console.log('changed to ' + dateInput.value) setTimeout(() => dateInput.value = '', 0); }; dateInput.addEventListener('change', onChange); <div> <input type="date" id="dateInput"> </div> 即使在 Firefox 中，更改的值也仅打印一次，并且输入字段也明显重置。 随时添加更多信息。这是社区的答案...

HTML DOM API 中<xxxx>标签元素的 HTML<b>元素类型是什么？

我正在尝试找出 标记元素的元素类型，以便我可以在我正在迭代的子节点列表中测试它们。 从这个文档中我可以看到 t 的集合...

使用 JavaScript (Android) 隐藏 WebView 中的元素

我正在尝试从加载到 WebView 的网站中删除横幅和页脚。 到目前为止我的代码运行没有任何问题 但现在的挑战是当我浏览网站时......

如何使用 JavaScript 切换现有类

我有一个导航栏，锚标记内有 Bootstrap 图标 这是我的代码： 我有一个导航栏，锚标记内有 Bootstrap 图标 这是我的代码： <li class="nav-item"> <a href="#" class="nav-link"> <i class="bi bi-house"></i> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="bi bi-heart"></i> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="bi bi-envelope"></i> </a> </li> 我想在点击时添加-fill，并在点击另一个导航时将其删除。我已经尝试过classList.toggle，但似乎只是添加新类而不附加它。 <li class="nav-item"> <a href="#" class="nav-link"> <i class="bi bi-house-fill"></i> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="bi bi-heart"></i> </a> </li> <li class="nav-item"> <a href="#" class="nav-link"> <i class="bi bi-envelope"></i> </a> </li> 当前方法的问题是 classList.toggle 仅在类不存在时添加该类，如果存在则将其删除。这意味着它只会在原始类和附加“-fill”的类之间切换，不允许多个元素同时具有“-fill”类。 以下是实现所需行为的方法： 1。删除现有的“-fill”类： 在将“-fill”类添加到单击的元素之前，您需要将其从可能拥有该类的任何其他元素中删除。这确保一次只有一个元素处于活动状态。 // Select all anchor elements within the navigation const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { // Remove any existing "-fill" class link.classList.remove('bi-house-fill', 'bi-heart-fill', 'bi-envelope-fill'); }); 2。将“-fill”类添加到单击的元素： 现在，当单击锚元素时，您可以使用 classList.toggle 添加特定于单击的图标的“-fill”类。 navLinks.forEach(link => { link.addEventListener('click', () => { const icon = link.querySelector('i'); const iconClass = icon.classList[1]; // Get the second class (e.g., "bi-house") icon.classList.toggle(`${iconClass}-fill`); }); }); 说明： 我们使用 querySelectorAll 选择所有具有导航链接类的锚元素。 我们使用 forEach 循环遍历每个链接。 在循环内，我们使用 classList.remove 从链接内的图标中删除任何现有的“-fill”类。这确保只有一个元素处于活动状态。 我们为 click 事件的每个链接添加一个事件侦听器。 单击链接时，我们使用 querySelector 获取链接内的图标元素。 然后我们使用 classList[1] 访问图标的第二类名称。这假设图标类是元素上的第二类。 最后，我们使用 classList.toggle 和模板文字来动态构造要切换的类名。这可确保根据单击的图标添加或删除适当的“-fill”类。 此方法确保只有单击的图标具有“-fill”类，为活动导航项提供所需的视觉反馈。

为什么当第二个“else if”条件满足时，第一个“if”会自己激活？

基本上，当满足条件“event.target === checkbox && active”时，“active”的值将变为“false”。因此，下次单击该复选框将满足...

JavaScript 中的 ParentNode 和 previousSibling

我正在阅读一本书来学习 JavaScript，它似乎存在编码错误，因为我所遵循的内容似乎不起作用。这是我所拥有的： HTML： 我正在阅读一本书来学习 JavaScript，但它似乎存在编码错误，因为我所遵循的内容似乎不起作用。这是我所拥有的： HTML： <!DOCTYPE html> <html> <head> <title>Examples of moving around in the DOM using native JavaScript methods</title> <meta charset="UTF-8"> <!-- CSS Stylesheet --> <link rel="stylesheet" href="css/show.css"> </head> <body> <!-- Let's get the parent element for the target node and add a class of "active" to it --> <ul id="nav"> <li><a href="/" id="home">Home</a></li> <li><a href="/about" id="about">About Us</a></li> <li><a href="/contact" id="contact">Contact Us</a></li> </ul> <input type="button" onclick="targetClass()" value="Target the Class"/> <input type="button" onclick="prevNextSibling()" value="Target Next and Previous Sibling"/> <script src="js/js.js"></script> </body> </html> JavaScript： // This block of JavaScript obtains the parent element // target the "about" link and apply a class to its parent list item function targetClass() { document.getElementById("about").parentNode.setAttribute("class", "active"); } // This block of code adds a Class to Previous and Next Sibling Nodes function prevNextSibling() { // get "about" parent, then its previous sibling and apply a class document.getElementById("about").parentNode.previousSibling.setAttribute("class", "previous"); // get "about" parent, then its next sibling and apply a class document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next"); } 根据这本书，我应该得到的生成的 HTML 的输出是： <ul id="nav"> <li class=" previous" ><a href="/" id="home">Home</a></li> <li class=" active" ><a href="/about" id="about">About Us</a></li> <li class=" next" ><a href="/contact" id="contact">Contact Us</a></li> </ul> 但是当我单击文本框时什么也没有发生。 如何解决这个问题？ 某些浏览器在 DOM 元素之间插入空格 阅读以下链接中的注释部分 https://developer.mozilla.org/en-US/docs/Web/API/Node.nextSibling 解决方案是使用 previousElementSibling 和 nextElementSibling。这将选择下一个相同类型的同级 这有效：http://jsfiddle.net/E2k6t/1/ function targetClass() { document.getElementById("about").parentNode.setAttribute("class", "active"); } function prevNextSibling() { document.getElementById("about").parentNode.previousElementSibling.setAttribute("class", "previous"); document.getElementById("about").parentNode.nextElementSibling.setAttribute("class", "next"); } ##注意 当您进行实际开发时，不建议在 HTML 代码中使用内联 javascript (onclick="targetClass()") - 讨论here 和 here。使用事件监听器 如果您使用检查器检查 DOM，您将看到 li 元素之间有空文本节点。要解决此问题： // get "about" parent, then its previous sibling and apply a class document.getElementById("about").parentNode.previousSibling.previousSibling.setAttribute("class", "previous"); // get "about" parent, then its next sibling and apply a class document.getElementById("about").parentNode.nextSibling.nextSibling.setAttribute("class", "next"); 更新：实际上，我只使用IE工具看到了空文本节点，而不是FF或Chrome。 以下是它们在 IE 开发者工具中的外观：

带有 javascript 的 DOM html

无法将元素的 id 从 HTML 提取到 js 编码 函数测试打印（）{ // document.getElementById("dataTable").innerHTML = ""; 让名字 = 无法将元素的 id 从 HTML 提取到 js 编码 function testPrint() { // document.getElementById("dataTable").innerHTML = ""; let Name = <td class="px-6 py-4 whitespace-no-wrap">Kevin</td>; let bmi = <td>20</td>; let message = <td class="px-8 py-4 whitespace-wrap"> from the data report that we got it is determined that you are overweight </td>; let btnAction = <td class="flex px-3 py-4 whitespace-no-wrap"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">Edit</button> <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button> </td>; document.getElementById( "dataTable" ).innerHTML += <tr>${Name}${bmi}${message}${genre}${btnAction}</tr>; } 我们尝试用 javascript 连接 HTML 中的 id 元素。我们看到了一些例如。在网上，但它像这样卡住了 您的代码应该是： function testPrint() { let Name = '<td class="px-6 py-4 whitespace-no-wrap">Kevin</td>'; let bmi = '<td>20</td>'; let message = '<td class="px-8 py-4 whitespace-wrap">'; message += 'from the data report that we got it is determined that you are overweight'; message += '</td>'; let btnAction = '<td class="flex px-3 py-4 whitespace-no-wrap">' btnAction += '<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">Edit</button>' btnAction += '<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>' btnAction += '</td>' document.getElementById( "dataTable" ).innerHTML += `<tr>${Name}${bmi}${message}${btnAction}</tr>`; } 因为你的代码没有定义变量“genre”，所以我把它从innerHTML中删除了。

React - 优化大量照片的预览

我目前正在开发一个React项目，用户可以使用react-dropzone库上传大量照片（大约400多张）。当文件上传功能正常工作时...

如何在JavaScript中临时删除eventListener？

每当有人选择休息日的日期（例如星期六或星期日，它可能是一系列关闭日中的任何一天）时，我想呈现错误。 我有 HTML： 每当有人选择休息日的日期（例如星期六或星期日，它可能是一系列关闭日中的任何一天）时，我想呈现错误。 我有 HTML： <div> <input type="date" id="date-input"> </div> <br> <div id="error-container"> </div> CSS： .d-error{ background: orangered; color: white; padding: 4px 8px; } 这是 JavaScript： 'use strict'; const dateInput = document.getElementById('date-input'); const errorContainer = document.getElementById('error-container'); const closingDays = [0, 6]; const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday']; const displayError = function ({ parentEl, message, position = 'prepend', durationSec = 0 }) { const errorElement = document.createElement('p'); errorElement.classList.add('d-error'); errorElement.textContent = message; parentEl[position](errorElement); if (durationSec) { setTimeout(() => { errorElement.remove(); }, durationSec * 1000); } }; const handleDateChange = function (event) { const selectedDay = new Date(event.currentTarget.value).getDay(); if (closingDays.includes(selectedDay)) { displayError({ parentEl: errorContainer, message: `We are closed on ${weekDays[selectedDay]}. Please select another day.`, durationSec: 5 }); event.currentTarget.value = ''; } }; dateInput.addEventListener('change', handleDateChange); 这可行，但错误会呈现两次。一次是由于用户更改，一次是由于以编程方式更改输入值 event.currentTarget.value = '';。那么，如何暂时删除 change 事件监听器并重新附加到它呢？或者有其他方法可以解决这个问题吗？ 我尝试过： const handleDateChange = function(event) { ... event.currentTarget.removeEventListener('change', handleDateChange); event.currentTarget.value = ''; event.currentTarget.addEventListener('change', handleDateChange); ... } 但这并没有解决问题。 更新： 首先，正如@Sebastian 所指出的，以编程方式设置输入的值不会触发change事件。所以一定还有其他原因导致事件触发两次。 我非常抱歉没有在 Firefox 以外的其他浏览器中进行测试。这个问题似乎只出现在 Firefox 中，因为在基于 chromium 的浏览器中，一切都按预期工作（尽管在 Firefox android 中工作）。所以，我猜测这是 Firefox 中的某种错误，但我个人无法确认。请尝试在不同的浏览器中运行代码片段。 'use strict'; const dateInput = document.getElementById('date-input'); const errorContainer = document.getElementById('error-container'); const closingDays = [0, 6]; const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const displayError = function({ parentEl, message, position = 'prepend', durationSec = 0 }) { const errorElement = document.createElement('p'); errorElement.classList.add('d-error'); errorElement.textContent = message; parentEl[position](errorElement); if (durationSec) { setTimeout(() => { errorElement.remove(); }, durationSec * 1000); } }; const handleDateChange = function(event) { const selectedDay = new Date(event.currentTarget.value).getDay(); if (closingDays.includes(selectedDay)) { displayError({ parentEl: errorContainer, message: `We are closed on ${weekDays[selectedDay]}. Please select another day.`, durationSec: 5 }); event.currentTarget.value = ''; } }; dateInput.addEventListener('change', handleDateChange); .d-error { background: orangered; color: white; padding: 4px 8px; } <div> <input type="date" id="date-input"> </div> <br> <div id="error-container"> </div> 这里是一个较短版本的代码片段，用于在 Firefox (121) 中重现该错误。 OP 是正确的，第二个事件实际上是由以编程方式设置输入字段的值引起的（情况不应该如此）。但是，第二个事件中打印到控制台的值与第一个事件的值相同。此外，在事件处理程序之外设置值根本不会触发事件（应该如此）。因此，应该将此行为报告给 https://bugzilla.mozilla.org/ . function onChange(event) { console.log('changed to ' + dateInput.value) dateInput.value = ''; // somehow triggers a second event }; dateInput.addEventListener('change', onChange); dateInput.value = '2024-02-07'; // does not trigger the event! <div> <input type="date" id="dateInput"> </div>

添加 href 和 id 属性会导致框架错误

获取图像列表后，我想将它们显示在网格上；它在修补框架后工作，但它不断吐出以下错误： TypeError: win[(("HTML" + (intermediate value...

为什么我无法在js中设置文档或窗口对象？

当我检查并在控制台中我写了 window.document = null;或窗口= null;。这不会为各个道具分配 null，为什么会出现这种行为？ 如果是这样，那么我可以明确禁用任何对象...

如何从该 WebElement 获取 aria-label 属性的值？

使用 Java Selenium，我有一个对表示以下 HTML 节点的 WebElement 对象的引用： 使用 Java Selenium，我有一个对代表以下 HTML 节点的 WebElement 对象的引用： <td role="gridcell" class="mat-calendar-body-cell ng-star-inserted" style="width: 25%; padding-top: 7.14286%; padding-bottom: 7.14286%;" tabindex="-1" data-mat-row="0" data-mat-col="0" aria-label="2001" aria-selected="false">...</td> 我需要 aria-label 属性的 2001 值，但我似乎无法做到。以下方法调用都返回null，我不知道为什么： element.getAttribute("aria-label"); element.getAttribute("ariaLabel"); element.getDomAttribute("aria-label"); element.getDomAttribute("ariaLabel"); element.getDomProperty("aria-label"); element.getDomProperty("ariaLabel"); 同时尝试 aria-label 和 ariaLabel 的原因是它在属性列表中列为 ariaLabel： 我打印了该节点的所有其他属性的值，以验证这不是计时问题，奇怪的是，这就是输出： role: gridcell class: mat-calendar-body-cell-container ng-star-inserted style: width: 25%; padding-top: 7.14286%; padding-bottom: 7.14286%; tabindex: null data-mat-row: 0 data-mat-col: 0 aria-label: null aria-selected: null 如何获取aria-label的值？ 硒版本：4.15.0 Chrome驱动程序版本：122.0.6261.57 解决了 我犯了一个极其愚蠢的错误。显然，我自动化的网站版本已更新，将 aria-label 属性从 td 节点移动到子 button 节点；我只是还没有费心刷新页面.. 试试这个： element.ariaLabel; 参考： https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabel

如何让容器随着div一起增长？

嘿，大家好，我正在尝试构建一个蚀刻草图，但在让我的 div 留在其容器内时遇到了问题。如果我要添加更多 div，我还希望容器能够拉伸。我的 div 是通过 fu...

使用 Java 和 XML DOM 解析 XML

我正在尝试使用 Java 和 XML DOM 解析 XML 文件。我能够正确读取一些属性，但无法正确读取 XML 中的列表。 例如，有一个标签列表，当我读到此内容时...

如何删除由可调整大小的div引起的不必要的填充？

我有一个div，需要水平调整大小。尽管添加 css resize 属性后，div 会获得不必要的填充。几秒钟后我不确定这是否可能......

vue js 和 jquery DOM 操作

我想知道是否有人可以给我建议，当我需要直接访问 DOM 元素，同时我也在使用 VUE.JS 时，如何处理这种情况。 我使用 Semantic-UI 框架（dead Semantic UI 的分支）...

如何将doc到html转换后的数据（html）渲染到网页中

场景： 我有一个最大的（50MB 大小）文件，并使用第三方工具将其转换为 html 文件。 现在我希望将转换后的 HTML 文件展示到我的网页中 当尝试这个场景时，我的 React

如何通过querySelectorAll(selector)获取一级子级

如果我们有一个包含嵌套 UL 列表的 UL 列表，例如 项目 子项目 我们需要...

我正在构建一个应用程序，我希望管理员更新管理面板中显示的任何用户

我是初学者，陷入了这个问题。我正在构建一个应用程序，我希望管理员通过单击...底部的更新按钮来更新管理面板中显示的任何用户。