通过文档对象模型，将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML，JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。
如何使用 JavaScript 获取 DOM 元素的 ::before 内容？
我想知道是否可以获取DOM元素的::before内容，这是由CSS3设置的。 我尝试了一些方法，但还是做不到，所以我很困惑！ // https://r...
我正在动态创建一个 JS 滑块 HTML，但我不知道如何将活动类添加到数组中的第一个对象。这是我尝试的最后一件事，有什么想法吗？数据来自...
Grammarly 和 languagetools 这样的应用如何知道输入框中拼写错误的确切位置？
如果您的浏览器中启用了 Grammarly 和 languagetools 等扩展程序。您在任何网站上输入某个输入框吗？ 现在我们知道可以知道输入 html 元素内的文本....
我在html文件中使用vue3，因为我被告知要做的事情......而这正在发生 我在 html 文件中使用 vue3，因为我被告知要做的事情......而这正在发生 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id = "app"> <div id="here"></div> </div> </body> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const { createApp } = Vue const x = document.getElementById('here') console.log('outside', x) createApp({ setup(){ const x = document.getElementById('here') console.log('inside', x) } }).mount('#app') </script> </html> 结果是这样的。 outside <div ...> inside null 您能给我解释一下吗？我试图查找文档，但不知道如何使用正确的关键字查找。也许 createApp 创建了与父级不同的上下文，所以我无法在其中引用它？ +）我测试了vue3部分，它工作正常。我可以在html部分引用setup函数返回的数据。 设置发生在vue组件创建之前，可以参考下面的代码。 setup(){ Vue.onMounted(function() { const x = document.getElementById('here') console.log('inside', x) }) }
为什么当我使用 dom 更改 href 属性时，我的锚标记的内容会被删除？
当我尝试使用 DOM 更改 href 属性时，锚标记内的按钮和 div 被删除。这是代码” 当我尝试使用 DOM 更改 href 属性时，锚标记内的按钮和 div 被删除。这是代码” <div class="flex experience flex-col mx-12 mt-8 xl:mx-auto 2xl:mx-auto text-center items-center"> <img src="portfolio.png" alt="" class="laptopImg"> <h1 class="text-2xl text-white font-inter font-light title mt-5 projectTitle">My Portfolio</h1> <h2 class="text-base text-blue-400 font-inter font-light mt-4 location projectTech">Tech: Html, Css, Tailwindcss, Javacript</h2> <a href="https://github.com/haroon6268/Portfolio" class="projectLink"> <div class="bg-gradient-to-r from-purple-500 via-blue-400 to-pink-500 p-1 rounded-md w-44 hover:opacity-50 transition-all ease-in-out duration-200 cursor-pointer mt-5"> <div class="h-full w-full bg-black flex flex-row justify-center items-center space-x-2"> <button class="text-gray-400 font-light text-base font-inter py-2">Github</button> </div> </div> </a> </div> 这是Javascript const changeProject = function(img, title, tech, link) { laptopImg.src = img; projectLink.innerHTML = title; projectTech.innerHTML = tech; projectLink.setAttribute("href", link); } const showGuessANumber = function(){ changeProject("guessANumber.png", "Guess a Number", "Tech: HTML, CSS, Javascript, Tailwindcss", "") } guessANumber.addEventListener('click', showGuessANumber); 有人知道为什么会发生这种情况吗？ 我尝试仅更改 href 属性，尽管一旦单击guessANumber 按钮，href 属性内的所有内容都会被删除。其他一切都很好。 我用projectLink代替projectTitle
在querySelector中：如何获取第一个和最后一个元素？ dom 中使用什么遍历顺序？
在 div 中，包含带有属性 move_id 的元素（不一定是第二代）。 首先，想要获取集合的第一个和最后一个元素的最直接方法 尝试通过以下方式获取第一个和最后一个： 变种
我想找到一个元素的第一个隐藏父元素以使其可见。 我尝试了这个但没有成功： $('input[name="toto"]').parents(":hidden:first").show(); 怎么会...
如何知道通过 style 属性设置的 CSS 何时应用于 DOM？
简单的问题，是否有一个事件或回调表明通过 JS“style”属性设置的 CSS 已应用并渲染到 DOM。 这是一个例子。 const elem = 文档。
有类似的问题，但所有答案都是仅将html元素交换为里面的内容。 我需要交换两个 div，其中有很多内容（表格、选择框、输入等...
我想根据 值显示和隐藏 元素。 我找到了一种方法来做到这一点，但我认为为了一个简单的目的而编写了这么多代码。什么是更好的方法？ 这是... 我想根据 值显示和隐藏 元素。 我找到了一种方法来做到这一点，但我认为为了一个简单的目的而编写了这么多代码。有什么更好的方法吗？ 这是我在没有使用任何框架的情况下编写的代码： <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" hidden> <script> let menu = document.getElementById("rank_current") let value = menu.value menu.addEventListener('change',function(){ value = menu.value for (i = 0; i < menu.childElementCount; i++) { if (menu.options[i].classList.contains("select-mythic") && menu.options[i].value == value) { document.getElementById("target").removeAttribute("hidden") } } }); </script> 您无需遍历选项并检查特定的类。您可以尝试以下方法： <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" style="display: none;"> <script> let menu = document.getElementById("rank_current"); let target = document.getElementById("target"); menu.addEventListener('change', function () { if (menu.value === "mythic" || menu.value === "mythical_honor") { target.style.display = "inline-block"; } else { target.style.display = "none"; } }); </script> 您走在正确的道路上。您可以使用 selectedIndex 属性。 这是文档。现在，当菜单检测到更改时，您可以获取所选项目并检查它是否包含类 select-mythic，如果包含，则从输入中删除隐藏属性。 <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" hidden> <script> const menu = document.getElementById("rank_current"); menu.addEventListener('change',function() { const selectedOption = menu.selectedIndex; if (menu.selectedIndex.classList.contains('select-mythic')) { document.getElementById("target").removeAttribute("hidden"); } } </script> 您可以显着缩短代码： document.getElementById("rank_current").addEventListener('change', ({target}) => document.getElementById("target").hidden = target.value.startsWith('mythic') ); <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" hidden>
有时，当网站未包含在移动视口内时，我会遇到此问题，我需要确定是什么导致宽度超出。 通常我通过隐藏的尝试和错误来做到这一点
如何更改特定文件的 TSConfig lib 或不使 lib 类型全局化
我正在使用react-native和react-native-web，并且使用html DOM元素而不是react本机组件编写了一些代码（而不是）。 为了正确输入它们，我... 我正在使用 react-native 和 react-native-web，并使用 html DOM 元素而不是 React Native 组件编写一些代码（<div/> 而不是 <View/>）。 为了正确输入它们，我将 'DOM' 添加到 tsconfig.compilerOptions.lib： "compilerOptions": { ... "lib": [ "ES6", "ES2021.String", "DOM" // <--- ], ... } 但是，我有很多全局类型可能会破坏我的代码并导致崩溃，例如 Image 可以在不从 react-native 导入的情况下使用： const SomeFC = () => { // no error here because Image type is global in DOM // but got crash in runtime return <Image /> } 我想覆盖特定文件的库设置，如下所示： // Here is the beginning for some file: // @ts-config lib: ['DOM'] 或者找到一种从全局中删除 DOM 类型并在必要时导入它们的方法： import {Image, HTMLDivElement} from 'html-dom' 或者至少选择我需要的全局类型，或者删除我不需要的全局类型。 你找到解决办法了吗？ 我找了很久但是好像没有答案。
有没有办法阻止shadow dom内的javascript访问其外部的DOM？
所以如果我有： js可以改变component_test_div中的文本 我可以阻止吗？
我需要从一个数字（例如1000）中减去几个容器的高度，同时这个数字必须是一个css值（在本例中为1000px）。 但是当我添加
我有一个动态生成 html 表的页面。我无法控制如何生成表格，但我可以在其中放入 JavaScript 代码。 我想做的是...
为什么 React 父级中输入框的更改将导致渲染未更改的子元素<VideoPlayer>
https://react.dev/learn/synchronizing-with-effects#step-2-specify-the-effect-dependencies 代码示例演示了为什么我们应该指定效果依赖项，否则它将在每次渲染后调用...
如何使用Javascript检测当前窗口是否位于另一个窗口后面
是否可以检测网络浏览器窗口当前是否被另一个窗口覆盖？ document.hidden 和 document.visibilityState 仅在切换选项卡或整个
我有一个表单在提交时打开一个新窗口： 我想通过javascript访问新创建的窗口，而不需要手动生成唯一的名称... 我有一个表单在提交时打开一个新窗口： <form id="form-id" target="_blank"> 我想通过 javascript 访问新创建的窗口，无需手动生成目标的唯一名称，也无需采用其他方法来打开窗口。 似乎必须有一种简单的方法来做到这一点，但我找不到适合我的具体情况的方法。 我不是 100% 确定这适用于所有浏览器，但当 window.opener 或 target 上的 <a> 属性导致打开新窗口时，Firefox 似乎会设置 <form>。因此，您可以走另一个方向，从新窗口中找到原始窗口（假设您控制那里的代码；如果没有，那么我无法想象您可以对窗口引用做很多事情）。 当然，新窗口中的代码可以做的事情之一就是调用旧窗口中的函数，并传入其自己的 window 引用。 因此，具体而言，如果您有： <form action=whatever target=_blank> 在原来的页面上，那么新打开的窗口中最终出现的页面可以这样做： <head> <script> if (window.opener) { window.opener.announceWindow( window ); } </script> 假设 announceWindow() 是原始页面上的一个函数，可能类似于： function announceWindow( win ) { // do stuff with "win", a newly-opened window } 您可以使用名称来代替 _blank 为新窗口命名。 <form id="form-id" target="newName"> 然后你可以在 JS 中使用它： var newWindow = window.open(null, 'newName'); 添加@Pointy接受的答案： 到 2023 年，至少在 Chrome 中，当通过 <form target="_blank"> 打开窗口时，window.opener 在新窗口中未定义。 我必须将 rel="opener" 添加到打开表单中，之后，window.opener 被定义并且可以按照接受的答案的建议使用。 <form ... target="_blank" rel="opener">
我将不胜感激任何帮助。我想在每次背景颜色变暗时更改按钮的文本颜色。我一直在尝试以下代码的其他变体。我似乎无法理解
我需要你的帮助。我有一小段代码，我试图用它来实现以下逻辑 - 我有一个菜单列表。如果我有root角色，不要删除任何东西，但如果非root角色...