dom 相关问题

如何从 Chrome 控制台更改嵌套在两个 iframe 内的元素的值？

我有一个元素位于一个 iframe 中，又位于另一个 iframe 中，因此是嵌套的。我想更改它的值，但我不能这样做，因为我认为 chrome 控制台找不到它。 文档.querySel...

当用户单击按钮时，如何存储可供以后使用的变量？

我正在做一个“石头、剪刀、布”项目。用户单击三个按钮（石头、布或剪刀）之一，然后计算机将进行选择，然后显示获胜者。有一次...

HTML/JS - 来自顶部：另一个未捕获的类型错误帖子

简单地说，我尝试了 async 和 defer 方法，以及移动 script 标签，试图让 dom 操作起作用。我认为这可能只是代码的问题，因为两者都没有解决问题。 ...

保存变量以在 JavaScript 中进行比较

我需要修改此代码，以便当同一首歌的名称在我的 html DOM 中显示 +10 分钟时，它会被自定义名称修改。 发生这种情况是因为我用来广播的软件...

BeautifulSoup 选择内部 HTML 包含多个单词的位置

有没有一种方法可以让我使用 BeautifulSoup 来获取包含多个单词的标签的文本？ 例如，如果我有 HTML： 你好 ... 有没有一种方法可以让我使用 BeautifulSoup 来获取包含多个单词的标签文本？ 例如，如果我有 HTML： <div> <div> <a>hello there</a> <a>hi</a> </div> <a>what's up</a> <a>stackoverflow</a> </div> ...我只想得到hello there what's up 您绝对可以使用 BeautifulSoup 从包含多个单词的 HTML 标签中提取文本。在您的示例中，您想要从具有多单词内容的标签中提取文本。以下是如何在 Python 中使用 BeautifulSoup 来实现这一点。 from bs4 import BeautifulSoup html = ''' <div> <div> <a>hello there</a> <a>hi</a> </div> <a>what's up</a> <a>stackoverflow</a> </div> ''' soup = BeautifulSoup(html, 'html.parser') target_tags = soup.find_all('a') # Find all <a> tags multi_word_texts = [] for tag in target_tags: if ' ' in tag.get_text(): # Check if the tag text contains a space (indicating multiple words) multi_word_texts.append(tag.get_text()) result = ' '.join(multi_word_texts) print(result)

通过 DOM 将文本添加到 JavaScript 中的现有文本元素

