dom 相关问题

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

如何在本机 JavaScript 中使用边距、填充、边框获取元素宽度/高度(无 jQuery)

寻找可靠的方法来计算元素的宽度/高度+边距-填充+边框仅使用原生JS并且是xbrowser(IE8+)

回答 2 投票 0

JS 操作 DOM,然后 CSS 在刷新时无法正确加载,即使缓存已禁用

问题 你好,我有一些 JS 可以在需要时操纵 DOM 显示/隐藏某些元素。当事件处理程序被触发时它可以完美地工作。问题是当我刷新页面时

回答 1 投票 0

模拟 :hover、:active 和 :focus 状态来测试样式

我正在为某个组件库构建重新样式以实施公司设计系统。我希望能够渲染组件的样式,就像它们悬停/按下/聚焦一样,以便能够...

回答 1 投票 0

Firefox 扩展是为每个选项卡运行一次,还是在打开时运行一次?

Firefox 扩展是为每个选项卡运行一次,还是在打开时运行一次?这意味着当您打开 Firefox 时,它会运行并继续运行吗?这将允许人们从一页中获取信息并且

回答 1 投票 0

iOS Safari 在输入焦点上覆盖 100vh:在 DOM 下面注入空白空间

在 iOS Safari 上选择输入字段时,将在 DOM 外部、HTML 标签下方注入大约 ≈150px 在上面的屏幕截图中,绿色边框已应用于 HTML 元素 - 并且...

回答 4 投票 0

尽管表格容器高度固定,但表格行仍占用额外空间(超出设定高度)

几天以来我一直在项目中调试这个问题。整个调试过程让我非常痛苦。您会看到该错误是独立的,因此您可能没有意识到它有多么困难

回答 1 投票 0

轻松检测用户何时更改 DOM

是否可以轻松检测用户对 DOM 的操作? 当用户在任何现代浏览器中使用控制台时,他/她可以以开发人员不希望的方式操作 DOM。 我有一个我们...

回答 5 投票 0

防止 DOMDocument::loadHTML() 转换实体

我有一个字符串值,我正在尝试为其提取列表项。 我想提取文本和任何子节点,但是,DOMDocument 正在将实体转换为字符,而不是留下...

回答 4 投票 0

Chrome 扩展:在网页中的任何其他 JS 之前运行可访问窗口的自定义 JS

我正在编写Chrome扩展(manifest v3),主要目的是覆盖一些Window本机函数并在任何其他网页脚本可以访问它们之前替换它们。 我有 contentscript.js

回答 1 投票 0

如何向google表单添加事件监听器

我正在开发一个供我个人使用的扩展。它将存储我在谷歌表单中填写的信息。 我面临的问题是谷歌表单中的提交按钮实际上是一个带有

回答 1 投票 0

如何捕获Google表单提交按钮

我正在开发一个供我个人使用的扩展。它将存储我在谷歌表单中填写的信息。 我面临的问题是谷歌表单中的提交按钮实际上是一个带有

回答 1 投票 0

修复未封闭的 HTML 标签

我正在制作一些博客布局,我需要创建每篇文章的摘要(比如最新的 15 篇文章)以显示在主页上。现在我使用的内容已经由纺织品格式化为 html 标签

回答 4 投票 0

PHP DOMDocument 添加额外标签

我正在尝试解析文档并获取所有图像标签并更改不同的源。 $domDocument = new DOMDocument(); $domDocument->loadHTML($text); $imageNodeList = $

回答 6 投票 0

javascript 在 html 中显示变量

我正在尝试为我正在制作的表单制作金钱显示,现在我在网上找到了这个脚本:http://jsfiddle.net/QQGfc/ 我正在尝试将其实现到我的代码中像这样:(但这不是

回答 2 投票 0

在 Astro 页面中附加点击事件处理程序

