dom 相关问题

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

这是我的代码 让想法 = ['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 需要它。 如果这有帮助或者您有任何其他问题，请告诉我！

无法在Javascript中动态设置文本

所以，我正在使用这个简单的 HTML/JS 文件。当我单击生成按钮时，我应该将规范化函数的输出显示为屏幕上的文本，但这种情况没有发生。可以

在 div 中的 insideHTML 的每次更改中添加事件监听器

只是出于好奇，我想每次向这样的 div 添加 html 代码时都会收到一个事件 常量 xData = 40; const container = document.querySelector('.container'); 容器.innerHTML = ` 只是出于好奇，我想每次向这样的 div 添加 html 代码时都会收到一个事件 const xData = 40; const container = document.querySelector('.container'); container.innerHTML = `<div class="container_Addons">${xData}</div>`; container.addEventListener('i dont know',function(){ console.log("you have just added some exotic stuff!"); }); for (i= 0; i<10;i++){ container.innerHTML += `<div class="container_Addons">${i}st ${xData}</div>`; }; 每次添加 html 代码时让侦听器工作 使用 MutationObserver 可以很容易地观察元素的 childList 变化： // Utility functions: const el = (sel, par) => (par ||document).querySelector(sel); const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop); const repeat = (n, cb) => [...Array(n)].forEach((_, i) => cb(i)); // Task: watch content changes: const xData = 40; const container = el('.container'); const observeInsertion = new MutationObserver((records, observer) => { records.forEach(rec => { rec.addedNodes.forEach(node => { console.log(`Added some exotic stuff: ${node.textContent}`); }) }); }); observeInsertion.observe(container, { childList: true }); repeat(10, i => { const elAddon = elNew("div", { className: "container_Addons", textContent: `${i}st ${xData}`, }); container.append(elAddon); }); <div class="container"></div> innerHTML 不断更改元素的完整内容，因此我选择了更合适的 Element.append() 方法 - 以便仅收到关于某个特定子插入的通知。您也可以使用 .innerHTML = 代替 .append()，但在这种情况下，您将不得不做额外的无用且复杂的工作来检测到底是 new 插入的内容。 您可以使用 MutationObserver 和 childList: true 来订阅特定的 DOM 更改： const content = document.querySelector('#content'); const observer = new MutationObserver((mutationsList, observer) => { console.log(`innerHTML updated, ${ mutationsList.length } mutation${ mutationsList.length > 1 ? 's' : '' }`); }); observer.observe(content, { childList: true }); for (let i = 0; i < 10; ++i){ content.innerHTML += `<p>New element ${ i }</p>`; }; setTimeout(() => { content.innerHTML += `<p>Added from setTimeout()</p>`; }) setTimeout(() => { content.innerHTML += `<p>Added after 5 seconds</p>`; }, 5000) #content { padding-bottom: 67px; } #content > p { display: flex; align-items: center; justify-content: center; height: 100px; margin: 0; background: cyan; font-family: monospace; font-size: 32px; } #content > p + p { margin: 8px 0 0; } <div id="content"> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> </div> 但是请注意，您的 MutationObserver 的回调不会为执行更新 .innerHTML 的每个语句调用（因为它们可能会导致单次绘制，就像上面示例中 for 内的那些一样） ），但你可以从mutationsList获取更新元素的列表。 但是，如果在不同时间点添加新元素（如setTimeout中的元素），则每次更新都会调用您的回调。

如何将CSS应用到React库中动态创建的div？

我遇到了 CSS 问题，我可以通过开发工具通过找到正确的 div 并直接应用样式来修复该问题，但我无法在代码中执行相同的操作。原因是我使用了 <

根据属性值查找 DOM 中的元素

你能告诉我是否有任何 DOM API 可以搜索具有给定属性名称和属性值的元素： 就像是： doc.findElementByAttribute("myAttribute", "aValue");

防止Vue中的DOM刷新

我正在尝试实现一个动画轮播，代码如下： 我正在尝试实现一个动画轮播，代码如下： <template> <div v-for="(slides, id)" v-if="id > middle_id - 2 || id < middle_id + 2"> <div :class="'slide'+id"><slide :key="id" :slide-data="slide" /></div> </div> </template> 幻灯片的数量是可变的，但只显示中间的 5 张。动画仅使用基于幻灯片编号的 css 动画。 如果我一次添加或删除一张幻灯片，则效果很好 - 现有的 dom 元素不会更改，只添加一张新幻灯片。但是，如果我在末尾添加一张幻灯片并同时从开头删除一张幻灯片，vue 似乎会重新渲染滑动窗口中的所有 dom 元素。 有没有办法保证在这个操作过程中，中间3张没有改变的slide不会在dom中更新？ Vue 3.2+ 在 Vue 3.2 及更高版本中，可以使用 v-memo 来完成 <div v-memo="[valueA, valueB]"> ... </div> 当组件重新渲染时，如果 valueA 和 valueB 保持不变，则该组件及其子组件的所有更新都将被跳过。 事实上，甚至 Virtual DOM VNode 创建也将被跳过，因为子组件的记忆副本-树可以重复使用。 https://vuejs.org/api/built-in-directives.html#v-memo 我在使用Vue实现轮播文本时遇到了类似的问题，我找到了有效解决该问题的解决方案。 Vue 在其源代码中采用了某些启发式方法来确定是否在不同场景下回收 DOM 元素。具体来说，Vue 在以下情况下不会回收 DOM 元素 删除单个节点，或者 添加单个节点，或者 节点的属性被修改。 就您而言，当您一步添加和删除幻灯片时就会出现问题。当您添加一张幻灯片，然后在下一步中删除另一张幻灯片时，Vue 不会触发 DOM 元素的重新渲染。 Vue 异步更新 DOM，这意味着对数据的多次修改将被打包为一次，并且 DOM 只会更新一次。为了确保添加和删除幻灯片被视为单独的步骤，我发现利用 await Vue.nextTick()（或 await this.$nextTick()）是一种有效的方法。 await Vue.nextTick() 表示在 DOM 更新之前永远不要执行该行下面的代码。 要实现此解决方案，您可以按照下面提供的示例代码进行操作： async function updateSlides() { // Add a new slide to the array this.arr.push({ ... }) // Wait for the DOM update, ensuring separate steps await this.$nextTick() // Remove the first slide from the array this.arr.splice(0, 1) } 通过遵循这种方法，您应该能够达到预期的结果并有效地解决问题。

为通过 Ajax 附加的视频元素初始化 jQuery 和 JavaScript

我正在使用ajax将视频元素附加到网页。添加新视频后，我注意到一些 JavaScript 和 jQuery 未初始化。 我需要工作 3 个代码片段

事件监听器在外部文件中设置后不起作用

当我尝试为创建的 DOM 元素设置事件侦听器，并将它们添加到元素列表中时，事件侦听器仍然存在于 JS 中，但是当我将它们添加到在 HTML 中创建的静态 DOM 元素时，他们不同意...

如何通过js创建多个元素

当我向右滚动表格时，我想冻结表格中的列。 我使用js静态完成了它，但是在这种情况下，是否有一种方法可以指示列数以获得以下样式...

如何在React中选择html元素？

我想选择主题值并根据 localStorage 值更改它以设置浅色/深色主题，我该如何在 React 中做到这一点？ 我知道我可以在组件中使用 Ref hook，但是如何选择 dom

选中复选框时删除文本

我正在尝试使用express和EJS作为中间件制作一个待办事项列表应用程序。它应该有一个任务列表，每个已添加的任务旁边都有一个复选框。任务完成后，您可以...

DOM滚动（touchmove）事件，如何找到哪个元素滚动了

这是有点做作的代码： 函数 h (evt) { if(evt.target.nodeName !=== 'POPUP') { evt.preventDefault() } } window.addEventListener('DOMMouseScroll', h, false) 窗户。