我试图弄清楚如何将文本添加到已经有文本节点的 p 标签或 h1 标签。 例如： var t = document.getElementById("p").textContent; var y = document.createTextNode("这只是...

待办事项列表中的 Java 脚本复选框

如何使用java脚本DOM修改待办事项列表编码。这意味着将复选框放入待办事项列表编码中。并在本地存储中检查后保存。 有java脚本做cod的制作教程...

React onWheel 处理程序无法阻止Default，因为它是被动事件侦听器

我正在尝试覆盖组件上的 Ctrl+滚动行为，但它无法处理错误 [Intervention] 由于目标被视为

为什么在 JavaScript 中动态生成的按钮上会多次调用函数？

我正在制作一个从 Google Places API 绘制搜索结果列表的应用程序，这使用户有机会使用 b...

ReactJs 16 中的自定义属性不起作用

我有一个按钮，我想将自定义属性传递给它。我使用了 data-*，但它没有显示在 DOM 中。 ... 我有一个按钮，我想将自定义属性传递给它。我使用了 data-*，但它没有显示在 DOM 中。 <div className="btn-group" id="dvConfigure"> <button id="btnConfigure" data-id="ppppppp" onClick={() => { onButtonClick("btnConfigure", "Configure"); setIsButtonClicked(true); }} > <div className="configureIcon"> <Icon name="home" size="small" /> </div> <span>{I18n.get("Home")}</span> </button> </div> 代码对应的CSS： .btn-group button { border: 0px; background-color: #efefef; /* Green background */ cursor: pointer; /* Pointer/hand icon */ width: 120px; /* Set a width if needed */ height: 135px; font-size: medium; font-weight: 500; border-radius: 0em; color: #434242; display: block; /* Make the buttons appear below each other */ } .btn-group__active { border: 0px; background-color: white; cursor: pointer; /* Pointer/hand icon */ width: 120px; /* Set a width if needed */ height: 135px; font-size: medium; font-weight: 500; border-radius: 0em; color: #434242; display: block; /* Make the buttons appear below each other */ } .btn-group__active button:hover { background-color: white; } .btn-group__active button:active { background-color: white; } .btn-group button:hover { background-color: white; } .btn-group button:active { background-color: white; } .btn-group button:focus { background-color: white; } 仅供参考，我正在使用 React 16.14.0 我尝试通过 .getAttribute() 方法获取属性，但我得到的是 null。我什至添加了一个事件监听器“DOMConetentLoaded”，以便 DOM 完全加载然后获取元素，如下所示： useEffect(() => { window.addEventListener("DOMContentLoaded", () => { var button = document.getElementById("btnConfigure"); console.log("loaded!!"); if (button && button.hasAttribute("data-buttonisClicked")) { let data = button.getAttribute("data-buttonisClicked"); console.log("data", data); } }); },[]); 我在一个函数中有上述逻辑，但我想测试一下，所以我添加了 useEffect 以方便使用。 我哪里出错了？ 您正在等待一个已加载的元素，因为 Javascript 运行 useEffect，这意味着 DOMContentLoaded 已加载，侦听该事件将不会运行其回调函数。只需删除监听器即可。 useEffect(() => { var button = document.getElementById("btnConfigure"); console.log("loaded!!"); if (button && button.hasAttribute("data-buttonisClicked")) { let data = button.getAttribute("data-buttonisClicked"); console.log("data", data); } },[]); 注意：这仅解释了为什么它不起作用，因为您可以进行条件渲染，因此始终建议使用refs代替或将类数组传递给元素本身

单个 MutationObserver 对象可以观察多个目标吗？

我想使用 MutationObserver 对象来观察某些 DOM 节点的更改。 文档给出了创建 MutationObserver 对象并将其注册到目标上的示例。 // 选择...

为什么我的异步功能无法正常工作

这是我的代码 让想法 = ['1', '2', '3', '4', '5'] 我 = 0; const alretMaker = async () => { 让间隔 = setInterval(函数 () { const div = document.createElement('div'...

在 chrome 开发工具/firebug 中保留 DOM 元素突出显示

有没有办法保留显示 DOM 元素的 boxmodel 属性（宽度、边距、填充、边框）的突出显示？我正在尝试检查窗口静止时元素的行为...

无法使用 JavaScript 将新项目添加到列表中

我目前正在解决与 JavaScript 相关的问题，特别是涉及动态向列表添加新项目。在我的项目中，我使用 .ejs templa 开发了一个基于 Web 的表单...

使用 jQuery on() 和 off() 切换事件监听器

我有一个 JavaScript 代码片段“代码片段 1 - 在用户触摸交互上播放通过 Ajax 加载的 html 视频”，它使用 on('touchstart') jQuery 方法附加事件侦听器...

在 JavaScript 中选择元素的最后一个子元素

我有一个 （保存到 Var1）并且希望能够将其最后一个 元素分配给变量。 我尝试执行以下操作： Lastli = var1.lastChild 不过，好像并没有…… 我有一个 <ol>（保存到 Var1）并且希望能够将其最后一个 <li> 元素分配给变量。 我尝试执行以下操作： Lastli = var1.lastChild 不过，好像没啥作用。 我想用 vanilla JS 来做这件事，而不是 jQuery。 您可以选择父元素并使用 lastChild 属性。 var container = document.getElementsByTagName("ul")[0]; var lastchild = container.lastChild; 或者您将所有项目选择到一个数组中并获取最后一个项目。这是一个简单的例子： var items = document.querySelectorAll("li"); var lastchild = items[items.length-1]; 您可以选择所有“li”并取最后一个。比如： var myLi = document.getElementsByTagName('li'); var lastLi = myLi[myLi.length-1]; 让我们考虑一个例子 <ul > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 要获取列表的最后一个子项，您可以简单地使用查询选择器 document.querySelector('li:last-child'); //this will return Milk which is the last child of the list document.querySelector('li:first-child') OR document.querySelector('li'); //both will give you the first child of the list 假设您想要第 n 个子级，您可以使用以下语法： document.querySelector('li:nth-child(2)'); //it will return the second child (here Tea) 如果您想要给定列表中的所有列表项： document.getElementsByTagName('li') //(Will return the whole list)here i am using tagname. It can be also applied on classname or element id 试试这个：.childNodes[childNodes.length - 1] ulReference.children[ulReference.children.length -1] 或 ulReference.childNodes[ulReference.childNodes.length -1]。两者的区别可以看这里 最简单的方法就是使用 document.querySelector 并使用 :last-child 来获取。 示例： const list = document.querySelector("li:last-child");

尝试自动化网站登录，使用 Chrome 扩展 MV3 和 vanilla Javascript 来显示带有占位符的用户名/密码登录

我在这个个人项目中通过在 MV3 下开发 Chrome 扩展来自动化跨两个不同网站的相对复杂的工作流程；这包括网站交互以及 Dropbox ...

HTML-Javascript：检查 div 是否为空并添加类名

我有以下 HTML 代码： 洛雷姆·伊普苏姆 我有以下 HTML 代码： <div class="columns"> <div class="block--num"> <h3>Lorem Ipsum</h3> <div id="test" class="block--num--inner">Field 1</div> </div> <div class="block--num"> <h3>Lorem Ipsum</h3> <div id="test" class="block--num--inner">Field 2</div> </div> <div class="block--num"> <h3>Lorem Ipsum</h3> <div id="test" class="block--num--inner">Field 3</div> </div> <div class="block--num"> <h3>Lorem Ipsum</h3> <div id="test" class="block--num--inner">Field 4</div> </div> </div> 现在，我需要一个 javascript 代码来解决以下问题： “block--num”的宽度为 25%，因此默认情况下所有四个块将显示在一行中。 但现在我的问题是： “block--num--inner”类在某些用例中可能为空，因此我需要检查是否有内容，然后向 div 的“block--num”添加类名，例如block-33、block-50等，这样我就可以在 CSS 中设置它们的宽度（例如宽度：33.333%、50% 等）。 另外，当“block--num--inner”为空时，整个“parent”-div“block--num”应该被隐藏。 不幸的是，我不知道如何用 javascript 解决这个问题，而且我不知道如何开始。我希望有人能在这里帮助我.. 要检查元素是否为空，您可以使用 var isDivEmpty = document.getElementById(_yourId).innerHTML === ""; 并为元素添加一个类 var elementById = document.getElementById(_yourId); elementById.classList.add("new-class"); 我想这可以帮助你

如何让 vscode 假设一个 node.js 上下文，这样它就不会假设 DOM API 可用？

默认情况下，在 VS Code 中编辑 JavaScript 文件时，它会假设当前上下文中存在 fetch 函数和相关类型。这对于设计为在

客户在 django 中注册订单和报价

`HTML： `{% csrf_token %} {{ 表单 |酥脆}} `HTML: `{% csrf_token %} {{ form | crispy }} <select id="id_cliente" name="cliente" onchange="update_cliente_data()"> <option value="">Selecione um cliente...</option> {% for cliente in clientes %} {% with cliente_data=cliente.to_json %} <option id="opcao" value="{{ cliente.id }}" data-cliente="{% for key, value in cliente_data.items %}'{{ key }}': '{{ value|escapejs }}',{% endfor %}">{{ cliente.nome }}</option> {% endwith %} {% endfor %} </select>` SCRIPT: `<script> // Chamar a função update_cliente_data() quando o DOM é carregado document.addEventListener('DOMContentLoaded', function() { console.log('DOM carregado.'); update_cliente_data(); }); function update_cliente_data() { var clienteSelect = document.getElementById('id_cliente'); if (clienteSelect) { var selectedIndex = clienteSelect.selectedIndex; if (selectedIndex !== -1) { var clienteOption = clienteSelect.options[selectedIndex]; //var clienteOpcao = document.getElementById('opcao'); var clienteDataAttr = clienteOption.getAttribute('data-cliente'); //var clienteDataAttr = clienteOpcao.getAttribute('data-cliente'); if (clienteDataAttr) { try { var clienteData = JSON.parse(clienteDataAttr); document.getElementById('id_nome').value = clienteData.nome; document.getElementById('id_cpf').value = clienteData.cpf; document.getElementById('id_email').value = clienteData.email; document.getElementById('id_rg').value = clienteData.rg; document.getElementById('id_cidade').value = clienteData.cidade; document.getElementById('id_telefone').value = clienteData.telefone; document.getElementById('id_numero').value = clienteData.numero; document.getElementById('id_rua').value = clienteData.rua; document.getElementById('id_bairro').value = clienteData.bairro; } catch (error) { console.error('Erro ao analisar os dados do cliente:', error); } } else { console.error('Atributo "data-cliente" não encontrado no elemento selecionado.'); } } else { console.error('Nenhum item selecionado no select.'); } } else { console.error('Elemento com ID "id_cliente" não encontrado no DOM.'); } } </script>`` 这对我来说似乎都是正确的，但是控制台找不到属性“data-cliente”，有人可以帮助我吗？这是一个大学项目，非常重要。顺便说一句，抱歉葡萄牙语评论和变量 您的 Django 模板存在一个小问题，导致“data-cliente”属性无法被正确识别。在 for 循环中，您正在序列化 JSON 对象，但没有正确关闭 JSON 对象。 这部分代码： data-cliente="{% for key, value in cliente_data.items %}'{{ key }}': '{{ value|escapejs }}',{% endfor %}" 正在输出这个（示例）： data-cliente="'nome': 'John Doe','cpf': '1234567890'," 问题是您的 JSON 对象格式不正确，并且缺少左括号 { 和右括号 }。 这是更正后的版本： data-cliente="{ {% for key, value in cliente_data.items %}'{{ key }}': '{{ value|escapejs }}',{% endfor %} }" 但是，由于最后一项末尾的尾随逗号，上述版本仍然可能会产生问题。为了避免这种情况，您可以以稍微不同的方式构建 JSON 对象。您应该考虑使用 Django 提供的 json_script 过滤器在 HTML 中输出安全的 JSON。 您可以这样做： {% with cliente_data=cliente.to_json %} <option id="opcao" value="{{ cliente.id }}" data-cliente="{{ cliente_data|json_script:'clienteData' }}">{{ cliente.nome }}</option> {% endwith %} 如果未加载，请确保在模板中加载 static 和 escapejs 过滤器： {% load static escapejs %} 最后，不要忘记在 JavaScript 代码中解析这个“data-cliente”属性值，因为它是一个字符串化的 JSON 对象： var clienteData = JSON.parse('{' + clienteDataAttr + '}'); 请确保您在 Django 模板中使用的 to_json 方法确实提供了字典，因为 json_script 需要它。 如果这有帮助或者您有任何其他问题，请告诉我！