在 Astro 页面的组件模板部分,我添加以下脚本: // src/pages/foo.astro document.addEventListener('DOMContentLoaded', function() { 常量 myEl...</desc> <question vote="0"> <p>在 Astro 页面的组件模板部分,我添加以下脚本:</p> <pre><code>// src/pages/foo.astro &lt;script&gt; document.addEventListener(&#39;DOMContentLoaded&#39;, function() { const myElement = document.getElementById(&#39;myId&#39;); if (myElement) { myElement.addEventListener(&#39;click&#39;, function() { console.log(&#39;Clicked on element with ID &#34;myId&#34;&#39;); // Add your desired functionality here }); } else { console.warn(&#39;Element with ID &#34;myId&#34; not found&#39;); } }); &lt;/script&gt; </code></pre> <p>这是一个通用脚本,将单击事件处理程序附加到 <pre><code>myId</code></pre> 元素(如果找到)。 请注意,在加载 DOM 内容时,通过 <pre><code>DOMContentLoaded</code></pre> 侦听器附加该事件,以确保在到期时创建 <pre><code>myId</code></pre>。</p> <p>如果我直接导航到该页面,我可以阅读 <pre><code>console.log()</code></pre> 发送的消息,具体取决于 <pre><code>myId</code></pre> 的存在。 但是,从另一个页面链接到 <pre><code>foo.astro</code></pre>:</p> <pre><code>// src/pages/bar.astro ... &lt;a href=&#34;/foo.astro&#34;&gt;Go to foo&lt;/a&gt; </code></pre> <p>然后,当我单击指向 <pre><code>foo</code></pre> 的链接时,<pre><code>DOMContentLoaded</code></pre> 事件不会被触发,并且我看不到任何控制台消息。</p> <p>当我寻找具有不同功能的元素时也会发生这种情况,例如<pre><code>document.querySelectorAll()</code></pre>。</p> <p>那么,在 Astro 中添加事件处理程序的正确方法是什么?<br/> 我是否应该<em>避免等待 DOM 加载</em>并期望 Astro 在正确的时间注入我的页面脚本? Astro 是如何决定的?</p> </question> <answer tick="false" vote="0"> <p>您使用 Astro <pre><code>ViewTransition</code></pre> 吗?如果是这样,那就可以解释行为上的差异。并且您应该收听 <a href="https://docs.astro.build/en/guides/view-transitions/#astropage-load" rel="nofollow noreferrer"><pre><code>astro:page-load</code></pre> 事件</a>。</p> <p>顺便说一句。 Astro 中没有任何属性的 <pre><code>&lt;script&gt;</code></pre> 标签将转换为 <pre><code>&lt;script type=&#34;module&#34;&gt;</code></pre>,因此您不需要任何 <pre><code>DOMContentLoaded</code></pre> 侦听器(请参阅 <a href="https://docs.astro.build/en/guides/client-side-scripts/" rel="nofollow noreferrer">Astro 文档</a>)。 JS 模块仅在 DOM 加载后执行。</p> </answer> </body></html>

回答 0 投票 0

切换大表上行的可见性非常慢

