dom 相关问题

我有这个：一个易捷航空飞行员已经告诉游客，飞往罗德是一个“可怕的我有这个： <p> An <span class="item1">easyJet pilot</span> has told tourists that flying to <span class="item2">Rhodes</span> is a “terrible idea” just minutes before taking off, it has been reported, as <span class="item3">wildfires spread across Greece</span> journalist Gwyn Loader, who was on the flight to the island to report for BBC Wales Welsh-language news programme Newyddion, said <span class="item4">eight passengers</span> subsequently decided to disembark, including a young boy who was in tears. </p> 如果我选择一个跨度或跨度的一部分，我想删除跨度标记名并将所选文本附加到 parentNode 例如，在中，如果我选择“across”，我希望将其从跨度中删除并附加到 parentNodep。因此，它将创建 2 个跨度，因为“野火蔓延”将是一个跨度，而“希腊”将是一个新的跨度。我可以用这个来做到这一点： const element = document.querySelector('span'); element.outerHTML = element.innerHTML 但这会一一删除跨度元素，而不是我可以使用鼠标选择的元素。所以我尝试创建一个函数： function cleanup() { const selObj = window.getSelection(); const selRange = selObj.getRangeAt(0); selRange.outerHTML = selRange.innerHTML } 但是它不起作用，尽管我没有错误。问题出在选择上，但我不知道如何解决它。我错过了什么？非常感谢您的帮助，您需要为跨度添加事件监听器，然后替换如下内容。 document.querySelectorAll('span').forEach(sp => { sp.addEventListener('click', e => { e.target.outerHTML = e.target.innerHTML; }); }); 您当前方法的问题是您试图直接修改所选范围的outerHTML，这是不受支持的。相反，您应该使用范围对象的 extractContents() 方法将所选内容作为文档片段获取，从该片段中删除元素，然后将修改后的片段插入回文档中。 <p> An <span class="item1">easyJet pilot</span> has told tourists that flying to <span class="item2">Rhodes</span> is a “terrible idea” just minutes before taking off, it has been reported, as <span class="item3">wildfires spread across Greece</span> journalist Gwyn Loader, who was on the flight to the island to report for BBC Wales Welsh-language news programme Newyddion, said <span class="item4">eight passengers</span> subsequently decided to disembark, including a young boy who was in tears. </p> <script> function cleanup() { const selObj = window.getSelection(); const selRange = selObj.getRangeAt(0); // Create a new div element to hold the selected content const tempDiv = document.createElement('div'); tempDiv.appendChild(selRange.cloneContents()); // Remove span tags from the selected content const spanElements = tempDiv.querySelectorAll('span'); spanElements.forEach(span => { const textNode = document.createTextNode(span.textContent); span.parentNode.replaceChild(textNode, span); }); // Insert the modified content back into the document selRange.deleteContents(); selRange.insertNode(tempDiv); // Clear the selection selObj.removeAllRanges(); } // Example: Call the cleanup function when a span is clicked const spans = document.querySelectorAll('span'); spans.forEach(span => { span.addEventListener('click', cleanup); }); </script>

javascript dom parent-child

回答 2 投票 0

DOM 中的动态 JS 脚本加载

我一直在为我的网络课程 (Frl) 创建一个网站，我们被要求做一个类似银行的网站，所以我去做了。现在我有一个帐户页面，其中有

javascript web dom

回答 0 投票 0

在某些 td 上使用 Javascript 设置 colspan（没有任何 id）

我需要在现有网页上应用一些 CSS/JS。里面有楼上我需要在现有网页上应用一些 CSS/JS。里面有 <tr foodtablesupper> <td class="subheader" colspan="3"> Upper Floor </td> </tr> <tr foodchoice> <td class="dish-1"> Coleslaw </td> <td class="dish-2"> Porridge </td> </tr> <tr foodtablesupper> <td class="subheader" colspan="3"> Mezzanine Floor </td> </tr> 我需要将 colspan 更改为 4。如何处理 td 以及如何仅使用 vanilla-JS 更改 colspan 属性？实际上，您可以根据页面上下文决定使用什么选择器来解决您的 colspanned TD。它应该足够独特。我已经选择它在你的 TR 中，具有 foodtablesupper 属性。您的示例中没有足够的周围标记。更新根据作者的要求，编辑代码以解决可能的多个 TD。 document.querySelector('button').addEventListener('click', () => { document.querySelectorAll('tr[foodtablesupper] > td.subheader').forEach(td => td.setAttribute('colspan', 4)); }); td{ min-width:50px; background:#aaa; text-align:center; } table{ border-spacing: 3px; } td.subheader{ background: yellow; } <table> <tr foodtablesupper> <td class="subheader" colspan="3"> Upper Floor </td> </tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> </table> <hr/> <button>Make 4 colspan</button>

javascript dom

回答 1 投票 0

是否可以使用 mutationObserver 检测 DOM 中的新子节点并将 elementHandle 对象返回给 puppeteer？

使用 mutantObserver 检测 DOM 中的新节点，并通过 page.exposeFunction 在 puppetteer 中返回一个元素句柄。有谁知道是否有可能与 mutationObserver 一起工作，以便当...

node.js web-scraping dom puppeteer mutation-observers

回答 1 投票 0

如何将元素插入 HTML 输入字段？

我必须开发一个脚本（扩展内容脚本），它将被注入到任何包含表单的页面中。在该页面中，脚本必须插入一些输入字段，右对齐，可点击

javascript html css dom google-chrome-extension

回答 0 投票 0

用 BeautifulSoup4 替换 html 中的所有文本，同时保持原始 DOM 结构

我正在尝试使用 python 中的 Beutifulsoap4 替换 html 文档中的所有文本，包括其中包含文本和其他元素的元素。例如我想要text1 我正在尝试使用 python 中的 Beutifulsoap4 替换 html 文档中的所有文本，包括其中包含文本和其他元素的元素。例如我想让<div>text1<strong>text2</strong>text3</div>变成<div>text1_changed<strong>text2_changed</strong>text3_changed</div>. 我知道线程在所有 dom 元素中替换文本的更快方法？，但是这使用 Javascript，因此使用的函数在 python 中不可用。我想使用本机 python 实现相同的目标如果所有标签都包含标签或文本（rand_text 函数返回一个随机字符串），我有一个代码已经有效： from bs4 import BeautifulSoup as bs def randomize(html): soup = bs(html, features='html.parser') elements = soup.find_all() for el in elements: if el.string == None: pass else: replacement = rand_text(el.text) el.string.replace_with(replacement) return soup 然而，当元素的“string”属性为 None 时，这段代码在上面的示例中不起作用，因为它同时包含其他元素和文本。如果“string”属性为 None，我也尝试创建一个新元素，然后替换整个元素： from bs4 import BeautifulSoup as bs def anonymize2(html): soup = bs(html, features='html.parser') elements = soup.find_all() for el in elements: replacement = rand_text(el.text) if el.string: el.string.replace_with(replacement) else: new_el = soup.new_tag(el.name) new_el.attrs = el.attrs for sub_el in el.contents: new_el.append(sub_el) new_el.string = replacement parent = el.parent if parent: if new_el not in soup: soup.append(new_el) parent.replace_with(new_el) return soup 但是这个给出了错误“ValueError：当要替换的元素不是树的一部分时，无法用另一个元素替换一个元素。” 我想我收到了这个错误，因为算法已经替换了它试图替换的元素的父元素。我可以实施什么逻辑来解决这个问题？或者我怎样才能用不同的方法实现我最初的目标？可以遍历元素的contents，检查每一项是否为字符串，然后替换字符串。 from bs4 import BeautifulSoup as bs def randomize(html): soup = bs(html, features='html.parser') elements = soup.find_all() for el in elements: replacement = rand_text(el.text) if el.string: el.string.replace_with(replacement) else: for sub_el in el.contents: if isinstance(sub_el, str): sub_el.replace_with(rand_text(sub_el)) return soup # defined for testing purposes. Replace this with your own logic def rand_text(text): return text + "_changed" html = "<div>text1<strong>text2</strong>text3</div>" print(randomize(html)) 输出： <div>text1_changed<strong>text2_changed</strong>text3_changed</div>

python algorithm dom beautifulsoup

回答 1 投票 0

替换 javascript 中的元素而不是硬编码的 html

我想知道为什么当我尝试使用模板文字替换 javascript 中的 HTML 元素时，它不会在浏览器中呈现任何内容，但是当我保留 HTML 代码块时，它只是

javascript html dom

回答 0 投票 0

console.log(element.children) 在控制台中返回 undefined [重复]

let xxy = document.getElementsByClassName("is-flex-container columns-3 alignwide wp-block-post-template is-layout-flow"); 控制台日志（xxxy.children）；我正在编辑一个 WordPress 主题并且...

javascript dom

回答 0 投票 0

删除仍在运行的js代码

js 代码保持运行，即使元素从页面中删除。使用 react-js 编码时的第一个困难。因为页面没有重新加载所以初始脚本仍在运行，比如 setInterval,web...

javascript reactjs dom

回答 2 投票 0

带有单个“:not()”的多个连接属性选择器与 JavaScript 中带有多个“:not()”的多个单独属性选择器

我有 2 s 并尝试通过将 2 个连接的属性选择器设置为 1 :not() 和 2 个单独的属性选择器设置为 2 :not()s 来选择 s 分别使用 querySelectorAll() as

javascript html dom css-selectors selectors-api

回答 1 投票 0

如何输出从用户给定的 ID 元素开始的 DOM 元素列表？

有一个 JS 函数给我一个 DOM 树列表，我需要让用户输入 Id，这将是输出列表中的第一个，在打印之前列表中没有 DOM 对象。我不是真的...