dom 相关问题

我可以直接通过id访问DOM元素吗？ [重复]

在 javascript 中，我总是使用 document.getElementById() 来访问 DOM 元素，但最近我不小心只使用 id 访问它并且它起作用了。例子： 在 javascript 中，我总是使用 document.getElementById() 来访问 DOM 元素，但最近我不小心只使用 id 访问它，并且它有效。示例： <input id="element_id" type="text"> 在 JavaScript 中 element_id.onclick=fun; 代码正确吗？为什么它有效？ （在我拥有的所有浏览器中） 是的，在某些浏览器中，元素可用作以其 ID 命名的全局变量。 不要使用这个“功能”。它是非标准的，并且没有得到普遍支持。 有时它会在某些浏览器中工作。例如，如果您创建以下元素： <div id="Math">I'm a math div!</div> Math和window.Math都会返回MathConstructor {}，因为这就是正常的window.Math返回的内容。 （在 Chrome 中测试此处）

在node.js中使用XPath

我正在用node.js构建一个小型文档解析器。为了进行测试，我有一个原始 HTML 文件，通常是在应用程序执行时从真实网站下载的。 我想提取第一个代码

<a>标签的“data-url”和“data-key”属性是什么？

我遇到过 html 标签的两个奇怪的属性。它们是“data-url”和“data-key”。 它们是什么以及如何使用它们？ 由于某些原因，我无法显示我所拥有的 HTML 文件的确切示例

大量 DOM。隐藏与显示无

如果页面上有很多 DOM，并且我将它们全部设置为 display: none，浏览器仍然会快速反应（滚动很快，页面感觉很快）。 但是，如果我的visibility:隐藏了元素，

如何用php抓取亚马逊搜索？

有什么想法吗？我是 php 新手，在使用 curl 和 domdocuments 时遇到很多麻烦，所以请写信或给我看一个例子。我正在考虑使用 dom 文档，但我不知道如何获取

交换后如何滚动到元素底部？

添加后我想转到最后一个待办事项，但我无法让它工作。 这是代码： 添加后我想转到最后一个待办事项，但我无法让它工作。 这是代码： <button id="button" hx-post="/api/todos" hx-include="#field-description, #field-amount" hx-target="#todos-container" hx-swap="innerHTML" hx-on:click=" document.getElementById('field-description').value = ''; document.getElementById('field-amount').value = ''; document.getElementById('field-description').focus(); " hx-on::afterSwap="document.getElementById('todos').scrollIntoView({ behavior: 'smooth', block: 'end' });" > Add </button> 根据@McPherson的评论，我调整了你的代码，使其滚动。我删除了你的 Javascript 事件并用滚动修饰符替换它们，而不是 hx-swap="innerHTML" 就是现在 hx-swap="innerHTML scroll:bottom" 下面是演示滚动的交互式演示。它包括 /api/todos 的模拟端点和一些用于使滚动效果更加明显的 CSS。我试图根据按钮中的字段猜测您可能拥有哪些其他元素，并将字段重置移动到表单元素，而不是一一重置它们。 <!-- load demo environment --> <script src="https://demo.htmx.org/demo.js"></script> <!-- your modified code --> <div id="todos"> <form hx-on::after-request="this.reset()"> <input id="field-description" type="text"> <input id="field-amount" type="number"> <button id="button" hx-post="/api/todos" hx-include="#field-description, #field-amount" hx-target="#todos-container" hx-swap="innerHTML scroll:bottom" > Add </button> </form> <ul id="todos-container"></ul> </div> <!-- styles to make the scrolling more obvious in the demo --> <style> #todos-container { background: lightblue; height: 3rem; overflow: scroll; scroll-behavior: smooth; } </style> <!-- mock endpoint to render todo items --> <template url="/api/todos"> ${todo(this["field-description"].value, this["field-amount"].value)} </template> <!-- extra logic to output list of all todos as innerHTML as in the question asker's example --> <script> let todo = function() { todos = [] return (desc, amt) => { todos.push(`<li>${desc} (${amt})`) return todos.join('') } }() </script>

HTMX - 交换后滚动到元素底部

