dom 相关问题

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

被 javascript 困住了（初学者）

我刚刚开始学习 javascript，并且我被困在我的第一个实验室中。我的 HTML 部分可以工作，但 javascript 没有工作。起初我以为它没有链接javascript代码...

javascript html dom

回答 1 投票 0

JavaScript 初学者

我是 JavaScript 新手。我已经通过 Learning JavaScript (o'reilly) 完成了我的工作，但我只是想制作我的第一个 JavaScript。我认为最好是做我感兴趣的事情，因为它

javascript dom

回答 2 投票 0

我是 es6 javascript 新手

const name = document.getElementById('fname'); const Submit = document.getElementById('提交'); const out = document.getElementById('out'); const gname = 名称.值; // 问候函数常量...

javascript html dom

回答 2 投票 0

为什么react-datepicker不能滚动月份？

我的反应日期选择器由于某种原因无法滚动月份。否则工作得很好，可以选择任何日期，它只是月份名称附近的箭头键（在屏幕截图上突出显示）不执行任何操作。如果我

reactjs typescript dom

回答 1 投票 0

开放式和封闭式shadow DOM封装模式有什么区别？

我想为元素创建一个影子 DOM，这样我就可以显示 Chrome 扩展的元素，而不会受到页面样式的影响。当我查看 Element.createShadowRoo 的文档时...

javascript html dom shadow-dom

回答 2 投票 0

如何在加载内容之前从页面中删除 <script>

我在服务器上托管了一个页面，该页面将一小部分脚本注入到我的index.html页面（https://my.f5.com/manage/s/article/K13849），我想删除此脚本在它运行之前。简单...

javascript html dom

回答 1 投票 0

如何使用JavaScript获取点击事件中数组元素的索引

我正在开发一个电子应用程序，对于代码的这个特定部分，我有必要恢复当前元素的索引（点击时）。 HTML：我正在开发一个 Electron 应用程序，对于代码的这个特定部分，我有必要恢复当前元素的索引（单击时）。 HTML： <div> <input type="checkbox" class="optionBox"> Minimize to tray after 10 seconds <input type="checkbox" class="optionBox"> Always check day transition </div> JavaScript： modifierCheckboxes = document.querySelectorAll('.optionBox'); for (var i = 0; i < modifierCheckboxes.length; i++) { modifierCheckboxes[i].addEventListener('click', function (e) { bindModifierCheckBoxes(e); }); } function bindModifierCheckBoxes(e) { // I need the reference for modifierCheckboxes[i] here } 我试过这个： function bindModifierCheckBoxes(e){ var t=e.target; console.log(Array.prototype.indexOf.call(t.parentNode.childNodes,t)); } 它“关闭”了，但是当我单击第一个复选框时，我得到的索引为 1，而在第二个复选框中我得到的索引为 3。请不要使用外部库，只需纯 JavaScript。也许你可以将对象选择器转换为数组，然后你可以使用indexOf。 var checks = document.querySelectorAll('.optionBox'); checks.forEach(function(check){ check.addEventListener('click', checkIndex); }) function checkIndex(event){ console.log( Array.from(checks).indexOf(event.target) ); } 利用闭包： modifierCheckboxes = document.querySelectorAll('.optionBox'); modifierCheckboxes.forEach(function(checkbox, i) { checkbox.checked = customConf[i];; checkbox.addEventListener('click', function (e) { bindModifierCheckBoxes(e, i); }); }); function bindModifierCheckBoxes(e, index) { // index is passed inside the event listener function } 使用 .children 而不是 .childNodes ... .children 给出不包括文本节点的子元素列表在 HTML 中，当您很好地格式化源代码时，> 和 < 之间的文本节点（通常）不会影响页面的渲染 function bindModifierCheckBoxes(e) { var t=e.target; var checkboxes = t.parentNode.getElementsByClassName('optionBox'); console.log(Array.prototype.indexOf.call(checkboxes, t) + 1); } 这是一个小提琴： https://jsfiddle.net/7p3gsy75/ 另一种选择是给你的复选框 ID（这里我选择了蹩脚的）： <div> <input type="checkbox" id="cb1" class="optionBox"> Minimize to tray after 10 seconds <input type="checkbox" id="cb2" class="optionBox"> Always check day transition </div> 然后看e.target.id 您可以使用 change 代替 click: $('.optionBox').on('change', function() { $(this).each(function() { if (this.checked) { alert($(this).index()); } else { alert("unchecked"); } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <input type="checkbox" class="optionBox"> Minimize to tray after 10 seconds <input type="checkbox" class="optionBox"> Always check day transition </div> 将modifierCheckboxed[i]传递给您的bindModifierCheckBoxes函数。因此，您发送当前复选框的参考，然后您可以用它做您想做的事情。 let boxes = document.querySelectorAll('.optionBox'); for(var i=0; i < boxes.length; i++){ boxes[i].id= i; boxes.addEventListener("click", checkId); } function checkId(evt){ console.log(evt.currentTarget.id); } 您可以将变量附加到每个数组元素并使用事件参数获取它 evt.currentTarget.myVariable

javascript html dom

回答 8 投票 0

如何阻止空 iframe 在注入时触发加载事件？

我使用一个空框架来处理伪异步表单提交。对于那些不熟悉该技术的人，其想法是在表单的目标中引用框架的名称属性

javascript html jquery dom jquery-events

回答 3 投票 0

未捕获的 DOMException：无法在“CommandLineAPI”上执行“$”：不是有效的选择器

我正在使用 selenium 为我的网页编写自动化 UI 测试。我正在测试的网页上有一个元素： << input type="checkbox" id="screening_questions[0].multiple_choice[0]-

selenium dom selenium-webdriver xpath css-selectors

回答 2 投票 0

向空 tbody 元素添加行

我有这样的桌子：某事某事2 一些... 我有这样的桌子： <table id="search-table" class="table"> <thead> <tr> <th>Something</th> <th>Something2</th> <th>Something3</th> <th>Something4</th> <th>Something5</th> </tr> </thead> <tbody></tbody> </table> 我有一个 API 调用，它返回我想要作为行和列放入空 tbody 元素中的数据。 var body = document.getElementsbyTagName("tbody"); var x = 0; for (i = 0; i < APIcall.length; i++) { var createRow = body.insertRow(); for (j = 0; j < 7; j++) { var x = createRow.insertCell(j); } } 如果我在 thead 元素上 insertRow ，则会创建行，但当我尝试将其添加到 tbody 时则不会。可能我只是误会了什么。有什么建议我应该做什么吗？你就快到了。首先，正如 Rory 提到的，您的目标不是 DOM 中的 tbody。您可以通过将第一行替换为以下内容来解决此问题： var body = document.querySelector('#search-table tbody') 它的作用是这样的：它查找 ID 为 search-table 和后代 <tbody> 的元素并返回引用。你的代码将运行没有错误，但我对结果感到困惑。在第二行中，您有 var x = 0，但稍后我也可以看到 var x = createRow.insertCell(j);。（第二个 x 将为您提供对新 <td> 元素的引用）。希望有帮助。 var html =''; for (i = 0; i < APIcall.length; i++) {`enter code hereenter code here html += '<tr><td>' + APIcall[i].somthing + '</td><td>'+ APIcall[i].somthing + '</td>' + '<td>' + APIcall[i].somthing + '</td>' + < td > '+APIcall[i].somthing+' </td>'+ '<td>' + APIcall[i].somthing + '</td></tr>'; } $('#search-table > tbody').append(html); enter code here 如果您的标记中有多个 tbody，则必须专门针对您的 tbody，因为 getElementsByTagName 返回一组元素。对于示例： var tbodies = document.getElementsByTagName ("tbody"); var targetTbody = tbodies[0]; 或者如果您想将您的内容添加到多个 tbodies，您可以循环 tbodies。

javascript jquery dom

回答 3 投票 0

JS基础问题（提交事件处理程序）

我几个月前刚刚开始我的 SWE 训练营，最近开始学习 javascript 我正在做一项评估，但这个问题一直出错，希望有人能够...

javascript dom

回答 1 投票 0

如果输入文件为空，则不会触发 onchange 事件

我有这个函数，它要求用户提供一个文件，如果选择则返回文件，如果没有选择任何内容，则（应该）返回null。异步 pickFile(allowed_extensions?: string[]): Promise 我有这个函数，它要求用户提供一个文件，如果选择则返回文件，如果没有选择任何内容，则（应该）返回 null。 async pickFile(allowed_extensions?: string[]): Promise<File | null> { const input = document.createElement('input'); input.type = 'file'; input.accept = allowed_extensions?.join(',') ?? '*'; input.click(); return new Promise((resolve) => { input.onchange = () => { if (input.files && input.files.length > 0) { resolve(input.files[0]); } else { resolve(null); } }; }); } 如果我选择一个文件并确认，它就可以正常工作。但是，如果我关闭选择窗口，似乎不会触发 onchange 事件。这种行为是预期的吗？如果是的话我该如何处理？可重现的示例 onchange 关闭窗口时不会触发。您应该向 cancel 事件添加另一个事件侦听器，该事件将在您关闭弹出窗口时触发： function pickFile() { const input = document.createElement('input'); input.type = 'file'; input.click(); return new Promise((resolve) => { input.onchange = () => { console.log('onchange triggered'); if (input.files && input.files.length > 0) { resolve(input.files[0]); } else { resolve(null); } }; input.addEventListener("cancel", () => { console.log('Input canceled'); resolve(null) }); }); } <button type="button" onclick="pickFile()">Click Me!</button>

javascript typescript dom

回答 1 投票 0

AngularJs - 已定义模块，但仍然出现“不可用”错误

我正在尝试使用角度指令构建密码匹配机制，但似乎我错过了一些东西。我定义了 ng-app 和 ng-controller 但我仍然收到一条错误消息，指出 mod...

javascript html angularjs dom angularjs-module

回答 1 投票 0

使用Javascript更改BODY元素的背景颜色

我想改变body元素的背景颜色。当我尝试第一个时，它不起作用。但当我尝试第二个时，效果非常好。我想知道原因。让 x = 文档...

javascript html css web dom

回答 1 投票 0

在 JavaScript 中比较 `self` 和 `top` 有什么作用？

if（自我！=顶部）{ window.open(self.location,'_top'); } self != top 和 window.open(self.location, '_top'); 是什么意思？分别是什么意思？