dom 相关问题

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

如何访问文档对象模型？

我正在学习如何使用 javascript 操作 DOM。我理解JS只能在浏览器环境中访问DOM，因为DOM只能在浏览器中使用，而JS，是一个“

javascript dom

回答 1 投票 0

querySelectorAll 未在递归函数内返回更新的节点列表

我正在尝试抓取将来创建的 DOM 中的一个元素。为了简单起见，当用户通过单击上传按钮上传图像时，会在 DOM 中创建一个 div，它有一个类 ...

javascript recursion dom dom-manipulation selectors-api

回答 1 投票 0

获取被激发（触发）的事件的名称（类型）

我有以下代码： $('#button').on('点击更改', function() { alert('谁解雇了我，点击还是更改？'); }); 我如何知道调用的事件是“单击”还是“更改”？

javascript jquery events dom

回答 3 投票 0

如何定位具有相同类名和文本的元素，如下所示

我需要单击列表中的元素，但无法单击我正在使用的元素（//[@class="pb-dropdown__contents pb-dropdown__contents--no-margin pb-dropdown__con ...

dom xpath xpath-2.0 xpath-1.0

回答 1 投票 0

为什么代码不允许网页向下滚动？

从 selenium 导入 webdriver # 创建网络驱动实例驱动程序 = webdriver.Chrome() # 导航到页面 driver.get('https://www.youtube.com/@freecodecamp/videos') # 向下滚动到

python selenium-webdriver web-scraping dom

回答 1 投票 0

localStorage Javascript代码可以在HTML文件中工作，但不能在Javascript文件中工作，我已经尝试了很多StackOverflow解决方案

我正在尝试使用基本的本地存储方法。它们在 HTML 中完美工作，但在独立的 Javascript 文件中不起作用。 HTML 代码（作品）：我正在尝试使用基本的本地存储方法。它们可以在 HTML 中完美查找，但不能在独立的 Javascript 文件中工作。 HTML 代码（有效）： <!DOCTYPE html> <html> <head> <title>Test Javascript</title> <meta name="description" content="Our first page"> <meta name="keywords" content="html tutorial template"> <script> document.addEventListener("DOMContentLoaded", function(event) { localStorage.setItem("Name", "Jeff"); console.log(localStorage.getItem("Name")); }); </script> </head> <body> Content goes here. </body> </html> JS 代码（不起作用）： document.addEventListener("DOMContentLoaded", function(event) { localStorage.setItem("Name", "Jeff"); console.log(localStorage.getItem("Name")); }); 或 document.addEventListener("load", function() { localStorage.setItem("Name", "Jeff"); console.log(localStorage.getItem("Name")); }); 或 document.addEventListener("DOMContentLoaded", function() { localStorage.setItem("Name", "Jeff"); console.log(localStorage.getItem("Name")); }, false); 或 window.onload = function() { localStorage.setItem("Name", "Jeff"); console.log(localStorage.getItem("Name")); } 以下是我尝试过的解决方案：使用document.addEventListener("DOMContentLoaded", function(event) {}); 使用document.addEventListener("load", function() {}); 使用document.addEventListener("DOMContentLoaded", function() {}, false); 使用window.onload = function() {} 使用window.onload = function() {}（再次）使用window.onload = function() {}（再次...）运行 js 文件时，我仍然得到相同的结果：localStorage 中没有任何反应，并且我在控制台中看不到任何内容。我不知道从这里去哪里，任何帮助将不胜感激。 Web 浏览器仅在加载了 <script> 元素的 HTML 文档上下文中执行 JavaScript（src 属性允许从 URL 加载脚本，而不是嵌入到 HTML 文档中）。（让我们忽略浏览器扩展、将内容粘贴到开发人员工具和书签中，因为它们与此处无关）。只需输入 JavaScript 程序的 URL 即可使其源代码显示在主视口中。它不会执行代码。没有办法让它执行 HTML 文档之外的代码。