添加后我想转到最后一个待办事项，但我无法让它工作。 这是代码： 添加后我想转到最后一个待办事项，但我无法让它工作。 这是代码： <button id="button" hx-post="/api/todos" hx-include="#field-description, #field-amount" hx-target="#todos-container" hx-swap="innerHTML" hx-on:click=" document.getElementById('field-description').value = ''; document.getElementById('field-amount').value = ''; document.getElementById('field-description').focus(); " hx-on::afterSwap="document.getElementById('todos').scrollIntoView({ behavior: 'smooth', block: 'end' });" > Add </button> 根据@McPherson的评论，我调整了你的代码，使其滚动。我删除了你的 Javascript 事件并用滚动修饰符替换它们，而不是 hx-swap="innerHTML" 就是现在 hx-swap="innerHTML scroll:bottom" 下面是演示滚动的交互式演示。它包括 /api/todos 的模拟端点和一些用于使滚动效果更加明显的 CSS。我试图根据按钮中的字段猜测您可能拥有哪些其他元素，并将字段重置移动到表单元素，而不是一一重置它们。 <!-- load demo environment --> <script src="https://demo.htmx.org/demo.js"></script> <div id="todos"> <form hx-on::after-request="this.reset()"> <input id="field-description" type="text"> <input id="field-amount" type="number"> <button id="button" hx-post="/api/todos" hx-include="#field-description, #field-amount" hx-target="#todos-container" hx-swap="innerHTML scroll:bottom" > Add </button> </form> <ul id="todos-container"></ul> </div> <!-- styles to make the scrolling more obvious in the demo --> <style> #todos-container { background: lightblue; max-height: 3rem; overflow: scroll; scroll-behavior: smooth; } </style> <!-- mock endpoint to render todo items --> <template url="/api/todos"> ${todo(this["field-description"].value, this["field-amount"].value)} </template> <!-- extra logic to output list of all todos as innerHTML as in the question asker's example --> <script> let todo = function() { todos = [] return (desc, amt) => { todos.push(`<li>${desc} (${amt})`) return todos.join('') } }() </script>

“data-v-”是什么意思？

我有如图所示的代码。刚刚在网站上看到它，但我不明白这个“data-v-28....”代表什么。我想学一些，但我不明白，也找不到答案......

无法修改ViewContainerRef的内部内容，只能在Angular中在其后面添加标签

