dom 相关问题

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

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 文件。其他

javascript dom document

回答 2 投票 0

如何使用 JavaScript 禁用 <script> 元素

我想禁用标签。这是我的代码，但它不起作用。 document.getElementsByTagName('script').disabled = true;</desc> <question vote="19"> <p>我想禁用 <pre><code><script></code></pre> 标签。这是我的代码，但它不起作用。</p> <pre><code>document.getElementsByTagName('script').disabled = true; </code></pre> </question> <answer tick="false" vote="17"> <p>事实上，可以通过更改“type”属性来禁用执行：</p> <pre><code><script type="text/javascript"> alert("I will alert you"); </script> <script type="application/json"> alert("And I will keep silent"); </script> <script> alert("I will alert too"); </script> </code></pre> <p><a href="http://jsfiddle.net/r6c0x0sc/">http://jsfiddle.net/r6c0x0sc/</a></p> </answer> <answer tick="true" vote="12"> <p>无法完成...脚本标签在 DOM 渲染器渲染后立即进行评估，因此在 wards 之后获取它的句柄不会有太大作用。</p> </answer> <answer tick="false" vote="1"> <p><strong>您可以</strong>禁用脚本元素。有几种方法：</p> <p>您可以指定<strong>不同的脚本类型</strong>，如其他列出的那样。这是对我有用的：</p> <pre><code>//loop through all script tags on page $('script').each(function(){ var scripthtml = $(this).html(); $(this).replaceWith('<script type="text/gzip">' + scripthtml + '</script>'); }); </code></pre> <p>所有官方脚本类型都可以在这里找到：<a href="http://www.iana.org/assignments/media-types/media-types.xhtml#text" rel="nofollow noreferrer">iana.org</a></p> <p>第二种方式只是一个<strong>简单的if语句</strong>:</p> <pre><code>//loop through all script tags on page $('script').each(function(){ var scripthtml = $(this).html(); $(this).replaceWith('<script>if (1==0){' + scripthtml + '}</script>'); }); </code></pre> <p>if 语句始终为 false，因此 script 标记内的任何内容都不会执行。然而，脚本标签内的所有函数（）都将有效。</p> <p>这是replaceWith的<strong>javascript等价</strong>：</p> <pre><code>//get script and html var yourscripttag = document.getElementById('yourscripttagID'); var scripthtml = 'if (1==0){' + yourscripttag.innerHTML + '}'; //remove script yourscripttag.remove(); //create new script element var newscript=document.createElement('script'); newscript.type='text/javascript'; //insert html in new script tag newscript.appendChild(document.createTextNode(scripthtml)); //insert new script tag into head document.getElementsByTagName('head').item(0).appendChild(newscript); </code></pre> </answer> <answer tick="false" vote="1"> <p>你可以破解它。使用另一个脚本来做......</p> <pre><code>node.parentNode.replaceChild( document.createComment(node.outerHTML.slice(1,-1) .replace(/--/g, '\\-\\-')), node); </code></pre> <p>其中节点是您的脚本节点/元素。替换双破折号是为了防止浏览器抱怨不兼容的注释标签。</p> <p>然后，如果您想启用它，只需执行相反的注释。替换并用 < and > 括起来。但您可能需要跟踪修改后的脚本节点，因为它成为注释后就不太可查询了。</p> </answer> <answer tick="false" vote="0"> <p>据我了解，您正在从数据库中获取一些 HTML 代码并将其添加到页面中。如果是这样，您可以编写一个服务器端函数，该函数将使用简单的正则表达式在脚本周围添加 HTML 注释，之后用户保存更改，您将需要删除注释。 </p> <p>如果您想在将 HTML 字符串添加到 Dom 之前添加它，您也可以在 Javascript 中执行此操作。</p> </answer> <answer tick="false" vote="0"> <p>有点 hacky，但是如果浏览器支持 JS 模块，您可以将 <pre><code>nomodule</code></pre> 属性 (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nomodule" rel="nofollow noreferrer">MDN</a>) 添加到脚本元素以阻止其运行。</p> <p>根据 <a href="https://caniuse.com/es6-module" rel="nofollow noreferrer">caniuse.com</a> 的说法，全球约 96% 用户使用的浏览器应该支持该功能，或者说 2018 年之后发布的绝大多数浏览器版本都支持该功能。</p> <p>这是一个例子：</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="true" data-babel-preset-react="false"> <div> <pre><code>// Add the `nomodule` attribute to #modify as soon as possible document.getElementById("modify").setAttribute("nomodule", "") console.log("Added nomodule to #modify, but it was too late...")</code></pre> <pre><code><script id="normal"> console.log(document.currentScript.id, "runs! nomodule =", document.currentScript.noModule); </script>  <script id="disabled" nomodule> console.log(document.currentScript.id, "runs! nomodule =", document.currentScript.noModule); </script>  <script id="modify"> console.log(document.currentScript.id, "runs! nomodule =", document.currentScript.noModule); </script></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="-1"> <p>删除 DOM 节点上的所有事件将阻止大多数 JavaScript 执行（此处为 <pre><code>document</code></pre>）：</p> <pre><code>for (key in getEventListeners(document)) { getEventListeners(document)[key].forEach(function(c) { c.remove() }) } </code></pre> </answer> </body></html>