javascript html dom firefox local-storage

回答 1 投票 0

脚本标签上的事件监听器

我创建了CSE（自定义搜索引擎）我...

javascript html jquery dom async-await

回答 1 投票 0

使用 ID 从本地存储中删除项目

我希望能够删除我的车辆列表页面上的项目。当我单击“删除车辆”按钮时，似乎 ID 没有被传递，因为没有删除任何内容。以下是我的车辆清单和

javascript html dom

回答 1 投票 0

如何在innerHTML中使用三元条件运算符

如何在element.innerHTML中正确使用三元运算符？ el.innerHTML = { `标题 ${菜单打开&& ` 已打开如何在element.innerHTML中正确使用三元运算符？ el.innerHTML = { `<span>title</span> ${menuOpened && `<div> <span>opened</span> </div>` } ` } 我认为你不能在另一个`内部字符串模板中使用字符串模板。我可能是错的，但我会使用其他引用来解决它。 el = {}; menuOpened = true el.innerHTML = `<span>title</span> ${menuOpened && '<div><span>opened</span></div>' } `; console.log(el) 当然，您可以在单行模板中完成此操作，但为了代码的可读性，您可以以经典方式将其拆分为多个步骤，请检查内联注释： // Set your must have html let html = `<span>title</span>`; // Pre-set condition for example purpose const menuOpened = true; // Append html if condition is true if(menuOpened) html += `<div><span>opened</span></div>`; // Then inner html // For now we'll just console log it console.log(html); 但是如果您有更复杂的 html 并且需要插入数据，而不是像您的情况那样添加数据，那么： // Pre-set condition for example purpose const menuOpened = true; // Set code for menu const menu = menuOpened ? `<div><span>opened</span></div>` : ''; // Set your html template const html = `<div><span>title</span>${menu}</div>`; // Then inner html // For now we'll just console log it console.log(html);

javascript if-statement dom innerhtml conditional-operator

回答 2 投票 0

获取jquery数据表中选定行/行的列值

我被以下代码困住了。我想获取数据表中选定行/行的列值。我已经使用这个代码数据表代码： var table = $('#tableId').DataTable({ “阿贾克斯”：{...

jquery dom datatable

回答 2 投票 0

函数外的变量，尝试了正则表达式但似乎无法使其工作

我有一个函数，可以删除班级末尾的数字并将其替换为随机数字。但我必须在函数之前声明一个变量才能使其工作。这只是一个随机的...

javascript reactjs regex function dom

回答 1 投票 0

querySelector() 和 getElementBy[Id/ClassName/TagName] 有什么区别？

我不明白使用 querySelector() 和 getElementById() 之间的区别。我知道 querySelector 通过使用任何选择器来检索元素，这使得它更加通用......

javascript dom getelementbyid queryselector

回答 1 投票 0

从 dom 获取时 CSS 选择器抛出错误

div#PageContainer > div.container-AD > div:nth-child(4) > div > div.collection__content > div.collection__products.td-collection__products.collection__products-- Three.td-sticky-

javascript dom

回答 1 投票 0

单击标签内的按钮不会触发相应的输入

我试图通过隐藏复选框并在其父标签内添加一个按钮来更改复选框的样式，如下所示：我正在尝试通过隐藏它并在其父标签内添加一个按钮来更改 checkbox 的样式，如下所示： <label onclick="console.log('label received click event')"> <input type="checkbox" style="display: none" onchange="console.log('input value changed')"> <button type="button">click here</button> </label> 但是点击按钮并不会触发输入。如果我使用 div 而不是 button，则此设置有效： <label onclick="console.log('label received click event')"> <input type="checkbox" style="display: none" onchange="console.log('input value changed')"> <div>click here</div> </label> 这是预期的，并且也与标签文档匹配。我不明白的是，在这两种情况下， click 事件都会冒泡到标签，因此标签会收到单击事件。与 div 或其他元素不同的按钮有什么特别之处？有没有办法让它发挥作用？ PS：我也尝试在event.preventDefault()上做一个button，但它没有改变任何东西。无论行为如何，请勿在标签中包含多个元素。按钮当然不需要标签，如果你这样做，你的代码就会简单得多 <label><input type="checkbox" style="display: none" onchange="console.log('input value changed')">Label for checkbox</label> 如果您想将按钮样式设置为复选框，您可以这样做创建 CSS 外观，使按钮充当复选框

html dom

回答 1 投票 0

JavaScript 检测是否启用硬件加速

是否可以检测浏览器是否支持硬件加速页面渲染以及是否已启用？我知道 Firefox 4、IE9 和 Chrome 支持...

javascript css dom hardware-acceleration browser-feature-detection

回答 3 投票 0

删除div而不删除普通Javascript中的内容[重复]

有人可以帮助我如何删除 div 标签而不删除 JavaScript 中的内容吗？这是我的 html，我需要从中删除所有 div 标签： ... 任何人都可以帮助我如何删除 div 标签而不删除 JavaScript 中的内容吗？这是我的 html，我需要从中删除所有 div 标签： <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div> 预期输出如下所示。 <p>some text <label> Test content </label> </p> <span>some text</span> <label> Test content </label> <a href=https://twitter.com/realDonaldTrump/status/882186896285282304 target=_blank rel=noopener>creepiness</a> 使用纯java脚本： var divs=document.getElementsByTagName('div'); var counter = divs.length-1; for(i=counter;i>=0;i--){ divs[i].outerHTML = divs[i].innerHTML; } <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div> 使用 jQuery unwrap(): $(document).ready(function(){ $('div').contents().unwrap(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div> 使用尖端技术，例如可迭代节点列表和replaceWith，使用普通的 DOM API 非常简单： for (const div of document.querySelectorAll("div")) // alternatively: Array.from(document.getElementsByTagName("div")) div.replaceWith(...div.childNodes); 您可以使用unwrap功能。 $('div').children().unwrap(); 如果你想用纯 JavaScript 来做。您可以使用 document.getElementsByTagName("div") 获取所有 div 的列表，但您需要以相反的顺序解开这些 div。这是一个 nodelist，因此 reverse() 对其不起作用，因此您可以首先对其使用 [].slice.call()，它会为您提供一个数组，然后您可以反转它。然后在数组中解开每个元素。你可以这样做： var elements = [].slice.call(document.getElementsByTagName("div"), 0).reverse(); elements.forEach(function(el){ el.outerHTML = el.innerHTML; }); <div id="id1" class="someclass"> <p>some text <label> Test content </label> </p> <div id="id2" style="overfolw:scroll"> <span>some text</span> <div id="level3"> <label> Test content </label> <a href="https://twitter.com/realDonaldTrump/status/882186896285282304" target=_blank rel=noopener>creepiness</a> </div> </div> </div>

javascript jquery html dom

回答 3 投票 0

使用 JavaScript 查找父元素的子元素

最有效的方法是仅使用纯 JavaScript 查找特定父元素的子元素（带有类或 ID）。没有 jQuery 或其他框架。在这种情况下，我会...

javascript dom

回答 6 投票 0

angularjs ng-bind-html 到 iframe 正在渲染 <html> 标签之外的 HTML

我正在将页面从 $http.get 加载到 iFrame 中。 $http.get 检索完整的 HTML 页面，就好像它是本机导航到的一样，但是当我将内容附加到 iframe 时，内容是

javascript angularjs dom iframe xmlhttprequest

回答 1 投票 0

如何在浏览器JavaScript中实现“复制到剪贴板”？

如何用JavaScript实现“复制到剪贴板”？有没有办法在 HTML 中添加 JS 脚本，允许“复制到剪贴板”按钮？下图中的示例。什...