dom 相关问题

`document.createElement()` 和 `appendChild()` 在使用 VS 代码时没有给我预期的输出

我正在学习网络开发，刚开始学习DOM。现在我面临一个挑战，即当我在 VScode 中使用 document.createElement() 和 appendChild() 时，它不起作用。但是当...

即使在页面加载后使用 ```document.getElementById()``` 在反应中也无法获取元素并不断给出错误？

我正在尝试通过天气复选框获取用户输入，用户是否希望从网站获取电子邮件以获取新优惠和更新，但是当我定义元素时它一直给我错误

Chrome [违规]“更改”处理程序耗时 475 毫秒

我有下面的代码。当我选中或取消选中复选框时，chrome 会发出违规警告。它给出控制台消息 [Violation] 'change' handler toked 475ms。奇怪的是它不会发生在......

“再玩一次！！”时如何调用 eventListener 中的函数？显示按钮

` pScore = 0; c分数=0； 领带= 0； //用户界面。单击播放时使 R.P.S 按钮出现 const startGame= () => { intro = document.querySelector('.intro'); playBtn = 文件。

Chrome 停止运行 javascript，控制台显示 [违规]“更改”处理程序耗时 475 毫秒

我有下面的代码。当我选中或取消选中复选框时，chrome 会停止执行 Javascript。它给出控制台消息 [Violation] 'change' handler toked 475ms。 我试过改进

Chrome 扩展和 DOM 访问

我想问一下开发人员访问没有特定类名或具有样式类（如（px-2、justify-center 和 flex-col）的 DOM 元素的原则

如何一次一行打印 xml 节点及其子节点的内容？

我需要提取 xml 文件并打印节点子节点内的数据，就好像它们是表中的行一样。我不能使用特定的标签名称，因为我将解析多个具有不同 ...

使用 dom 的 javascript 中的这个发布子代码有什么问题？

我有这个酒吧子代码 export const subscribe = (eventName, callback) => { pubsub.addEventListener(eventName, (e, data) => { 回调（e.detail）； }); }; export const 取消订阅 = (

使用Javascript检测可视区域的高度

我想使用 Javascript 检测可视区域的高度。我有这个高度为 550px 的 DIV，我想在浏览器上显示它。然而，这个高度可能会导致垂直滚动条

Cheeriojs 从选择/选项中检索所有文本和属性

我在网页中有以下代码，我必须从第二个选择中检索所有选项文本和属性以将它们放入变量中。 我这样试过，但没有用，没有

使用javascript创建一个带有标签的复选框

我正在使用 Javascript 构建一个 html，我试图在复选框的右侧放置一个标签。 我用 Javascript 代码尝试了不同的行顺序和不同的 appendChild 顺序，但我从来没有...

防止悬停时清空日期输入字段

我正在进行 A/B 测试，我需要将输入文本转换为日期。我创建了一个函数来仅在悬停时执行此转换，因此在提交 fo 时不会引起任何问题...

为什么我在使用 Chrome 中的自动翻译功能时会出现 DOMException？

我一直在使用 react-app。我做了一个登记表，但我无法解决问题。问题是如果您使用 Chrome 韩语自动在用户名输入字段中输入文本

在 React DOM 中如何实现这个 html.style.overflow = "scroll"; ？问题是我无法定位 html

` 常量滚动 = (e) => { | A 列 | B 栏 | | ------ | ------ | |单元格 1 |单元格 2 | |单元格 3 |单元格 4 | `var currentDiv = e.target;` `var nextDiv = currentDiv;` `而（当前...

innerHTML为什么要追加逗号

变量表 = ""; var example_array = []; 功能平板...</desc> <question vote="3"> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;media/js/jquery.js&#34;&gt;&lt;/script&gt; &lt;script&gt; var table = &#34;&#34;; var example_array = []; function tablething() { index = document.getElementById(&#34;location&#34;).value; value = document.getElementById(&#34;input_value&#34;).value; addRow(index,value); } function addRow(index,value){ var rowBeg = &#34;&lt;tr&gt;&lt;td&gt;&#34;; var rowEnd = &#34;&lt;/td&gt;&lt;/tr&gt;&#34;; value = rowBeg + value + rowEnd; example_array.splice(index,0,value); console.log(example_array); table.innerHTML = example_array; console.log(table.innerHTML); } $( document ).ready(function() { table = document.getElementById(&#34;example&#34;); example_array = new Array(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table id=&#34;example&#34;&gt; &lt;/table&gt; Location: &lt;input type=&#34;text&#34; id=&#34;location&#34;/&gt; Value: &lt;input type=&#34;text&#34; id=&#34;input_value&#34;/&gt; &lt;button onclick=&#34;tablething()&#34;&gt;Add&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>控制台中的结果是</p> <pre><code>Array [ &#34;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&#34; ] dyna_row.html:21 &#34;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&#34; dyna_row.html:23 Array [ &#34;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&#34;, &#34;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;&#34; ] dyna_row.html:21 &#34;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;,&#34; dyna_row.html:23 Array [ &#34;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&#34;, &#34;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;&#34;, &#34;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;&#34; ] dyna_row.html:21 &#34;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;,,&#34; dyna_row.html:23 Array [ &#34;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&#34;, &#34;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;&#34;, &#34;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;&#34;, &#34;&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;&#34; ] dyna_row.html:21 &#34;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;,,,&#34; </code></pre> <p>我的疑问是</p> <ol> <li><p>为什么每次调用方法 addRow 时这段代码都会在 innerHTML 的末尾添加一个逗号？</p></li> <li><p>example_array.join("") 似乎实现了我打算做的事情，但是 toString 方法是否也没有返回与 join 方法相同的内容？</p></li> </ol> </question> <answer tick="true" vote="10"> <p>当数组转换为字符串时，它会在值之间添加逗号。</p> <p>这将在值之间使用空格</p> <pre><code>table.innerHTML = example_array.join(&#34; &#34;); </code></pre> </answer> <answer tick="false" vote="0"> <p>请用<pre><code>innerhtml</code></pre>代码帮助我解决这个问题；逗号添加在代码的开头。</p> <pre><code>My name is Audi My id number is 1 My modify is outcome My color is Black ,My name is Mehran My id number is 2 My modify is Suzuki My color is Mehroon ,My name is Alto My id number is 3 My modify is Suzuki My color is Light Blue </code></pre> <p>标记：</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;UTF-8&#34;&gt; &lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;showname&#34;&gt;Hello&lt;/div&gt; &lt;script&gt; const newcars = [ { id: 1, name: &#34;Audi&#34;, modify: &#34;outcome&#34;, color: &#34;Black&#34; }, { id: 2, name: &#34;Mehran&#34;, modify: &#34;Suzuki&#34;, color: &#34;Mehroon&#34; }, { id: 3, name: &#34;Alto&#34;, modify: &#34;Suzuki&#34;, color: &#34;Light Blue&#34; }, ]; console.log(newcars); console.log(&#34;My name is&#34; + newcars[0].name); console.log(&#34;My name is&#34; + newcars[1].name); console.log(&#34;My name is&#34; + newcars[2].name); const usedcars = newcars.map((value, i) =&gt; { console.log(i, value.name); return `My name is ${value.name} &lt;br&gt; My id number is ${value.id + 0} &lt;br&gt; My modify is ${value.modify} &lt;br&gt; My color is ${value.color} &lt;br&gt;` + &#34;&lt;br&gt; &lt;br&gt;&#34; }) console.log(usedcars); document.getElementById(&#39;showname&#39;).innerHTML = usedcars; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; Console Here: Array(3) 0 : color : &#34;Black&#34; id : 1 modify : &#34;outcome&#34; name : &#34;Audi&#34; [[Prototype]] : Object 1 : {id: 2, name: &#39;Mehran&#39;, modify: &#39;Suzuki&#39;, color: &#39;Mehroon&#39;} 2 : {id: 3, name: &#39;Alto&#39;, modify: &#39;Suzuki&#39;, color: &#39;Light Blue&#39;} innerHTML : &#34;[object Object] [object Object] [object Object]&#34; length : 3 My name isAudi My name isMehran My name isAlto 0 &#39;Audi&#39; 1 &#39;Mehran&#39; 2 &#39;Alto&#39; </code></pre> </answer> </body></html>

按属性拉取元素

我只想从 10 个子元素中拉出具有 flex 显示的那些 document.querySelectorAll('.DOMDivCont[display="flex"]') 当我尝试这个时，它返回空数组

在 React js 中使用 setTimeOut 在 3 秒后显示文本

React JS 我需要在 2 秒后显示文本，它在控制台中有效但在 DOM 中无效 const items = document.getElementById("items"); const errorDisplay = () => {

无法在 React 中编辑 beforeunload 事件侦听器消息

我有一个反应应用程序，我想阻止用户刷新页面并询问他是否确定要刷新页面。 这是我的 useEffect 钩子： 使用效果（（）=> { const unloadCallback = ...

DOM多搜索大数据挂起

使用（HTML、JS）进行多次搜索，这将是一个嵌入了 JS、CSS 的 HTML 文件。 它在处理小数据时工作正常，但是当处理大量数据（呈现 4000 行）时它变得太慢了，不能……

函数没有按预期显示和更新 DOM 元素

在构建一个简单的银行应用程序作为 DOM 操作示例的过程中，我遇到了一个问题，我的非常简单的函数不会更新 HTML 片段，因此更新的 v...