dom 相关问题

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

在基本的HTML中，我们几乎可以自由地使用我们想要的任何标签。我可以写这样的代码：在基本的 HTML 中，我们几乎可以自由地使用任何我们想要的标签。我可以写这样的代码： <card> <header> <logo> <img src=".."> </logo> <header> <subject> .. </subject> <information> .. </information> <card> 我知道这不标准，但它非常有组织！有什么创造性的方法让 JSX 支持这种语法吗？我不是在谈论手动定义标签或组件。我正在寻找一个根本解决方案，使 React JSX 自动支持所有自定义标签。” 我尝试过： const tags = ['card', 'header', 'logo', 'subject', 'information']; const components = tags.reduce((obj, tag) => { obj[tag] = ({ children, ...props }) => React.createElement(tag, props, children); return obj; }, {}); 但它不起作用，而且不是自动的您可以创建一个函数，根据自定义标签列表动态生成 React 组件。这是一个例子： import React from 'react'; const CustomComponent = ({ tag, children, ...props }) => { const CustomTag = tag || 'div'; return React.createElement(CustomTag, props, children); }; const App = () => { const tags = ['card', 'header', 'logo', 'subject', 'information']; return ( <CustomComponent tag="card"> <CustomComponent tag="header"> <CustomComponent tag="logo"> <img src="..." alt="Logo" /> </CustomComponent> </CustomComponent> <CustomComponent tag="subject">Subject content</CustomComponent> <CustomComponent tag="information">Information content</CustomComponent> </CustomComponent> ); }; export default App;

html reactjs dom jsx custom-tags

回答 1 投票 0

#如何借助dom选择第二个li并改变它的颜色？下面的代码是否有效

一个两个三 const li_second=document.querySelector('li:two').style.backgroundCol...

javascript dom basic

回答 1 投票 0

将 Popover 选择限制为父组件

我正在编写自己的弹出框组件，它将进行一些文本转换 https://pastecord.com/vegygawece.js。 <--- Popover component code It should work like this: when a user selects some te...

javascript reactjs typescript dom

回答 1 投票 0

检查 HTML5 表单有效性的方法？

