dom 相关问题

在 Astro 页面的组件模板部分，我添加以下脚本： // src/pages/foo.astro document.addEventListener('DOMContentLoaded', function() { 常量 myEl...</desc> <question vote="0"> <p>在 Astro 页面的组件模板部分，我添加以下脚本：</p> <pre><code>// src/pages/foo.astro <script> document.addEventListener('DOMContentLoaded', function() { const myElement = document.getElementById('myId'); if (myElement) { myElement.addEventListener('click', function() { console.log('Clicked on element with ID "myId"'); // Add your desired functionality here }); } else { console.warn('Element with ID "myId" not found'); } }); </script> </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 ... <a href="/foo.astro">Go to foo</a> </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><script></code></pre> 标签将转换为 <pre><code><script type="module"></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>

javascript dom event-handling dom-events astrojs

回答 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; }

javascript dom

回答 3 投票 0

通过Html输入更改变量值

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

javascript dom input

回答 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>  <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>

javascript dom

回答 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

javascript html css dom

回答 1 投票 0

简单的 JavaScript 数学没有意义

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

javascript dom addition

回答 1 投票 0

HTML2Canvas 和 Dom-to-Image 无法正确捕获滚动内容以进行 PDF 导出

我正在尝试使用 JavaScript 将网页的可见部分导出为 PDF。我的内容包括表格和图表等通常具有滚动视图的元素。我尝试同时使用 html2canvas ...

javascript dom jspdf html2canvas dom-to-image

回答 1 投票 0

ReferenceError：文档未定义（VS Code 中的 JavaScript）

我正在学习 JS。找到了一个很好的视频“JavaScript 编程 - 完整课程”，并卡在了我需要使用 DOM 的第二部分。我有 HTML 文档，我引用了 JS 文件。其他