dom 相关问题

JavaScript 代码似乎无法按预期用于 xml 元素

我现在基本上只是尝试仅当行元素“Blue”出现在屏幕上时才显示“Blue OTHER”列（而不是时应该隐藏）。目前当“...

如何将 document.querySelector 作为变量传递？

我需要一些帮助！为了应用 DRY 原则，我的代码中有很多 document.querySelector，并且我已经创建了一个这样的函数。 const documentQuerySelector = (tag, method, message) => {

如何在 Angular 15 中加载外部脚本？

我在我的角度项目中使用 metronic 8 管理面板设计，脚本文件已加载但它不起作用，在 html 版本中工作时，它在角度项目中工作，当我搜索时......

为什么在使用 ref 时不传递样式组件对象的值

styled-component Styled = styled.divmargin: 0; 的值未传递给 ref 元素。但是当我使用内联样式时，样式会传递给元素。 请参阅附图。 使用我...

当我浏览页面的特定部分时如何调用函数？

滚动到页面上的特定部分时，我不确定如何调用函数。 例子： 当我滚动到文章部分时，我想更改文本的颜色。 或者...我想隐藏一个

如何读取动态创建的 dom 元素的属性？

使用 for 循环，我正在创建一个 span 元素来保存我访问的列表元素的索引 # 文档.querySelectorAll(); 然后将创建的 span 元素附加到每个元素 ...

如何使用array.every来操作DOM元素

我是一个 js 初学者，我最近发现了一个简单的方法来确保数组的每个元素都满足一个条件，那就是 array.every()。我仍然很困惑你应该如何使用它......

DOM 返回具有 1 个元素但无法访问的 NodeList？

我创建了一个名为“btn”的按钮，它被脚本检测到并被 DOM 列出，但无法访问它以将事件侦听器附加到它。 获取数据！ 我创建了一个名为“btn”的按钮，它被脚本检测到并被 DOM 列出但无法访问它以将事件侦听器附加到它。 <button name="btn">Get Data!</button> 脚本中有与问题相关的这些行： let obj=document.getElementsByName("btn"); obj[0].addEventListener("click", func); 如果我控制台日志对象，它显示它有 1 个元素，它是按钮。但是 obj[0] 控制台日志未定义。为什么？ 我尝试使用其他 DOM 选择器，例如 id 和类名，但同样的问题。方括号索引不能访问节点列表吗？

TypeError：无法读取 null

我收到一个错误 类型错误：无法读取 null 的属性“classList” 我不太确定在为每个表单字段操作 DOM 元素时我做错了什么。我的表单域有一个声明 ...

如何在 cypress 测试中避免 cy.wait()

嗨，我是 Cypress 的新手，我尽量避免在我的测试中使用 wait() 函数。 我知道，根据官方文档，赛普拉斯是异步工作的，我们不需要使用 wait() 函数，尤其是

JavaScript如何模拟按键事件改变文本内容和提交表单？

我想创建一个JavaScript函数，可以模拟按键事件来更改div中的文本内容，然后使用按钮单击事件提交。 例如，假设我有一个 div w...

我有一个在段落中搜索文本的搜索栏，但由于它每次都在更新 dom，因此存在滞后。有没有办法改进我的代码

我循环浏览我的网络应用程序中的每个段落并搜索段落中的每个单词。大约有 2000 个段落可供搜索。任何改进此代码的建议将不胜感激。 函数...

HtmlAgilityPack - 选择后代直到具有类的元素

我在我的 C# 应用程序中使用 HtmlAgilityPack 来抓取一些 HTML 代码。但我在选择特定标签时遇到问题。 这是我的 HTML： 我在我的 C# 应用程序中使用 HtmlAgilityPack 来抓取一些 HTML 代码。但是我在选择特定标签时遇到问题。 这是我的 HTML： <div class="Post"> <img src="image.png" alt="Alt Text"> <br> <b>THIS TEXT IS WHAT I WANT</b> <div class="DesktopElements"> <br> Hello world </div> <br> Some text here. <br> <b>Title</b> <br> Some more text here. </div> 我想要做的是选择第一个“b”标签内的文本：<b>THIS TEXT IS WHAT I WANT</b>，但前提是它位于类“DesktopElements”的 div 之前。我不想在“DesktopElements”类之后选择任何内容。 如果 <b> 标签在那里，这很好用。但问题是，有时这个<b>标签不会出现。 到目前为止，我一直在尝试获取 <b> 的第一个 <div class="Post"> 后代，但正如您可能意识到的那样，如果标签不存在，它将无法工作。有时它在那里，有时它不在那里。 所以我基本上只需要检查<b>和<div class="Post">之间的<div class="DesktopElements">标签，然后选择第一个（也是唯一的）<b>。 我该怎么做？ 换句话说，有时它看起来像这样： <div class="Post"> <img src="image.png" alt="Alt Text"> <br> <div class="DesktopElements"> <br> Hello world </div> <br> Some text here. <br> <b>Title</b> <br> Some more text here. </div> 如果是这样的话，我只是将“p.Title”设置为“none”。 这是我目前使用的代码： p.Title = row.SelectSingleNode(".//div[@class='Post']").Descendants("b").Select(title => title.InnerText).Where(t => !string.IsNullOrWhiteSpace(t)).ToList().First(); 这将捕获第一个 <b> 标签的 InnerText 值，但如果在 <div class="DesktopElements"> 之前没有“b”标签，它将改为选择下面的 <b> 标签，上面写着 <b>Title</b> 这不是我想要的选择。 您可以使用TakeWhile只获取<div class="DesktopElements">之前的节点，而不是只获取Descendants("b")： var node = doc.DocumentNode.SelectSingleNode(".//div[@class='Post']") .Descendants() .TakeWhile(node => !node.HasClass("DesktopElements")) .FirstOrDefault(node => node.Name == "b"); p.Title = node?.InnerText ?? "none"; 参见示例小提琴。 我假设你想要这个 XPath： //div[@class='Post']/div[@class='DesktopElements']/preceding-sibling::b 这将只选择那些b在div[@class='DesktopElements']之前成为div[@class='Post']的孩子 编辑 查看共享网址后，我注意到没有课程Post和DesktopElements。 取而代之的是课程：PostText和ForumDesktopElements 不知道这怎么可能，但如果是这样的话，您将需要这个 XPath //div[@class='PostText']/div[@class='ForumDesktopElements']/preceding-sibling::b

如何在媒体查询更改时自动更改 iframe src 值？

document.addEventListener("DOMContentLoaded", function () { let query = window.matchMedia("(max-width:1224px)"); 让 iframe = document.querySelector("main>iframe")...

如何使用 FreshJs 控制 DOM 元素

我正在尝试学习新的 Deno 框架 FreshJS。现在唯一困扰我的是 DOM 控件。如果我想动态更新菜单项或更改容器的颜色，我将如何...

如何在功能组件中访问映射 div 的内容（DOM 节点）

我的代码：https://codesandbox.io/s/quirky-wescoff-44n2by?file=/src/App.js 当我将鼠标悬停在任何元素上时，总是在控制台中打印数组的最后一个元素。 我尝试使用 ref，不确定我是否...

如何在视图层渲染中使用对象的更新状态？

我正在做一个项目，我正在更改日期值的状态并想在视图层渲染中使用它。但是，当我尝试在那里使用它时 {appointmentDate. 我正在做一个项目，我正在更改日期值的状态并想在视图层渲染中使用它。但是，当我尝试将它用作<h2>{appointmentDate.toLocaleDateString()}</h2>时，它会抛出错误“无法读取未定义的属性（读取'toLocaleDateString'）”。 此外，如果我只使用“appointmentDate”<h2>{appointmentDate}</h2>，它会抛出错误“对象作为 React 子项无效（找到：[object Date]）。如果您打算渲染子项集合，请使用数组代替。“ 我想在 h2 标签中使用“appointmentDate”的值（在 useState 中定义，由“handleDate”函数更改）。请提供在函数外使用更新值的解决方案。 代码如下： import { useRef, useState } from "react"; import { Calendar } from "react-date-range"; import { addDays } from "date-fns"; import { format } from "date-fns"; import "react-date-range/dist/styles.css"; // main css file import "react-date-range/dist/theme/default.css"; // theme css file export default function App() { const [appointmentDate, setAppointmentDate] = useState(new Date()); const handleDate = (e) => { const clickedDate = e.target.value; setAppointmentDate(clickedDate); document.getElementById("select-calendar").innerHTML = appointmentDate.toLocaleDateString(); console.log(appointmentDate); }; return ( <div className="App"> <span id="select-calendar">Select calendar</span> <div onClick={handleDate}> <Calendar onChange={(item) => setAppointmentDate(item)} date={appointmentDate} className="stay-date" name="appointmentDate" /> </div> <h2>{appointmentDate.toLocaleDateString()}</h2> </div> ); } 这是代码笔链接：https://codesandbox.io/s/happy-maxwell-6x28nx?file=/src/App.js:23-1034 我尝试使用 useRef 但它仍然抛出相同的错误。 PS：这是我在 StackOverflow 上的第一个问题。如果我无法正确解释问题，请多多包涵。 你可以这样做： export default function App() { const [appointmentDate, setAppointmentDate] = useState(new Date()); const handleDate = (date) => { setAppointmentDate(new Date(date)); }; return ( <div className="App"> <span id="select-calendar">Select calendar</span> <div> <Calendar onChange={handleDate} date={appointmentDate} className="stay-date" name="appointmentDate" /> </div> <h2>{appointmentDate.toLocaleDateString()}</h2> </div> ); } 您没有在日历 onchange 事件上调用 handleDate 函数。同样 onchange 它返回日期，所以你首先需要将它转换为日期对象然后设置状态。

表格中细胞和孩子的区别

拿一个简单的表格，比如： A 乙 1 2&l... 拿一张简单的桌子，比如： <table id="fu"> <tr> <th>A</th> <th>B</th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table> 我得到顶部元素“fu”，然后我用两种方法之一到达 0,0 单元格。 fu.children[0].children[0].cells[0] 或 fu.children[0].children[0].children[0] 我明白children和childNodes的区别，但是cells和children好像是一样的。如果我在调试器中查看它们，我会看到： fu.children[0].children[0]. ... cells: HTMLCollection(2) [th, th] childElementCount: 2 childNodes: NodeList(5) [text, th, text, th, text] children: HTMLCollection(2) [th, th] ... 有什么区别，我应该使用 .cells 还是 .children 还是没关系？这似乎并不重要，但我担心在某些情况下它们可能会破坏我的代码。 谢谢 由于表格行可以拥有的唯一子元素是单元格，因此在 tr 元素上使用时两者之间没有实际区别。 children 属性适用于 DOM 中的所有元素，但来自较新的规范，cells 因此在某些古老和过时的浏览器上不受支持。 cells和children不一样。 cells 仅包括 th 和 td，而 children 可以包括任何 HTMLElement. 如果你在 Chrome 中运行它： <html> <body> <table id="table1"> <tr> <td>CellOne</td> <td>CellTwo</td> <script>console.log('hello world');</script> <td>CellThree</td> </tr> </table> <script> let concat = ''; let row0_children = document.getElementById("table1").rows[0].children; concat = '>>> Summary: \n' + 'Length of row_0.children = ' + row0_children.length + ', including:\n'; for (const v of row0_children) concat += '-' + v.innerText + '\n'; console.log(concat); let row0_cells = document.getElementById("table1").rows[0].cells; concat = '>>> Summary: \n' + 'Length of row_0.cells = ' + row0_cells.length + ', including:\n'; for (const v of row0_cells) concat += '-' + v.innerText + '\n'; console.log(concat); </script> </body> </html> 您将获得以下输出： >>> Summary: Length of row_0.children = 4, including: -CellOne -CellTwo -console.log('hello world'); -CellThree >>> Summary: Length of row_0.cells = 3, including: -CellOne -CellTwo -CellThree

仅显示一些文本行并隐藏所有其他行

我只想显示这条红色标记线。 我认为您还有其他想法，例如添加代码仅显示 “6 OVR CSK”、“6 OVR PBKS”、20 OVR CSK、20 OVR PBKS。 我的意思是如果这可能...

我无法让我的 Stripe-API 支付元素和链接身份验证元素可见，只有立即付款按钮出现

我的支付元素和链接验证元素 javascript 没有按照建议注入表单信息 我的支付元素和链接验证元素 javascript 没有按照建议注入表单信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Accept a payment</title> <meta name="description" content="A demo of a payment on Stripe" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="checkout.css" /> <script src="/checkout.js" defer></script> </head> <body> <!-- Display a payment form --> <form id="payment-form"> <div id="link-authentication-element"> <!--Stripe.js injects the Link Authentication Element--> </div> <div id="payment-element"> <!--Stripe.js injects the Payment Element--> </div> <button id="submit"> <div class="spinner hidden" id="spinner"></div> <span id="button-text">Pay now</span> </button> <div id="payment-message" class="hidden"></div> </form> <script src="https://js.stripe.com/v3/"></script> </body> </html> 我的 JavaScript (checkout.js): let elements; initialize(); checkStatus(); document .querySelector("#payment-form") .addEventListener("submit", handleSubmit); let emailAddress = ''; // Fetches a payment intent and captures the client secret async function initialize() { const response = await fetch("/create-payment-intent", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ items }), }); const { clientSecret } = await response.json(); const appearance = { theme: 'stripe', }; elements = stripe.elements({ appearance, clientSecret }); const linkAuthenticationElement = elements.create("linkAuthentication"); linkAuthenticationElement.mount("#link-authentication-element"); linkAuthenticationElement.on('change', (event) => { emailAddress = event.value.email; }); const paymentElementOptions = { layout: "tabs", }; const paymentElement = elements.create("payment", paymentElementOptions); paymentElement.mount("#payment-element"); } async function handleSubmit(e) { e.preventDefault(); setLoading(true); const { error } = await stripe.confirmPayment({ elements, confirmParams: { // Make sure to change this to your payment completion page return_url: "http://localhost:8080/checkout.html", receipt_email: emailAddress, }, }); 基本上我只是复制并粘贴了 Stripe 的示例代码。为了修复错误，我尝试在 HTML 页面中移动脚本并更改 SDK 版本（我使用的是 22.0.0）。我希望电子邮件、付款类型、客户信息等以浏览器的形式显示，但出现的只是立即付款按钮。