dom 相关问题

在 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) 窗户。

为什么 dom 和 dom.iterable 是分开的？

在 tsconfig.json 中，您可以定义其他库，为您提供 HTML 或 DOM“库”的类型（？我不知道正确的术语）。 我不明白为什么 dom 和 dom.iterable 是

如何在XPath中使用“not”？

我想写一些这样的东西： //a[不包含(@id, 'xx')] （意味着有“id”属性的所有链接不包含字符串“xx”） 我找不到正确的语法。

全局变量在 dom 中显示为 null [重复]

我正在尝试执行将第一个文本框的值复制到第二个文本框的简单任务 这是我的html 我正在尝试执行将第一个文本框的值复制到第二个文本框的简单任务 这是我的html <html> <head> <link rel="stylesheet" href="Style.css"> <script src="1.js"></script> </head> <body> textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br> textbox2: <input id="textbox2" type="text"> </body> </html> 这是我的js文件： const text1 = document.getElementById("textbox1"); const text2 = document.getElementById("textbox2"); function TextCopy() { text2.value = text1.value; } 我得到的错误是： 1.js:6 未捕获的类型错误：无法读取 null 的属性（读取“值”） 在文本复制 (1.js:6:25) 在 HTMLInputElement.onkeyup (1.html:7:73) 如果我在函数内声明text1和text2，我不会收到错误并且它可以正常工作，那么为什么当我将它们声明为全局变量时它不起作用？ 谢谢。 您的元素在脚本运行时不存在。这就是为什么人们将脚本文件放在正文的末尾，而不是放在头部。您还可以使用 defer 属性。 <script src="script.js" defer></script> 获取元素的速度比 HTML 渲染元素的速度快，这就是 JS 无法在 DOM 中找到它们的原因。将脚本移至 body 的末尾或将其包装在 DOM Ready 事件中： <html> <head> <link rel="stylesheet" href="Style.css"> </head> <body> textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br> textbox2: <input id="textbox2" type="text"> <script src="1.js"></script> </body> </html> window.addEventListener("DOMContentLoaded", (event) => { const text1 = document.getElementById("textbox1"); const text2 = document.getElementById("textbox2"); function TextCopy() { text2.value = text1.value; } }); 您的脚本在页面完全加载之前执行，为了强制 javascript 等待 DOM 完全加载，您必须在脚本标签中使用 defer 关键字 <html> <head> <link rel="stylesheet" href="Style.css"> <script src="1.js" defer></script> </head> <body> textbox1: <input id="textbox1" onkeyup="TextCopy()" type="text"> <br> textbox2: <input id="textbox2" type="text"> </body>

如何将这个数组数据打印到dom元素中

如何用 dom 元素打印这个嵌套数组 让概率= [{ 10：62， 25：40， 50：8， 100：5， 200：2， 300：1， 500：1 },{ ...