是否可以根据我为其设置的模式检查html5表单的输入元素是否有效？我知道伪类的东西..但我希望是这样的： document.getElementById('

javascript forms html dom

回答 4 投票 0

使用PHP获取DOM元素

我正在努力理解如何在 PHP 中使用 DOMElement 对象。我找到了这段代码，但我不确定它是否适用于我： $dom = new DOMDocument(); $dom->loadHTML("索引...

php html dom tags

回答 2 投票 0

vue数据未显示在页面上

我开始使用 vue.js 编写应用程序的前半部分。我有一个问题，数据没有输出，尽管如果我通过 console.log 将其输出到控制台，一切都是

javascript vue.js dom frontend vuejs3

回答 1 投票 0

在添加到 DOM 之前获取元素的高度

有什么方法可以在将元素附加到 DOM 之前获取其高度吗？我知道 clientHeight 不能像我尝试的那样工作，它总是返回 0。是否有其他方法可以返回

javascript dom height append element

回答 3 投票 0

使用 Puppeteer 抓取项目列表

我正在尝试从 Visma Inschool 获取我的学校时间表。由于它在学校本地托管，我有权这样做。我正在尝试制作一个信息屏幕，但当它出现时我完全迷失了......

javascript html class dom puppeteer

回答 1 投票 0

为什么 DOMDocument::saveHTML() 的行为在将 UTF-8 编码为样式和脚本元素中的实体时有所不同？

给定一个使用包含表情符号字符的样式表构建的 DOMDocument，在将 DOM 序列化回 HTML 时，我发现了一些奇怪的行为。 $html = <<< HTML 考虑到使用包含表情符号字符的样式表构建的 DOMDocument，我在将 DOM 序列化回 HTML 时发现了一些奇怪的行为。 $html = <<< HTML <!DOCTYPE html> <html> <head> <meta charset=utf-8> <style>span::before{ content: \"⚡️\"; }</style> </head> <body> <span></span> </body> </html> HTML; $dom = new DOMDocument(); $dom->loadHTML($html); echo $dom->saveHTML($dom->documentElement); echo $dom->saveHTML(); $dom->saveHTML($dom->documentElement)的结果是（根据需要）： <html><head><meta charset="utf-8"> <style>span::before{ content: "⚡️"; }</style> </head><body><span></span></body></html> 但是 $dom->saveHTML() 返回（错误地）： <html><head><meta charset="utf-8"> <style>span::before{ content: "⚡️"; }</style> </head><body><span></span></body></html> 请注意表情符号“⚡️”如何编码为样式表内的 HTML 实体 ⚡️。它被视为文字字符串，因为应使用 CSS 转义 \26A1。我尝试设置$dom->substituteEntities = false但没有任何效果。相同的 HTML 实体转换也发生在 <script> 元素内部，这会在浏览器中导致类似的问题。通过在线 PHP shell 进行测试：https://3v4l.org/jMfDd 您应该在 DOMDocument 上加载带有表情符号的 HTML 之前转换编码： $dom->loadHTML(mb_convert_encoding($htmlCode, 'HTML-ENTITIES', 'UTF-8')); 编辑：正如帖子所有者提到的，mb_convert_enconding 在未来的 PHP 版本中已被弃用（目前在 8.2.5 上进行了测试并且工作正常）。对于更高版本的 PHP，请查看 https://php.watch/versions/8.2/mbstring-qprint-base64-uuencode-html-entities-deprecated#html

php dom domdocument html-entities

回答 1 投票 0

选择器“a:not(:has(a))”适用于 Chrome，但不适用于 Firefox [重复]

以下代码适用于 Chrome 和 Edge，但不适用于 Firefox： document.querySelectorAll('a:not(:has(a))') 在 Firefox 上，它会抛出未捕获的 DOMException: Document.querySelectorAll: 'a:not(:has(a)...

javascript dom firefox css-selectors

回答 1 投票 0

如何选择除 ID 和类名之外的 DOM 元素

抱歉，如果这个问题看起来很菜鸟或没有意义，我对 JS 很陌生。我有一个如下所示的网页 - 椅子抱歉，如果这个问题看起来很菜鸟或没有意义，我对 JS 很陌生。我有一个如下所示的网页 - <td class="main" data="chair">Chair</td> <td class="main" data="table">Table</td> <td class="main" data="desk">Desk</td> 我知道如何通过 ID 或类名选择文档，但在这里你可以看到类名对于所有文档都是相同的，我如何选择表的值？我尝试过使用 document.querySelectorAll 并在其上实现了 foreach 但失败了。你能让我知道如何做到吗？使用属性选择器： https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors console.log(document.querySelector('[data=chair]').textContent); <table> <tr> <td class="main" data="chair">Chair</td> <td class="main" data="table">Table</td> <td class="main" data="desk">Desk</td> </tr> </table> 你能试试这个代码吗？ function exampleTable() { var getTables = document.querySelectorAll(".main"); getTables.forEach((cell) => { var content = cell.textContent; var dataAttribute = cell.getAttribute('data'); console.log(content); console.log(dataAttribute); });}

javascript dom

回答 2 投票 0

组合 box-shadow 和 border-radius 时出现 CSS 故障

我尝试使用 CSS 和 HTML 创建一个切换按钮，问题是当我在 Chrome、Firefox 和 Safari 上组合 box-shadow 和 border-radius 属性时，边缘出现故障。例子 ...

html css google-chrome dom

回答 1 投票 0

如何在 HTML 视频元素的客户端坐标和图片坐标之间进行转换？

假设我有一个视频元素，我想在其中处理鼠标事件： const v = document.querySelector('video'); v.onclick = (ev) => { ev.preventDefault(); console.info(`x=${event.offse...

javascript dom html5-video

回答 1 投票 0

我可以将 javascript 动态添加到现有脚本元素吗

我想动态地将javascript添加到现有的脚本元素中，例如： var se = document.createElement('script'); se.setAttribute('类型', '文本/javascript'); se.innerHTML = '警报(1)';

javascript html dom

回答 4 投票 0

需要在GTM中捕获DOM变量，但ID是动态的并且根据用户而变化

需要在表单字段中返回电话号码作为GTM中的变量，但id是动态的并且不会被推送到数据层。想要提取下面所需的值。需要在表单字段中返回电话号码作为 GTM 中的变量，但 id 是动态的并且不会被推送到数据层。想要提取下面所需的值。 <input name="phone" type="tel" id="id-lpvcy9p3" class="my-input" required="" value="1111111111" data-gtm-form-interact-field-id="0"> 尝试在 DOM Id 字段中对 id 进行正则表达式（不确定正则表达式是否有效），但不断获取空值我同意@CBroe 的观点，使用类似 name 的方法是比 ID 更可靠的方法。考虑到这个名称对于您所定位的领域来说是唯一的（有时不是）。您可以使用 JavaScript 变量（例如 document.getElementsByName('phone')）来提取该字段的内容。

html css variables dom google-tag-manager

回答 1 投票 0

访问 nextSibling 的属性时，类型“ChildNode”上不存在属性“xxx”

游乐场演示代码： document.querySelectorAll('a').forEach(item => { console.log(item.nextSibling?.tagName); }) /* 1 文本节点 2 游乐场演示代码： document.querySelectorAll('a').forEach(item => { console.log(item.nextSibling?.tagName); }) /* <span>1</span> text node <span>2</span> <script> document.querySelector('span').nextSibling; // #text document.querySelector('span').nextSibling.nextSibling; // <span>2<span> </script> */ 我在这里没有使用nextElementSibling，因为我也想迭代文本节点您的问题下的评论正确地指出，ChildNode可以是HTML元素之外的其他内容，因此这就是为什么像tagName这样的属性默认情况下不起作用。评论建议转换为 HTMLElement，但最好使用 instanceof: document.querySelectorAll('a').forEach(item => { if (item.nextSibling instanceof HTMLElement) { console.log(item.nextSibling?.tagName); } }) 这是类型安全的，如果您愿意，它可以让您使用文本节点。这是另一种方法，尽管我认为它不太干净： document.querySelectorAll('a').forEach(item => { const nextSibling = item.nextSibling; if (nextSibling && "tagName" in nextSibling) { console.log(nextSibling.tagName); } }) 如果你想过滤掉除元素之外的所有内容，你可以使用类型保护： function isHTMLElement(node: Node): node is HTMLElement { return node instanceof HTMLElement; } Array.from(document.querySelectorAll('a')).filter(isHTMLElement).forEach(item => console.log(item.tagName))

typescript dom

回答 1 投票 0

访问浏览器中其他选项卡的内容

我正在使用 Mozilla Firefox，我正在尝试找出一种使用 JavaScript 和 DOM 访问同一窗口中其他选项卡内容的方法（如果存在的话，我愿意接受其他技术）。例如，我...

javascript firefox dom tabs

回答 5 投票 0

Google 应用程序脚本将 Google 文档中标题 4 的硬包装转换为软包装

我正在处理一份谷歌文档，其中一个标题分布在由 Enter 分隔的多行中（），我想将其转换为软回车（Shift + Enter），我可以手动完成，但它非常乏味...

javascript google-apps-script dom google-docs google-docs-api

回答 1 投票 0

创建动态获取和解析脚本的顺序

我正在尝试使用多个前端应用程序来优化网站。我想动态下载（解析）应用程序并为我们系统的关键应用程序设置顺序。我在想...