dom 相关问题

通过文档对象模型，将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML，JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。

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

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

javascript html dom

回答 1 投票 0

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

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

javascript android dom webview

回答 1 投票 0

如何使用 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”类，为活动导航项提供所需的视觉反馈。

javascript html class dom

回答 1 投票 0

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

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

javascript dom checkbox addeventlistener boolean-operations

回答 1 投票 0

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">  <link rel="stylesheet" href="css/show.css"> </head> <body>  <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 html dom

回答 2 投票 0

带有 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中删除了。

javascript html dom

回答 1 投票 0

React - 优化大量照片的预览

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

javascript reactjs dom

回答 1 投票 0

如何在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>

javascript dom dom-events

回答 1 投票 0

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

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

javascript dom href

回答 1 投票 0

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

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

javascript dom window document

回答 1 投票 0

如何从该 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

java html selenium-webdriver dom selenium-chromedriver

回答 1 投票 0

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

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

javascript function dom

回答 1 投票 0

使用 Java 和 XML DOM 解析 XML

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

java xml dom

回答 1 投票 0

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

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