我通过 VB.NET 调用使用 对象生成了一个 HTML 表,该调用从数据库查询填充该表。 结果是一个像这样的表: 我通过 VB.NET 调用使用 <asp:GridView/> 对象生成了一个 HTML 表,该调用从数据库查询填充该表。 结果是这样的表格: <table id="myTab"> <tr><td>val1</td></tr> <tr><td>val2</td></tr> . . <tr><td>valN</td></tr> JavaScript 代码位于按钮上: function toggleHide(val) { tb = getElementById("myTab"); if ( tb != null ) { trows = tb.rows; for ( var i = 0; i< trows.length; i++ ) { if ( trows[i].cells[0].innertText == val ) { trows[i].style.display = 'none'; } else { trows[i].style.display = ''; } } } return false; } 这对于较小的数据量来说效果很好,但一旦数据量超过 100,它就会停止处理/崩溃,使页面空白。 我知道像这样重复访问 DOM 可能会很慢。有没有其他更快的方法? 如果单元格内的值事先已知且有限,@C3roe 的评论是最好的解决方案。 否则,如果您正在寻找任何文本的动态内容,请尝试以下操作: 在内容生成期间将单元格的内容添加为row的数据属性。 向页面添加动态样式以隐藏包含给定文本的单元格: 'tr[data-txt*="'+txt+'"]{ display: none; }' 完整示例和相关 fiddle 10.000 行。尝试一下您想要的任何尺寸: function initDemoData(limit=1000){ var fragment = document.createDocumentFragment(); var thetable=document.createElement('table'); for (var i=0;i<limit;i++){ var tr=document.createElement('tr'); var td=document.createElement('td'); var txt = ((i%2==0)?"some text ":"other ")+i; tr.setAttribute('data-txt',txt); td.innerText=txt; tr.appendChild(td); thetable.appendChild(tr); } fragment.appendChild(thetable); document.getElementById('container').appendChild(fragment); } function searchHandler(){ if (window.searchTimeout){ window.clearTimeout(window.searchTimeout); } window.searchTimeout=window.setTimeout(function(){ //to avoid rapid filtering as you type var txt = document.getElementById('filterTxt').value; var stylesheet=document.getElementById('dynamicStyle'); if (stylesheet){ stylesheet.remove(); } stylesheet=document.createElement('style'); stylesheet.setAttribute('id','dynamicStyle'); stylesheet.appendChild(document.createTextNode('tr[data-txt*="'+txt+'"]{ display: none; }')); //E[foo*=something] Element where foo attribute CONTAINS something document.body.appendChild(stylesheet); },500); } document.getElementById('filterTxt').addEventListener('input',searchHandler); initDemoData(10000); //do your tests by changing this value 应该不会那么慢。我怀疑每次单击按钮都会迭代表的all行。这效率不太高。 第一:您可以使用事件委托使处理更加高效。 第二:使用CSS类进行隐藏。 第三:尝试将行的迭代次数限制到最少(例如,通过使用 querySelectorAll 和更精确的 css 选择器)。 这是考虑到上述情况的一些场景的示例。 document.addEventListener(`click`, handle); createDemoTable(); function handle(evt) { const rowClicked = evt.target.closest(`tr`); const hideByValue = evt.target.dataset.value; // hide with explicit cell value if (hideByValue) { const allRows = document.querySelectorAll(`#myTable tr:not(.hidden) td`); // Array.find iterates until found, so may be more efficient const cellFound = [...allRows] .find(cell => cell.textContent === hideByValue); if (cellFound) { const row = cellFound.closest(`tr`); row.scrollIntoView(); row.classList.add(`hidden`); } return; } // hide by clicking on a row if (rowClicked) { return rowClicked.classList.add(`hidden`); } // hide even rows if (evt.target.id === `hideEven`) { const rows = document.querySelectorAll(`#myTable tr`); return rows.forEach((row, i) => row.classList[(i + 1) % 2 === 0 ? `add` : `remove`](`hidden`) ); } // hide odd rows if (evt.target.id === `hideOdd`) { const rows = document.querySelectorAll(`#myTable tr`); return rows.forEach((row, i) => row.classList[(i + 1) % 2 !== 0 ? `add` : `remove`](`hidden`) ); } // show all if (evt.target.id === `showAll`) { return document.querySelectorAll(`#myTable tr.hidden`) .forEach(row => row.classList.remove(`hidden`) ); } } function createDemoTable() { const table = Object.assign( document.createElement(`table`), {id: `myTable`} ); for (let i=0; i<500; i+=1) { const row = Object.assign(document.createElement(`tr`)); row.append( Object.assign(document.createElement(`td`), {textContent: `row ${i+1}`}) ); table.append(row); } document.body.append(table); } #myTable { tr.hidden { display: none; } tr { cursor: pointer; } tr:hover:after { content: 'remove this row'; position: absolute; margin-left: -0.5rem; display: inline-block; padding: 3px; background-color: white; color: red; border: 1px solid #c0c0c0; } } <button id="hideEven">Hide even rows</button> <button id="hideOdd">Hide odd rows</button> <button id="showAll">Show all rows</button> <button data-value="row 42">Hide "row 42"</button> <button data-value="row 499">Hide "row 499"</button> 您可以使用 querySelectorAll() 首先获取所有表行,这将减少对 DOM 的调用并使代码更快。 function toggleHide(val) { var tb = document.getElementById("myTab"); if (tb !== null) { var trows = tb.querySelectorAll('tr'); // Use querySelectorAll to select all rows at once var rowCount = trows.length; // Cache the table rows to avoid repeated DOM access for (var i = 0; i < rowCount; i++) { var rowText = trows[i].cells[0].innerText || trows[i].cells[0].textContent; // Get text content, handling both innerText and textContent // Check if the row matches the value we want to hide or show if (rowText === val) { trows[i].style.display = 'none'; // Hide matching row } else { trows[i].style.display = ''; // Show all other rows } } } return false; }

回答 3 投票 0

通过Html输入更改变量值

我创建了一个变量并给它0 让变量= 0; 我想通过 html 输入更改变量值。 我该怎么办呢🤔

回答 1 投票 0

html脚本变量赋值

所以我有一个脚本块: var 总人口 = 0; 对于(xxxxx){ 总人口 = 总人口 + xxx } 所以我有一个脚本块: <script> var totalPopulation = 0; for(xxxxx){ totalPopulation = totalPopulation + xxx } </script> <tr> <input type="text" name="censusPop" value=totalPopulation/> <tr> 我对 JavaScript 还很陌生。但是有没有办法将脚本块中的变量值分配给 HTML 元素(例如输入类型)?我知道代码无法访问。 希望它能帮助您了解 javascript 的工作原理 <html> <head> <script> var totalPopulation = 0; function addAndShowPopulation(population) { totalPopulation = totalPopulation + population; var input_tag = getTag('my_input_id'); input_tag.value = totalPopulation; } function startAdding() { addAndShowPopulation(10); setTimeout( function(){startAdding();},1000); } function getTag(id) { return document.getElementById(id); } </script> </head> <body onload="startAdding();"> <div> <input type="text" id="my_input_id" name="censusPop" value="" placeholder="Total Population"/> </div> </body> </html> 是的,您只需为输入提供一个 id,例如“id = my_input_id”; 然后,在 javascript 中,只需编写: $("my_input_id").value=totalPopulation; 这就是 ajax 的工作原理:查找 html 元素 id 并使用 javascript 值动态填充它们。 请注意,html 在 JS 之前读取。如果不是,$("my_input_id") 将返回 Null 更重要的是,你需要做这样的事情: <tr> <td> <input type="text" id="censusPop" name="censusPop" value=""/> <td> <tr> <!-- Other stuff --> <script> var totalPopulation = 10; // or for loop, or whatever here. var censusText = document.getElementById('censusPop'); censusText.value = totalPopulation; </script> </body> HTML 和 JavaScript 可以交互,但不能直接交互。最好的办法是使用 <script> 标签来设置更新浏览器 DOM 的代码。通过将 <script> 标签放在 HTML 后面(通常位于 <body> 标签的底部),您可以让浏览器有机会在您实际尝试使用元素之前创建它们。 另外注意:<tr>标签应该包含<td>标签,这是行和列的区别。 如果你需要进行多个 DOM 操作,我建议使用 jQuery 是正确的方法。 <tr> <input id="censusPop" type="text" name"censusPop" value=""/> </tr> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> // make sure, the code is executed when the DOM is ready $(function () { // grab the input element by its ID var $input = $('#censusPop'), totalPopulation = 0; // do your population calculations totalPopulation = ....; // assign the value to the input element $input.val(totalPopulation); }); </script>

回答 4 投票 0

JavaScript 在大表上切换行的可见性非常慢

我通过 VB.Net 调用使用 对象生成了一个 HTML 表,该调用从数据库查询填充该表。 结果是一个像这样的表: 我通过 VB.Net 调用使用 <asp:GridView/> 对象生成了一个 HTML 表,该调用从数据库查询填充该表。 结果是这样的表格: <table id="myTab"> <tr><td>val1</td></tr> <tr><td>val2</td></tr> . . <tr><td>valN</td></tr> JavaScript 代码位于按钮上: function toggleHide(val) { tb = getElementById("myTab"); if ( tb != null ) { trows = tb.rows; for ( var i = 0; i< trows.length; i++ ) { if ( trows[i].cells[0].innertText == val ) { trows[i].style.display = 'none'; } else { trows[i].style.display = ''; } } } return false; } 这对于较小的数据量来说效果很好,但一旦数据量超过 100,它就会停止处理/崩溃,使页面空白。 我知道像这样重复访问 DOM 可能会很慢。有没有其他更快的方法? 如果单元格内的值事先已知且有限,@C3roe 的评论是最好的解决方案。 否则,如果您正在寻找任何文本的动态内容,请尝试以下操作: 在内容生成期间将单元格的内容添加为row的数据属性。 向页面添加动态样式以隐藏包含给定文本的单元格: 'tr[data-txt*="'+txt+'"]{ display: none; }' 完整示例和相关 fiddle 10.000 行。尝试一下您想要的任何尺寸: function initDemoData(limit=1000){ var fragment = document.createDocumentFragment(); var thetable=document.createElement('table'); for (var i=0;i<limit;i++){ var tr=document.createElement('tr'); var td=document.createElement('td'); var txt = ((i%2==0)?"some text ":"other ")+i; tr.setAttribute('data-txt',txt); td.innerText=txt; tr.appendChild(td); thetable.appendChild(tr); } fragment.appendChild(thetable); document.getElementById('container').appendChild(fragment); } function searchHandler(){ if (window.searchTimeout){ window.clearTimeout(window.searchTimeout); } window.setTimeout(function(){ //to avoid rapid filtering as you type var txt = document.getElementById('filterTxt').value; var stylesheet=document.getElementById('dynamicStyle'); if (stylesheet){ stylesheet.remove(); } stylesheet=document.createElement('style'); stylesheet.setAttribute('id','dynamicStyle'); stylesheet.appendChild(document.createTextNode('tr[data-txt*="'+txt+'"]{ display: none; }')); //E[foo*=something] Element where foo attribute CONTAINS something document.body.appendChild(stylesheet); },500); } document.getElementById('filterTxt').addEventListener('input',searchHandler); initDemoData(10000); //do your tests by changing this value

回答 1 投票 0

简单的 JavaScript 数学没有意义

感觉自己又是新手了。我以为我已经摆脱了这些问题。下面是一个简单的脚本,有两个函数都不起作用。我缺少什么。任何帮助表示赞赏。 功能

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.