dom 相关问题

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

有没有办法重新初始化 jQuery？

问题 JQuery 在导入时初始化。如果 window 和 window.document 存在（而模块不存在），JQuery 会保存引用并随后使用它们。有没有办法“重新初始化”...

javascript jquery dom

回答 2 投票 0

如何检查line-clamp是否启用？

我在跨度中有一个动态文本。我想使用线夹：2。在这种情况下，最多有。 2 行文本，其余部分被……截断。适用于：显示：-webkit-box； -webkit-line-c...

javascript html css dom

回答 4 投票 0

如何检测页面何时已使用 PDFJS 渲染？

一旦 PDF.JS 完成渲染每个页面，我想对该页面的内容进行查找/替换。我通过将以下内容放入 iFrame 的文档中来调用 PDF.JS：菲...</desc> <question vote="3"> <p>一旦 PDF.JS <strong>完成渲染</strong>每个页面，我想<strong>然后</strong>对该页面的内容进行查找/替换。</p> <p>我通过将以下内容放入 iFrame 的文档中来调用 PDF.JS：</p> <pre><code><script> fileId=0; function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null } var fileId = getURLParameter("fileId"); var DEFAULT_URL = '/viewer/fetchpdf.php?fileId='+fileId; </script> </code></pre> <p>然后从父框架设置 URL：</p> <pre><code>url = '/_third_party/pdfjs/web/viewer.html?fileId='+$(this).attr('href'); $("#iframeViewPdf").attr('src', url); </code></pre> <p>我注意到，当使用 PDF.JS 渲染 PDF 时，它会使用加载占位符初始化每个页面：</p> <pre><code><div id="pageContainer3" class="page" style="width: 991px; height: 1319px;"> <div class="loadingIcon"></div> </div> <div id="pageContainer4... </code></pre> <p>然后将 PDF 呈现为 html，例如</p> <pre><code><div id="pageContainer3" class="page" style="width: 991px; height: 1319px;"> <div class="canvasWrapper" style="width: 991px; height: 1319px;"> <canvas id="page46" width="991" height="1319" style="width: 991px; height: 1319px;"> </canvas> </div> <div class="textLayer" style="width: 991px; height: 1319px;"> ... </div> </div> <div id="pageContainer4... </code></pre> </question> <answer tick="false" vote="1"> <p>随着澄清，这是一个非常不同的故事。您没有直接使用 PDF.JS，而是使用它们的 Web 包装器。我认为你可以使用的一件事（我从来没有这样做过，现在只是阅读代码）是他们在 <pre><code>pageRendered</code></pre> 上发出 <pre><code>document</code></pre> 事件，所以如果你可以向它添加一个监听器，你应该没问题：</p> <pre><code>var frameDoc = document.getElementById('iframeViewPdf').contentWindow.document; frameDoc.addEventListener('pagerendered', function (evt) { console.log(evt); // see what goodies hide here! like page number etc } </code></pre> <p>（未测试，可能需要调整。）</p> </answer> <answer tick="false" vote="1"> <p>这就是我们检测页面渲染的方式。在设置监听器之前等待 iframe 内容加载很重要。</p> <pre><code>$( "#iframeViewPdf" ).load(function() { // wait for iframe to load var frameDoc = $("#iframeViewPdf").contents()[0]; frameDoc.addEventListener("pagerendered", function (evt) { console.log(evt.detail); }); }); </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>//Step 1: store a refer to the renderer var pageRendering = page.render(renderContext); //Step : hook into the pdf render complete event var completeCallback = pageRendering.internalRenderTask.callback; pageRendering.internalRenderTask.callback = function (error) { //Step 2: what you want to do before calling the complete method completeCallback.call(this, error); //Step 3: do some more stuff }; </code></pre> </answer> </body></html>

javascript jquery html dom pdf.js

回答 0 投票 0

PDF.JS - 检测页面何时呈现

javascript jquery html dom pdf.js

回答 0 投票 0

React 无法使用 e.target.getAttribute() 方法获取自定义属性

我正在尝试在我的changeHandler 中处理自定义属性。不幸的是，React 无法识别自定义的“data-index”属性。所有其他标准属性（例如名称、标签...

javascript reactjs typescript dom ecmascript-6

回答 2 投票 0

为什么 `mouseup` PreventDefault 对所选文本的影响不同？

调用 mouseupEvent.preventDefault() 通常不会阻止创建新的选择，除非您尝试在当前选择中创建选择。 Array.from(document.querySelectorA...

javascript html dom

回答 1 投票 0

如何修改粘贴的文本？

是否可以拦截和修改粘贴到文本区域的文本？如果无法拦截，粘贴后可以修改吗？（无需修改

jquery html dom

回答 4 投票 0

DOM 更改后无法通过 JavaScript 访问样式

当我的页面从包含数据的文件加载时，我会立即动态地将电影图像添加到我的 DOM 中，但是现在当我尝试访问它们的样式或更改它时，我会返回未定义的状态。我的容器...

javascript html css web dom

回答 1 投票 0

使用递归渲染虚拟树

给定一个类似于虚拟树的对象。您需要递归地遍历对象的所有分支并根据其内部层次结构渲染元素。我写了一个函数...

javascript recursion dom

回答 1 投票 0

带有数量输入的动态 HTML 表格中的总计计算问题

我在动态 HTML 表中遇到总计计算问题，其中可以添加、删除行，并且可以调整数量。当添加新行或行

javascript html dom

回答 1 投票 0

async 和 defer 也适用于脚本标签中的内联 JS 吗？

我理解涉及 JS 文件时的 defer 和 async，但是当我添加内联 js 时是否有相同的效果？如果是这样，我希望这两个例子得到相同的结果。 doStuff();...</desc> <question vote="1"> <p>当涉及 JS 文件时，我理解 <pre><code>defer</code></pre> 和 <pre><code>async</code></pre>，但是当我添加内联 js 时，效果是否相同？</p> <p>如果是这样，我希望这两个示例得到相同的结果。</p> <pre><code><script async > doStuff(); </script> </code></pre> <pre><code><script> setTimeout(doStuff, 0); </script> </code></pre> <p>我说得对吗？</p> </question> <answer tick="false" vote="0"> <p>取决于您在脚本标签中使用 <pre><code>async</code></pre> 和 <pre><code>defer</code></pre> 属性的位置。</p> <p><pre><code>defer</code></pre> 告诉浏览器不要等待脚本。相反，浏览器将继续处理 HTML，构建 DOM。换句话说，我说：</p> <ol> <li>带有 defer 的脚本永远不会阻塞页面。</li> <li>带有 defer 的脚本总是在 DOM 准备好时执行（但在 DOMContentLoaded 事件）。 <strong>注意</strong>：defer 属性仅适用于外部脚本。</li> </ol> <p><pre><code>async</code></pre> 与 <pre><code>defer</code></pre> 相同，但它也使脚本非阻塞。但它在行为上有重要的差异。</p> <ol> <li>浏览器不会阻止 <pre><code>async</code></pre> 脚本</li> <li>其他脚本不等待<pre><code>async</code></pre>脚本，异步脚本也不等待等他们。</li> <li><pre><code>DOMContentLoaded</code></pre> 和异步脚本不会互相等待</li> </ol> <p>换句话说，<pre><code>async</code></pre>脚本会加载到<pre><code>background</code></pre>中并在准备好后运行。 DOM 和其他脚本不会等待它们，它们也不会等待任何东西。</p> </answer> <answer tick="false" vote="0"> <p>对于自然属于 HTML 文档一部分的经典脚本（即，不是 <pre><code>type=module</code></pre> 脚本）（即，不通过 <pre><code>document.appendChild()</code></pre> 添加到 DOM），<pre><code>async</code></pre> 和 <pre><code>defer</code></pre> 都不执行任何操作。经典脚本始终由解析器同步运行。它们被认为是 HTML 标准中<a href="https://html.spec.whatwg.org/multipage/scripting.html#prepare-the-script-element" rel="nofollow noreferrer">此算法</a>最底部的“挂起的解析阻止脚本”，该脚本是为解析器遇到时总是立即运行的脚本保留的。</p> <p>模块脚本默认是<pre><code>defer</code></pre>，甚至是内联脚本。但是您可以通过添加 <pre><code>async</code></pre> 属性使它们异步并赋予它们通常的异步脚本语义。</p> </answer> </body></html>

javascript html asynchronous dom deferred

回答 0 投票 0

将值附加到 Javascript 中的输入字段

在这里，我尝试将一些文本附加到输入字段，但每次旧值都会被新值替换。超文本标记语言 JavaScript

javascript html dom

回答 4 投票 0

无法使用 JavaScript 从输入中删除图像

我在 HTML 和 JavaScript 下面有这段代码。有一段 PHP 代码正在成功将所有内容发送到数据库，无需显示。我在 HTML 和 JavaScript 下面有这段代码。有一段 PHP 代码正在成功将所有内容发送到数据库，无需显示。 <form action="" method="post" enctype="multipart/form-data"> <label for="titulo">Título:</label> <input type="text" id="titulo" name="titulo" required><br><br> <label for="descricao">Descrição:</label><br> <textarea id="descricao" name="descricao" required></textarea><br><br> <div id="preview"></div> <label for="imagens">Imagens:</label> <input type="file" id="imagens" name="imagens[]" multiple accept="image/*"> <small>(Você pode selecionar várias imagens segurando a tecla Ctrl)</small><br><br> <input type="submit" value="Cadastrar Anúncio"> </form> <script> (function() { function previewImages() { var input = document.getElementById("imagens"); var preview = document.getElementById("preview"); preview.innerHTML = ""; // Limpa a prévia de imagens anterior if (input.files && input.files.length > 0) { for (var i = 0; i < input.files.length; i++) { var reader = new FileReader(); reader.onload = function(e) { var imageContainer = document.createElement("div"); imageContainer.className = "image-container"; var image = document.createElement("img"); image.src = e.target.result; image.style.maxWidth = "100px"; // Define a largura máxima das miniaturas imageContainer.appendChild(image); var deleteButton = document.createElement("button"); deleteButton.innerText = "Deletar"; deleteButton.className = "delete-button"; deleteButton.addEventListener("click", function() { // Função para deletar a imagem imageContainer.parentNode.removeChild(imageContainer); // Desanexar a imagem do input file //input.value = ""; }); imageContainer.appendChild(deleteButton); preview.appendChild(imageContainer); }; reader.readAsDataURL(input.files[i]); } } } // Adicione o evento onchange ao campo de entrada de arquivo fora das tags HTML var imagensInput = document.getElementById("imagens"); imagensInput.onchange = previewImages; })(); </script> 问题是基于以下事实：当我单击图像缩略图下方出现的“删除”按钮时，我认为它实际上删除了缩略图并似乎删除了临时文件。这是已经显示的代码的独立部分，负责删除图像缩略图。 var deleteButton = document.createElement("button"); deleteButton.innerText = "Deletar"; deleteButton.className = "delete-button"; deleteButton.addEventListener("click", function() { // Função para deletar a imagem imageContainer.parentNode.removeChild(imageContainer); // Desanexar a imagem do input file //input.value = ""; }); imageContainer.appendChild(deleteButton); preview.appendChild(imageContainer); 但是，附加到输入的所有图像（为多个文件制作）都会发送到数据库，包括通过按钮删除的图像。正确的做法是保留通过按钮删除的图像并防止其发送到数据库。我已经阅读了其他线程中提供此解决方案的答案： reader.onload = function(e) { //rest of code omitted input.value = ""; }); 但这不起作用，因为当您插入这行代码时，所有图像都会被删除，而不是唯一选择的图像。如何解决？这是一个很长的示例，但我的想法是维护所选文件的数组（此处为 Map 对象）。可以从该数组中添加文件（用于添加一个或多个文件的文件选择器）或删除文件（您的删除按钮）。最后（在提交事件上）您可以创建一个 formData 对象并添加数组中所有表单字段和文件的值。让 JavaScript 通过以 formData 对象作为主体的获取请求来处理提交事件。 var images = new Map(); const preview = document.getElementById('preview'); document.forms.form01.addEventListener('submit', e => { e.preventDefault(); let data = new FormData(e.target); data.delete('images'); images.forEach((file, id) => { let blob = dataURItoBlob(file.src); data.append('images[]', blob, file.name); }); fetch('post.php', { method: 'POST', body: data }); }); document.forms.form01.images.addEventListener('input', e => { let input = e.target; [...input.files].forEach(file => { let reader = new FileReader(); reader.fileinfo = { name: file.name, lastModified: file.lastModified, size: file.size, type: file.type }; reader.addEventListener('load', e => { let file = e.target.fileinfo; file.src = e.target.result; images.set(`id${file.lastModified}${file.size}`, file); previewImages(); }); reader.readAsDataURL(file); }); input.value = ""; }); document.forms.form01.addEventListener('click', e => { switch (e.target.name) { case 'delete': images.delete(e.target.value); previewImages(); break; case 'browse': e.target.form.images.click(); break; } }); function previewImages() { // add images to the preview div if not already there images.forEach((file, id) => { if (!preview.querySelector(`#${id}`)) { let imageContainer = document.createElement("div"); imageContainer.className = "image-container"; imageContainer.id = id; let image = document.createElement("img"); image.src = file.src; image.style.maxWidth = "100px"; // Define a largura máxima das miniaturas imageContainer.appendChild(image); var deleteButton = document.createElement("button"); deleteButton.innerText = "Deletar"; deleteButton.name = "delete"; deleteButton.type = "button"; deleteButton.value = id; imageContainer.appendChild(deleteButton); preview.appendChild(imageContainer); } }); // remove images from preview if not in the Map object preview.querySelectorAll('.image-container').forEach(div => { if (!images.has(div.id)) { div.remove(); } }); } function dataURItoBlob(dataURI) { let byteString = atob(dataURI.split(',')[1]); let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; let ab = new ArrayBuffer(byteString.length); let ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], { type: mimeString }); } <form name="form01" action="" method="post" enctype="multipart/form-data"> <label for="titulo">Título:</label> <input type="text" id="titulo" name="titulo" required><br><br> <label for="descricao">Descrição:</label><br> <textarea id="descricao" name="descricao" required></textarea><br><br> <div id="preview"></div> <label>Imagens: <button type="button" name="browse">Browse…</button> <input type="file" name="images" multiple accept="image/*" style="display:none"> </label> <small>(Você pode selecionar várias imagens segurando a tecla Ctrl)</small><br><br> <input type="submit" value="Cadastrar Anúncio"> </form>

javascript html forms dom

回答 1 投票 0

JavaScript 未在 div 内创建标头

函数搜索() { var searchbar = document.getElementById("searchbar"); if (searchbar.value != null) { var searchResult = document.createElement("h2"); searchResult.value = "搜索...

javascript html dom

回答 1 投票 0

未捕获类型错误：无法访问属性“innerHTML”，容器为空

我有以下名为index.html的HTML文件：我有以下名为 index.html 的 HTML 文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Components test</title> <script src="/script.js"></script> </head> <body> <h1>All reviews:</h1> <div id="CK-reviews"></div> <h1>All users:</h1> <div id="CK-users"></div> <h1>Search Users</h1> <div id="CK-search"></div> </body> </html> 脚本文件名为 script.js: // Fetch calls for data const get = async (id, filters, url) => { const encodedFilters = btoa (JSON.stringify (filters)) const rawResponse = await fetch (url, {headers: { "id": id, "filters": encodedFilters }}) const response = await rawResponse.json() return response } const post = async (createData, url) => { const rawResponse = await fetch (url, {body: JSON.stringify (createData)}) const response = await rawResponse.json() return response } // Inject data into correct divs const injectReviews = async () => { const data = await get ("655643cd1c82275babfaf859", {title: "Thank you"}, "http://localhost:3000/api/reviews/add") const reviews = data.reviews const reviewsContainer = document.getElementById("CK-reviews") let injectHtml = "" for (let i = 0; i < reviews.length; i++) { injectHtml += ` <div class="CK-review"> <h1 class="CK-review-title">${reviews[i].title}</h1> <b>${reviews[i].stars}</b> <p class="CK-search-text">${reviews[i].text}</p> </div>` } reviewsContainer.innerHTML += injectHtml } const injectUser = async () => { const data = await get ("64e15d2329617fb0163de018", {}, "http://localhost:3000/api/user") const users = data.user const usersContainer = document.getElementById("CK-users") let injectHtml = "" for (let i = 0; i < users.length; i++) { injectHtml += ` <div class="CK-user"> <h1 class="CK-user-name">${users[i].name}</h1> </div>` } usersContainer.innerHTML += injectHtml } const injectSearch = () => { const searchContainer = document.getElementById("CK-search") searchContainer.innerHTML = `<input type="text" placeholder="Search for anyone"/>` } injectReviews() injectUser() injectSearch() 问题出在注入搜索功能中，我收到错误： Uncaught TypeError: can't access property "innerHTML", searchContainer is null injectSearch http://localhost:5500/script.js:70 <anonymous> http://localhost:5500/script.js:76 script.js:70:5 injectSearch http://localhost:5500/script.js:70 <anonymous> http://localhost:5500/script.js:76 发生什么事了？该元素确实存在。当尝试访问函数内的其他元素时，我收到相同的错误。所有其他功能都有效。可能是脚本在 dom 完成之前运行，请尝试在文档完全加载并准备好后运行脚本。 document.addEventListener("DOMContentLoaded", () => { injectReviews(); injectUser(); injectSearch(); });

javascript html dom innerhtml

回答 1 投票 0

将 HTMLCollection 的内容附加到 Body

我正在努力：将 HTML 字符串解析为 DOM 对象提取段落（本例中为 10 段）将提取的段落附加到正文我有以下代码： $(文档).ready(函数(){ ...

javascript html dom

回答 2 投票 0

鼠标悬停时突出显示 DOM 元素，就像检查一样

我们有一个书签，用户单击一个按钮，然后需要启动像 highligther 这样的检查。我们希望这是跨浏览器的。为此，我们需要在运行过程中检测 DOM 元素...

javascript html dom bookmarklet highlight

回答 2 投票 0

Javascript 我无法删除事件监听器

下面是我的代码的缩短版本。问题是我无法删除函数内的事件侦听器，这会触发一个简单的警报。有什么帮助吗？ const resizers = document.querySelectorAll(".