javascript dom

回答 0 投票 0

如何向现有 HTML 5 元素添加“隐藏”属性，然后将其删除？

我有一个按钮，我希望能够根据需要在页面上显示和消失。我可以使用隐藏属性来隐藏按钮。我有一个按钮，我希望能够根据需要在页面上显示和消失。我可以使用隐藏属性来隐藏按钮。 <button type="button btn-primary" id="peekaboo-button" hidden>Peekaboo</button> 然后，我可以通过使用 DOM 中的removeAttribute 函数删除隐藏属性来显示该按钮。 document.getElementById("peekaboo-button").removeAttribute("hidden"); 我需要学习如何将隐藏属性添加回按钮元素以再次隐藏它。您可以使用 hidden 属性。 document.getElementById("peekaboo-button").hidden = true 这也意味着如果你想显示它，你可以将 hidden 设置为 false 像这样 button.hidden=true; 和 button.hidden=false; 隐藏 HTMLElement 属性hidden 是一个布尔值，如果元素隐藏则为true；否则该值为 false。这与使用 CSS 属性 display 来控制元素的可见性有很大不同。隐藏属性适用于所有演示模式，不应用于隐藏用户可直接访问的内容。 const peekaboo = document.getElementById("peekaboo-button") peekaboo.addEventListener("click",function() { const but = this; but.hidden=true setTimeout(function() { but.hidden=false },1000) }) <button type="button btn-primary" id="peekaboo-button">Peekaboo</button> 相同，但有类 const peekaboo = document.getElementById("peekaboo-button") peekaboo.addEventListener("click",function() { const but = this; but.classList.toggle("hide"); // or add setTimeout(function() { but.classList.toggle("hide") },1000) }) .hide { display:none } <button type="button btn-primary" id="peekaboo-button">Peekaboo</button> 脚本类型=“application/json”data-content-len=“82”data-sjs=“”>{“require”：[[“JSScheduler”，“makeSchedulerGlobalEntry”，null，[“null”，false，false ]]]}

javascript html dom

回答 3 投票 0

DOMDocument::loadHTML() 和 ::saveHTML() 怎么会失败？

根据文档，DOMDocument::loadHTML() 方法“成功时返回 true，失败时返回 false”。我的第一个问题是它怎么会失败？以及正确的 HTML 和非常

php dom

回答 1 投票 0

如何向选定文本添加标签并在之前/之后关闭/打开父级

尝试用 Javascript 创建 Richt 文本编辑器。我有一个标签福并想将其编辑为类似的内容 ...

javascript dom selection rich-text-editor

回答 1 投票 0

浏览器密码自动填充的 DOM 事件？

我正在构建的网站上有一个相当标准的用户名/密码输入框。密码框上面有一个包含“Password”的div，设置为display: none;对焦或

javascript dom

回答 6 投票 0

element.scrollTop 始终返回 0

我试图获取元素的scrollTop位置，但它总是返回0。我做错了什么，如何修复它？ JSFiddle var inner = document.getElementById('inner'); 窗户。

javascript dom

回答 5 投票 0

如何从网页视图打开Android手机应用程序中的电话号码？

我有TMA（Telegram迷你应用程序），在卖家详细信息块上我有一个按钮，用户可以使用该按钮通过卖家号码拨打电话。问题：当用户单击电话号码按钮时...

html next.js dom telegram

回答 1 投票 0

使用模板字符串附加 HTML

有没有办法在 DOM 中使用模板文字附加 HTML，而不覆盖当前发布的内容？我有一个巨大的 HTML 块，我需要将其发布到正在创建的列表中，但...

javascript html dom template-literals

回答 3 投票 0

如何查看 Firebug 中附加到某个元素的所有事件处理程序？

是否可以使用 Firebug 或某些 Javascript 查看附加到 HTML 元素（例如）的事件处理程序？

javascript dom firebug

回答 2 投票 0

React 如何只更新 DOM 中需要更新的部分？

React 如何能够仅更新 DOM 中需要更新的部分（因为它们已更改），而不是重新渲染整个 DOM？据我了解，常规 HTML/Javascript 网络...

javascript reactjs dom rendering virtual-dom

回答 1 投票 0

如何将子部分添加到 HTML 文件中？

填充常规录音列表。对于此 TODO，您必须为 Billy 的一般录音数据组合新的和。与 TODO 4 不同，没有节或无序的 l... 填充常规录音列表。对于此 TODO，您必须为 Billy 的一般录音数据组装新的 <section> 和 <ul>。与 TODO 4 不同，用于录制的 section 中没有 unordered list 或 DOM，因此您也必须使用 jQuery 创建这些 elements。创建录音<section id="section-recordings">并将其添加到sidebar中评分最高的录音部分下方。如何才能通过 jQuery 实现这一目标？创建一个<ul id="list-recordings" class="list-recordings">，style，并将其添加到<section id="section-recordings">。为录音数组中的每个录音添加样式化的<li class="recording">。哪些lodash方法可以帮助您？为每个录音的 <div>、title、artist 和 release 添加单独的 year。根据他们在对象中的键给他们一个 class。将 CSS 样式规则添加到 css/site.css 文件以设置列表项的样式。这些样式规则是否适用于评分最高的列表和录音列表中的列表项目？如何通过 CSS selectors/rules 和 jQuery 实现这一目标？生成的HTML应该看起来像这样： <section id="section-recordings"> <ul id="list-recordings" class="list-recordings"> <li class="recording"> <div class="title">Title: Eastern Rebellion</div> <div class="artist">Artist: Cedar Walton</div> <div class="release">Release: Timeless</div> <div class="year">Year: 1976</div> </li>  </ul> </section> 但是，我的HTML文件看起来像这样： <div id="sidebar" class="sidebar"> <div id="image-container-billy" class="image-container"> <img id="image-billy" src="images/billy/billy-0.jpg" i="0" width="25%" class="image" /> </div> <section id="section-top-rated" class="recordings"> <header id="header-top-rated" class="header-recordings"> Top Rated </header> <ul id="list-top-rated" class="list-recordings"></ul> <li>Voice in the Night</li> <li>The Shape of Jazz to Come</li> <li>Like Sonny</li> <li>Go</li> <li>The Water Is Wide</li> <section id="section-recordings"> <ul id="list-recordings" class="list-recordings"></ul> <div class="title">Eastern Rebellion</div> <div class="artist">Cedar Walton</div> <div class="release">Timeless</div> <div class="year">1976</div> <div class="title">Soul Food</div> <div class="artist">Bobby Timmons</div> <div class="release">Prestige</div> <div class="year">1966</div> <div class="title">A Swingin' Affair</div> <div class="artist">Dexter Gordon</div> <div class="release">Blue Note</div> <div class="year">1962</div> <div class="title">Rejoice</div> <div class="artist">Pharoah Sanders</div> <div class="release">Theresa</div> <div class="year">1981</div> </section> </section> </div> 这是 code 文件中我的 JS 的开始位置： const onReady = data => { // YOUR CODE BELOW HERE // $('#section-bio').css('color', 'brown'); $('#section-quotes').css('color', 'blue'); /* eslint-enable */ // TO DO 4 //// const topRated = data.discography.topRated; let newSection = document.createElement('section'); topRated.forEach(recording => { $('#section-top-rated').append(`<li>${recording.title}</li>`); //let topR = $('#section-top-rated').append(`<li>${recording.title}</li>` ); }); const recordings = data.discography.recordings; $(`<section id="section-recordings"></section>`).appendTo( '#section-top-rated' ); //$(`<ul id="list-recordings" class="list-recordings"></ul>`).appendTo('#section-recordings') //$(`<li class="recording></li>`).appendTo('#list-recordings').appendTo('#list-recordings') $('#list-recordings').append(`<li class="recording></li>`); $(`#section-recordings`).append( `<ul id="list-recordings" class="list-recordings"></ul>` ); //$('#list-recordings').append(`<li class="recording></li>`) recordings.forEach(element => { $(`<li class="recording"></li>`); $('#section-recordings').append( `<div class="title">${element.title}</div>` ); $('#section-recordings').append( `<div class="artist">${element.artist}</div>` ); $('#section-recordings').append( `<div class="release">${element.release}</div>` ); $('#section-recordings').append( `<div class="year">${element.year}</div>` ); }); const uL = document.createElement( 'ul id="list-recordings" class="list-recordings"' ); uL.appendTo(`#section-recordings`); //let newSection = document.createElement('section'); //$(<section id="section-recordings"></section>) // const recordings = data.discography.recordings; //recordings.forEach(songs){ // } // YOUR CODE ABOVE HERE // }; 我尝试的所有内容都已用 // 标记注释掉。我一整天都被这个问题困扰了。我不知道为什么，但我的 <li></li> 列表没有显示，我觉得由于它们的缺失，这使得这个问题更难解决。我看不到它在哪里，所以我不知道如何移动它。顺便说一句，实际的 data.discography.recordings 引用了 array of objects。任何程度的帮助都会有所帮助，即使只是鼓励的话。为任何试图帮助我解决这个问题的人干杯。如果我至少能弄清楚为什么我找不到 <li class="recordings"></li> 那么这将是一个巨大的进步。我在你的code中发现了这些问题： Syntax错误。多次创建相同的<ul>。尝试使用简单的 JavaScript 的功能，这原本可以通过 jQuery 实现。您提供的HTML的输出与上述条件不符。因此，我创建了一个虚拟记录数组，并尝试使用 jQuery 和 loadash 来完成任务。为了便于理解，我还添加了注释。您可以根据自己的需要调整此解决方案。确保您有 installed 或添加了 CDN 和 loadash 中的 jQuery。 <div id="sidebar" class="sidebar"> <div id="image-container-billy" class="image-container"> <img id="image-billy" src="images/billy/billy-0.jpg" i="0" width="25%" class="image" alt="Img" /> </div> <section id="section-top-rated" class="recordings"> <header id="header-top-rated" class="header-recordings"> Top Rated </header> <ul id="list-top-rated" class="list-recordings"></ul> </section> </div> $(document).ready(() => { const dummyData = { discography: { topRated: [ { title: 'Voice in the Night' }, { title: 'The Shape of Jazz to Come' }, { title: 'Like Sonny' }, { title: 'Go' }, { title: 'The Water Is Wide' } ], recordings: [ { title: 'Eastern Rebellion', artist: 'Cedar Walton', release: 'Timeless', year: '1976' }, { title: 'Soul Food', artist: 'Bobby Timmons', release: 'Prestige', year: '1966' }, { title: "A Swingin' Affair", artist: 'Dexter Gordon', release: 'Blue Note', year: '1962' }, { title: 'Rejoice', artist: 'Pharoah Sanders', release: 'Theresa', year: '1981' } ] } }; const onReady = data => { const topRated = data.discography.topRated; // Add top rated recordings _.forEach(topRated, recording => { $('#list-top-rated').append(`<li>${recording.title}</li>`); }); // Create and append section for recordings const recordingsSection = $( '<section id="section-recordings"></section>' ); $('#section-top-rated').after(recordingsSection); // Create and style list for recordings const recordingsList = $( '<ul id="list-recordings" class="list-recordings"></ul>' ).css({ 'list-style': 'none', padding: '0', margin: '0' }); recordingsSection.append(recordingsList); // Add each recording to the list const recordings = data.discography.recordings; _.forEach(recordings, recording => { const listItem = $('<li class="recording"></li>'); recordingsList.append(listItem); // Add separate divs for title, artist, release, and year listItem.append(`<div class="title">${recording.title}</div>`); listItem.append(`<div class="artist">${recording.artist}</div>`); listItem.append(`<div class="release">${recording.release}</div>`); listItem.append(`<div class="year">${recording.year}</div>`); }); }; // Run onReady onReady(dummyData); });

javascript html jquery dom

回答 1 投票 0

如何通知 blazor(webassemble) 关于 js 所做的 DOM 更改？

我正在尝试减少渲染数千个跨度的非常重的组件的渲染计数。我无法应用虚拟化，因为跨度具有不同的大小。我正在尝试减少渲染数千个跨度的非常重的组件的渲染计数。我无法应用虚拟化，因为跨度具有不同的大小。 <div contenteditable="true"> @foreach (var item in els) { <span @key="@item.Key" class="@item.cssClass">@item.String</span> } </div> 我尝试用渲染跨度的组件替换跨度并且它可以工作，但初始渲染时间花费了太长的时间。我无法通过 js 完成所有操作并禁用重新渲染，因为根 div 可能包含一些其他 blazor 组件。我需要通过 JS 应用一些更改而不重新渲染，但有时会发生重新渲染并且渲染状态已损坏。我如何通知 blazor dom 的变化？或者也许我需要在渲染之前恢复 js 所做的所有更改？更改类型：修改span的textContent 在一定偏移处分割跨度将span添加到div中我需要使用类似 node.dispatchEvent(new Event('change')) 的东西吗？这里可能有什么问题吗？ Blazor 不提供内置机制来通知 .NET 运行时有关 JavaScript 所做的 DOM 更改，或将任意 JS 更改与 Blazor 应用程序状态同步。该框架不是为此设计的，通常不建议这样做。您可以做的是在完成 JavaScript 更改后使用 JSInterop 调用 C# .NET 方法。提供有关 .NET 运行时更改的信息，然后针对每种可能的更改类型执行以下操作（适用）：修改<span>内容：在els集合中找到正确的项目并更改其String属性值。在某个偏移处拆分 <span>：用具有正确 els 值的两个新项目替换 String 集合中的相应项目。将 <span> 添加到 <div>：将新项目添加到 els。在进行服务器端更改时，您可以覆盖组件的ShouldRender()方法并暂时禁用重新渲染，因为浏览器中的 DOM 已经是最新的。

javascript dom blazor blazor-webassembly

回答 1 投票 0

查找 DOM 上具有“id”属性的所有元素[重复]

简单。我想遍历 DOM 并找到所有具有 id 属性的元素。有人可以帮我写一个 js 和/或 jquery 脚本吗

javascript jquery dom tree-traversal

回答 2 投票 0

Uncaught 在 DOM 树中找不到 Livewire 组件

我使用 Dragablejs 为 OGSM 制作者制作目标列表，为此我从 Dragable 中获取信息并在我的 Livewire 组件中使用它来更新每个目标的 listorder 属性。但我...

dom laravel-livewire

回答 1 投票 0

当 DOM 元素的计算样式发生变化时触发事件？

是否有非轮询方法来监听元素计算样式的更改？这个幻想代码片段应该简洁地解释我的意思： var el = document.getElementById('doodad'); 埃尔.