dom 相关问题

未捕获的类型错误：无法在 share-modal.js:1:135（匿名）处读取 null 的属性（读取“addEventListener”）

我正在使用 HTML CSS 和 Javascript 创建一个天气应用程序，但我不断收到空事件侦听器的错误，我什至不知道 在我的 DOM 中。 document.querySelector(".tui-image-editor-main-

有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？

有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？ 例子： 顶部节点文本 子节点文本 有没有办法只获取顶部元素的innerText（并忽略子元素的innerText）？ 示例： <div> top node text <div> child node text </div> </div> 如何获取“顶部节点文本”而忽略“子节点文本”？顶部 div 的 innerText 属性似乎返回内部文本和顶部文本的串联。 只需迭代子节点并连接文本节点： var el = document.getElementById("your_element_id"), child = el.firstChild, texts = []; while (child) { if (child.nodeType == 3) { texts.push(child.data); } child = child.nextSibling; } var text = texts.join(""); 这将在您的示例中起作用： document.getElementById("item").firstChild.nodeValue; 注意：请记住，如果您知道自己正在处理特定的 HTML，那么这将起作用。如果您的 HTML 可以更改，例如： <div> <div class="item"> child node text </div> top node text </div> 那么你应该使用更通用的解决方案 @Tim Down 这是工作代码片段： window.onload = function() { var text = document.getElementById("item").firstChild.nodeValue; document.getElementById("result").innerText = text.trim(); }; #result { border: 1px solid red; } <div id="item"> top node text <div> child node text </div> </div> <strong>Result:</strong> <div id="result"></div> 克隆元素。 循环遍历所有子节点（向后，以避免冲突）：如果元素具有 tagName 属性，则它是一个元素：删除该节点。 使用 innerText 获取文本内容（当不支持 textContent 时，可以回退到 innerText）。 代码： var elem = document.getElementById('theelement'); elem = elem.cloneNode(true); for (var i=elem.childNodes.length-1; i>=0; i--) { if (elem.childNodes[i].tagName) elem.removeChild(elem.childNodes[i]); } var innerText = elem['innerText' in elem ? 'innerText' : 'textContent']; function getDirectInnerText(element) { var childNodes = element.childNodes; result = ''; for (var i = 0; i < childNodes.length; i++) { if(childNodes[i].nodeType == 3) { result += childNodes[i].data; } } return result; } element = document.querySelector("div#element"); console.log(getDirectInnerText(element)) <div id="element"> top node text <div> child node text </div> </div> 如果不想忽略子元素的内部文本，请使用以下函数： function getInnerText(el) { var x = []; var child = el.firstChild; while (child) { if (child.nodeType == 3) { x.push(child.nodeValue); } else if (child.nodeType == 1) { var ii = getInnerText(child); if (ii.length > 0) x.push(ii); } child = child.nextSibling; } return x.join(" "); } 正如所有其他答案已经解释的那样，您需要检查子节点的类型。 这是基于 @ehsaneha 的答案的简洁的单行文字： Array.from(element.childNodes).reduce((x, y) => x + (y.nodeType == Node.TEXT_NODE ? y.data : ''), '').trim() 或者作为原型方法： Element.prototype.directInnerText = function () { return Array.from(this.childNodes).reduce((x, y) => x + (y.nodeType == Node.TEXT_NODE ? y.data : ''), '').trim(); } 用途： console.log(document.body.querySelector('.element').directInnerText()); 兼容性参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType?retiredLocale=de const nodeValues=[]; document.querySelectorAll("locator").forEach( function (currentValue) { nodeValues.push(currentValue.firstChild.nodeValue); } ) return nodeValues;

如何在溢出滚动div内设置div水平居中？

这是我做的。 我想使用滚动事件使黄色 div 在溢出的 div 内水平居中。 但正如你所看到的，它很口吃，表现得很奇怪。 在移动网络中情况更糟

如何在 PHP 中获取 DOMElement 的内部文本？

我们在网站上使用 CMS。许多用户将 HTML 内容添加到数据库中，但格式很奇怪。例如，将所有 HTML 放在一行中： 这是我的标题...

为什么我要在重置秒表后再次播放秒表时单击两次？

我尝试从 freecodecamp 教程中构建秒表，当我添加功能来重置它时，我意识到我应该在重置后单击两次才能播放..有任何答案或解决方案吗？顺便说一句，这是我的第一次

无法读取 null 的属性（读取“appendChild”）

const list = document.getElementById('generateList'); const listAdd = document.createElement('li'); listAdd.innerText = "名称" list.appendChild(listAdd) 此代码返回：无法读取

Chrome 扩展 HTML 树生成器无法工作

我正在学习 DOM（文档对象模型），因此我安装了 HTML 树生成器来查看层次结构，但每当我启动扩展时，它仅加载而不是显示树。如果有的话...

在javascript中选择并添加类

如果可能，跨平台，我如何在无法添加 ID 的代码上选择 Javascript 中的类（但不是 Jquery -MooTools 很好 -）？ 具体来说，我想在...

如何用加载的dom上的JavaScript替换页面上所有空的<img src="">？

我需要一个在 DOM 加载时启动的函数。 在我的 HTML 页面中有几个空的图像标签，就像我想在加载所有内容时将图像名称添加到 src-property 中以获得

为什么更新对象中的嵌套数组不会触发子组件重新渲染？

在我的 React 应用程序中，我有一个页面，其中包含项目卡列表（每个卡都是一个单独的组件），并且在每张卡上我都有一个从项目的嵌套数组对象呈现的表格。当我添加

CopyExternalImageToTexture 受到跨源数据污染

问题 我上传了一个存储库，在其中隔离了 device.queue.copyExternalImageToTexture 遇到的问题，如 index.js 文件中所示。没有服务器/后端 API。

querySelector：当return为null时如何不调用函数？

我需要使用querySelector（不是querySelectorAll，因为最多有一个这样的元素）对DOM中可能存在或不存在的元素执行一个函数。最优雅的解决方案...

下一个JS：当dom渲染时加载屏幕

如何显示我自己的加载程序而不是空白屏幕？ 例如，Tweeter 在页面加载时显示徽标，Facebook、谷歌 AdSense 等也是如此。 看看这个 Gif，我想要一些东西

javascript和vuejs中有什么方法可以检测离开容器的dragevent吗？

我目前正在 vuejs 中实现一个待办事项应用程序。待办事项应用程序必须具有拖放功能，允许用户在列表中的元素之前或之后拖动，并且应该更新...

OpenUI5：PDFViewer 在显示 pdf 文件时抛出 DOM 错误

我想使用 sap.m.PDFViewer 来显示 UI5 项目中包含的 PDF 文件。文件已找到并加载，但查看器显示默认错误消息，缺点是...

如何让 VS Code 不假设 DOM API 可用？

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

DOM API 是面向对象的 API 吗？

请原谅我缺乏对网络技术以及网络相关方面和术语的了解。这个问题的一个答案指出 DOM 标准定义了由

在浏览器中后退和前进时保留 Javascript 更改

我有以下简短的代码来更容易地演示我的问题： 函数变化（）{ document.getElementById('change').innerHTML = "完成！"; } 我有以下简短的代码，可以更轻松地演示我的问题： <script> function change() { document.getElementById('change').innerHTML = "Done!"; } </script> <div id="change" onclick="change();">Change me!</div> 假设文件名为 test.html。 单击 Change me! 时，字符串将更改为 Done!。 Safari、Firefox：当单击浏览器后退按钮，然后单击浏览器前进按钮返回到我的 test.html 时，显示 Done!。这就是我所期待的！ 对其他浏览器（Chrome、Vivaldi、Min、Opera）进行同样的操作，我得到的是 Change me! 而不是 Done!。 当使用后退和前进按钮时，Safari 和 Firefox 似乎保留了 Javascript 更改，而其他浏览器加载页面时没有 Javascript 更改。 有没有办法让其他浏览器达到与 Safari 和 Firefox 相同的行为？ 您可以查看使用浏览器的 Window.sessionStorage 或 Window.localStorage 来存储和检索使用后退按钮/前进按钮的情况下的状态 <script> window.addEventListener("load", function(event) { setHTML(); }) function setHTML() { document.getElementById('change').innerHTML = window.sessionStorage.getItem("state")||"NOT IN FAVORITES"; } function addToFavorites() { window.sessionStorage.setItem("state", "Done"); document.getElementById('change').innerHTML = window.sessionStorage.getItem("state"); } </script> <div id="change" onclick="addToFavorites();">Change me!</div> 您可以使用 event.preventDefault() <script> $(document).ready(function () { $("button").click(function () { $("#test").hide(); **event.preventDefault();** //add this line into your js. }); }); </script> <div> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </div>

如何在我的页面上找到来源或流氓角色？

我有一个非常简单的基于网络的内部工具。总共有20行css和40行js。 页面上插入了一个 '}' 字符，该字符在 html 中不可见 这是屏幕截图

使用php删除Xml数据

如何使用 php 删除 xml 上的特定元素 my.xml 这里 ...