我有一些可能标有特殊指令的 DIV。该指令具有一定的有效逻辑。现在，我想在配备该指令的 DIV 中添加一个组件。 我有一些 DIV 可能标有指令 special。该指令具有一定的有效逻辑。现在，我想在配备该指令的 DIV 中添加一个组件。 <div special ...>Monkey</div> <div regular ...>Donkey</div> 按照 Using ViewContainerRef 上的文档（由 this answer 针对类似问题建议），我在指令中运行以下命令。 @Directive({ selector: "[special]" }) export class SpecialDirective { private viewRef = inject(ViewContainerRef); ... constructor() { const icon = this.viewRef.createComponent(IconComponent); } 它的工作方式与文档中描述的一样：创建的图标（对应于 LeafContent）被放置在 DOM 中标记为特殊的 DIV 后面（对应于 InnerItem）。这正是我的问题：我希望图标成为受指令控制的 DIV 内部 HTML 的一部分。由于与其逻辑相关的各种原因，我无法将该指令向内移动。我尝试访问 viewRef.element 并检查了它的其他字段和方法。无济于事。在创建上设置索引没有帮助。我得到的最接近的是从文档中分离/插入，但它只能让我管理元素的顺序之后我的DIV，而不是在其中它。 我已经看到了这个答案，但它对我的情况没有帮助，因为更改是在用户单击 DIV 之后发生的，通过它已被创建并放置在视图中。 如何更改 viewRef 实例的内部？最理想的是，除了修改图标之外，我还想删除其中的一些标签。 您可以创建一个 template reference variable #insertHere 来明确指定插入新组件的位置，我们可以使用 viewChild 并指定 read 属性来获取具有 ViewContainerRef 方法的 createComponent @Component({ selector: 'inner-item', template: ` <button (click)="loadContent()">Load content</button> <ng-container #insertHere></ng-container> `, }) export class InnerItem { insertHere = viewChild('insertHere', { read: ViewContainerRef, }); loadContent() { this.insertHere()?.createComponent(LeafContent); } } 完整代码： import { Component, viewChild, ViewContainerRef } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; @Component({ selector: 'leaf-content', template: ` This is the leaf content `, }) export class LeafContent {} @Component({ selector: 'inner-item', template: ` <button (click)="loadContent()">Load content</button> <ng-container #insertHere></ng-container> `, }) export class InnerItem { insertHere = viewChild('insertHere', { read: ViewContainerRef, }); loadContent() { this.insertHere()?.createComponent(LeafContent); } } @Component({ selector: 'outer-container', imports: [InnerItem], template: ` <p>This is the start of the outer container</p> <inner-item /> <p>This is the end of the outer container</p> `, }) export class OuterContainer {} @Component({ selector: 'app-root', imports: [OuterContainer], template: ` <outer-container/> `, }) export class App { name = 'Angular'; } bootstrapApplication(App); Stackblitz 演示

js中无法设置元素的href和src

我有这个javascript代码： var footerDiv = document.getElementsByClassName("版权")[0]; window.addEventListener('加载', function() { var Button = document.createElement('按钮...

在父DIV的特定索引处插入DOM元素

Angular 模板中有一个 DIV： 并在 .ts 文件中 让内容 = 'test1 test2 test3' 现在我正在创建新的 DIV： const newDiv = this.

如何在React Native中创建不受控制的复选框组件？

最大的问题是如何在不使用useState hook的情况下通过DOM在内部管理和更新这个组件的状态？如何进行重新渲染？ 我对

Javascript的appendChild向DOM添加一个元素两次？

我有这个代码（TH 是我的表头 DOM 元素）： var typeIndicator = document.createElement('span'); typeIndicator.innerText = "A"; TH.appendChild(typeIndicator); 会发生什么是它附加...

Javascript 拒绝工作

一直在尝试组合一个测试java脚本/html页面以用于我的主要评估任务。花了几个小时寻找问题后，似乎我找不到它。 这是代码： ...

Svelte：窗口组件加载未触发

在Svelte5中，为什么onload事件没有触发src/routers/+layout.svelte中的函数foo()？ const foo = () => console.log('foo 触发了') 在Svelte5中，为什么onload事件没有触发foo()中的函数src/routers/+layout.svelte？ <script> const foo = () => console.log('foo triggered') </script> <svelte:window onload={foo} /> 我在这里猜测，但很可能在您自己的 JS 代码运行添加该事件的侦听器之前，文档上的 load 事件已经触发。在 +layout.svelte 中，您应该使用 onMount() 来代替。

document.getElementsByTagName 和 javascript 行为返回意外结果

HTML： 上面是我给出的简单 html，我编写了一个函数来添加子项...

修复从 dom 文档获取数据的代码（getElementby...）

网址：sayuri.go.jp/used-cars $content = file_get_contents('http://www.sayuri.co.jp/used-cars/'); $dom = 新的 DOMDocument; $dom->loadHTML($content); 部分源代码： ...

无法使用 forEach 循环遍历 HTMLCollection

我试图为每个类名为director__card--iconBox 的元素分配一个单击事件。我选择这些元素的方式是通过 getElementsByClassName。使用当前代码

为什么我的JS代码无法运行？

出于某种原因，我遇到了这个问题：Uncaught TypeError: Cannot read property 'value' of null on the document.getElementById line。这是什么问题？？我不知道。 HTML 代码： ...

Javascript 拒绝工作...日期测试

这是我的代码： 日期测试 document.getElementById("日期").innerHTML = Date(); 这是我的代码： <html> <head> <title>Date Test</title> <script> document.getElementById("date").innerHTML = Date(); </script> </head> <body> <p>Today's date is <span id="date"></span></p> </body> </html> 当我运行 HTML 文档时，它只显示“今天的日期是”...为什么？！？ 脚本执行时，<span id="date">不存在。您可以将其放入 onload 处理程序中来解决此问题： <script> onload = function() { document.getElementById("date").innerHTML = Date(); }; </script> 这将在整个 DOM 准备好后运行脚本。当然，您可以处理 DOMContentLoaded 以在 DOM 准备就绪时立即运行代码，而不是在其内容也加载之后运行，但另一种（非常简单）的方法是将脚本放在结束 </body> 标记之前： <html> <head> <title>Date Test</title> </head> <body> <p>Today's date is <span id="date"></span></p> <script> document.getElementById("date").innerHTML = Date(); </script> </body> </html> 尝试将脚本放在 body 末尾之前以确保 DOM 已加载： <html> <head> <title>Date Test</title> </head> <body> <p>Today's date is <span id="date"></span></p> <script type="text/javascript"> document.getElementById("date").innerHTML = Date(); </script> </body> </html> 示例： http://jsfiddle.net/tQUUH/ 以下是一些更深入讨论该主题的资源： $(document).ready 相当于没有 jQuery window.onload事件（MDN） 如果您刚刚学习 JavaScript，MDN 是一个很好的资源。