dom 相关问题

添加新元素时以 html 形式动态创建 ID，然后传递 .on 更改功能

我有这段代码并且它有效，我可以添加新行并删除它们。 问题是当我从选择输入中选择和选项时，它会使用正确的信息更改两个输入。 当...

如何动态检索HTML标签及其子标签的内容文本？

我想知道如何动态检索HTML标签及其子标签的内容文本？ 这是我的 HTML 代码，例如： C:\ 我想知道如何动态检索 HTML 标签及其子标签的内容文本？ 这是我的 HTML 代码，例如： <p><code>C:\<select> <option value="test1\">test1\</option> <option value="test2\">test2\</option> </select>test3\<select> <option value="test4\">test4\</option> <option value="test5\">test5\</option> </select>test6\<select> <option value="test7\">test7\</option> <option value="test8\">test8\</option> <option value="test9\">test9\</option> </select>test10.txt</code></p> 我想在这段代码之后创建一个按钮，当单击它时，我想直接在控制台中写入内容。 例如： C:\test2\test3\test4\test6\test8\test10.txt 或 C:\test1\test3\test5\test6\test9\test10.txt ... 另一段代码可能只包含 1 或 2 个 <select> 标签。因此，我不想要只适用于 3 个 <select> 标签的代码，如前面的示例所示。 提前非常感谢您 这取决于您使用的编程语言以及您想要在哪里执行此操作，例如前端、网站服务器、数据库……您是否想重新发明网络爬虫？

我应该使用 ref 还是 findDOMNode 来获取元素的 React 根 dom 节点？

我想要进行一些 dom 节点大小计算（渲染的 DOM 节点的顶部、底部和大小属性） 我现在在 componentDidUpdate 方法上所做的是......

JavaScript - 获取数组中除最后一项之外的所有内容

这是我的代码： 函数插入（）{ var loc_array = document.location.href.split('/'); var linkElement = document.getElementById("waBackButton"); var linkElementLink = document.getElementBy...

如何使用JS触发SVG渲染，就像在Chrome中手动编辑DOM一样？

当我在 Chrome 中通过 JS 修改 HTML 文档中 SVG 元素的 DOM 结构时（特别是使用 ReplaceWith 或appendChild 引入新内容），尽管 Chrome 元素树

向innerHTML插入脚本时，带有DOMContentLoaded的脚本不会被执行

我制作了一个脚本，它获取 html 文件的文本并将其插入到另一个 html 文件中；我这样做是为了在进行更改时不需要更新每个页面上的标题和侧边栏。剧本...

index.js 中出现 React 错误，“Uncaught ReferenceError：dom 未定义”

我正在构建一个 React 应用程序， 我使用 Babel 和 Webpack 作为模块打包器。 在编写 index.js 时，应用程序开始向我发送有关未定义 dom 的错误， 但实际上我已经

通过Id获取HTML DOM索引

例如。 document.form[0].elements[23] 将产生一些输入 。 我需要通过 id 或 name = 'test2' 获取 23 索引值 var n = document.getElementById('test2').getDOMNod...

将 HTML 字符串转换为 DOM 元素？

有没有办法将 HTML 转换为： 或者任何其他 HTML 字符串到 DOM 元素中？ （这样我就可以使用appendChild()）...

将类函数作为函数参数传递给JS

我定义了以下函数： 函数handleMessageDot（有趣）{ domElement.classList.fun('隐藏'); } 现在我想使用其中之一： 处理消息点（添加），处理消息点（删除）。 我明白了

Chrome 扩展 - 未找到任何 DOM 元素

对于这个 Chrome 扩展，我尝试检索的任何 DOM 元素都返回为 null。我尝试了几个不同的网站，并尝试通过 ID、类和名称检索 DOM 元素。下面是最新的

更新动态更改以获取数据

我现在陷入困境。我创建了一个函数来控制使用毫秒到秒、分钟和小时的计算来获取数据的频率，这似乎工作正常。 这是...

在添加跨度后如何在可编辑的内容中设置插入符位置；并将插入符号移动到跨度的末尾？

我有一个用于聊天应用程序的内容编辑器。当我标记用户时，我找到当前的 caretPosition 并向该位置添加一个范围，如下所示； 我有一个用于聊天应用程序的内容编辑器。当我标记用户时，我找到当前的 caretPosition 并向该位置添加一个跨度，如下所示； <span class=\"highlight\" contenteditable=\"false\">${userName}</span> 但是，当我用这个跨度替换标签时，我失去了可编辑内容的焦点，并且插入符号位置也丢失了。我尝试过查看这些答案， 答案1 答案2 但是在这两种情况下焦点都会丢失，如果我在 setCursorPosition 函数之前设置 el.focus() ，插入符号只会转到可编辑内容的开头。我的代码； getCaretPositionInnerHTML() { var target = document.createTextNode("\u0001"); document.getSelection().getRangeAt(0).insertNode(target); var position = this.contenteditable.nativeElement.innerHTML.indexOf("\u0001"); target.parentNode.removeChild(target); return position; } saveMention(event, user): void { //lose focus after this event.stopPropagation(); let tempString = this.contenteditable.nativeElement.innerHTML; let index = this.getCaretPositionInnerHTML(); let replacement = this.getSpanFromUserFn(user);// returns the span in question let currentWordLength = this.getCurrentWord(tempString, index);// replace the current word with my span let newString = tempString.substring(0, index - currentWordLength.length) + replacement + tempString.substring(index + 1); this.contenteditable.nativeElement.innerHTML = newString; } ngOnChanges(changes: SimpleChanges) { if (this.caretPosition) { console.log(changes); this.selection.removeAllRanges(); let range = this.setCursorPosition(this.element.nativeElement, document.createRange(), { pos: this.caretPosition, done: false}); this.element.nativeElement.focus(); range.collapse(true); this.sel.addRange(range); } //find the child node and relative position and set it on range setCursorPosition(parent, range, stat) { if (stat.done) return range; if (parent.childNodes.length == 0) { if (parent.textContent.length >= stat.pos) { range.setStart(parent, stat.pos); stat.done = true; } else { stat.pos = stat.pos - parent.textContent.length; } } else { for (var i = 0; i < parent.childNodes.length && !stat.done; i++) { this.currentNode = parent.childNodes[i]; this.setCursorPosition(this.currentNode, range, stat); } } return range; } 我碰巧遇到了一个用例，这就是我最终的结果： let cursorPosition; const getCursorLocation = (ele) => { var target = document.createTextNode("\u0001"); document.getSelection().getRangeAt(0).insertNode(target); var position = ele.innerHTML.indexOf("\u0001"); target.parentNode.removeChild(target); cursorPosition = position; console.log('position', position); return position; }; //find the child node and relative position and set it on range const findingRange = (ind, nodes, position) => { if (nodes[ind].textContent.length >= position) { if (nodes[ind].childNodes.length > 0) { return findingRange(0, nodes[ind].childNodes, position); } const node = nodes[ind].nodeName === "#text" ? nodes[ind] : nodes[ind].firstChild; return { node, offset: position }; } return findingRange( ind + 1, nodes, position - nodes[ind].textContent.length ); }; const updateInput = (input) => { const userInputBox = document.getElementById("listening-input-change"); if (userInputBox) { const currentText = userInputBox.innerHTML; const position = cursorPosition; const newText = currentText.substring(0, position) + input + currentText.substring(position); userInputBox.innerHTML = newText; const range = document.createRange(); //Create a range const sel = window.getSelection(); //get the selection object const startingNode = findingRange( 0, userInputBox.childNodes, currentText.substring(0, position).replace(/<[^>]+>/g, "").length + input.length ); range.setStart(startingNode.node, startingNode.offset); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); userInputBox.focus(); } }; .listening-input-change { background: #fff; border: 1px solid #d4d6db; border-radius: 12px; color: #000; font-size: 14px; font-weight: 400; height: 100%; padding: 12px 12px 40px; } <div contentEditable="true" id='listening-input-change' class="listening-input-change"></div> <button onclick="updateInput('example text inserted')">set caret</button> <script> document.getElementById("listening-input-change").addEventListener("input", function () { const position = getCursorLocation(this); }); </script> let cursorPosition; const getCursorLocation = (ele) => { var target = document.createTextNode("\u0001"); document.getSelection().getRangeAt(0).insertNode(target); var position = ele.innerHTML.indexOf("\u0001"); target.parentNode.removeChild(target); cursorPosition = position; console.log('position', position); return position; }; //find the child node and relative position and set it on range const findingRange = (ind, nodes, position) => { if (nodes[ind].textContent.length >= position) { if (nodes[ind].childNodes.length > 0) { return findingRange(0, nodes[ind].childNodes, position); } const node = nodes[ind].nodeName === "#text" ? nodes[ind] : nodes[ind].firstChild; return { node, offset: position }; } return findingRange( ind + 1, nodes, position - nodes[ind].textContent.length ); }; const updateInput = (input) => { const userInputBox = document.getElementById("listening-input-change"); if (userInputBox) { const currentText = userInputBox.innerHTML; const position = cursorPosition; const newText = currentText.substring(0, position) + input + currentText.substring(position); userInputBox.innerHTML = newText; const range = document.createRange(); //Create a range const sel = window.getSelection(); //get the selection object const startingNode = findingRange( 0, userInputBox.childNodes, currentText.substring(0, position).replace(/<[^>]+>/g, "").length + input.length ); range.setStart(startingNode.node, startingNode.offset); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); userInputBox.focus(); } };函数递归地查找范围的起始节点和偏移量。 然后在更新插入所需的文本后在 updateInput 内调用它。 .listening-input-change { background: #fff; border: 1px solid #d4d6db; border-radius: 12px; color: #000; font-size: 14px; font-weight: 400; height: 100%; padding: 12px 12px 40px; }

Bootstrap 5 Carousel 在页面加载后不会自动播放

这个标准 Bootstrap 5 轮播代码... 这个标准 Bootstrap 5 轮播代码... <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="1.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="2.jpg" class="d-block w-100" alt="..."> </div> </div> </div> ...页面加载时在 html 文件中自动播放。 但是，当页面加载后将相同的代码添加到 DOM 时： $('#previous-div').after(carouselHTML); ...轮播不会自动播放。 页面加载后将轮播添加到 DOM 时，我需要采取哪些步骤才能让轮播自动播放？ 根据 docs，具有 data-bs 属性的 Carousel 组件会在页面加载时自动初始化，因此稍后添加它们将不起作用。 因此，您可以使用 JavaScript 手动实例化它。 您似乎使用的是 jQuery，因此 BS 组件自动可用，因此您可以通过将 cycle 传递给 .carousel 方法来实例化轮播： $('#previous-div').after($(carouselHTML).carousel('cycle')); 演示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Example</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="previous-div"></div> <script> $(document).ready(function() { const carouselHTML = ` <div id="carouselExampleSlidesOnly" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://placehold.co/300x200" class="d-block w-100" alt="..."> </div> </div> </div> `; $('#previous-div').delay(2000).after($(carouselHTML).carousel('cycle')); }); </script> </body> </html>

如何让Form元素在JS中引用时正确工作？

我正在对如何在 JavaScript 中使用表单元素进行简单的实际测试，但我不太明白出了什么问题。我检查了网络浏览器的萤火虫，控制台没有给出错误，...

File 对象中 webkitRelativePath 属性的用途是什么？

如果您在 Chrome 控制台中打印 File 对象，如下所示： 您会在其他属性中看到始终为空的

如何在 Laravel 中使用中继器渲染子组件中的数据

我在 Laravel 应用程序中有一个父组件和子组件，并且希望为数组中的每个元素渲染一个 TextInput。 但是，我在将数据从父级传递给子级时遇到问题。它是...

控制台日志不显示属性

我的代码使用下面的 HTML。 这是 ID 为“myId”的元素的原始内容。 <... 我的代码使用下面的 HTML。 <body> <div id="myId" class="oldClass"> This is the original content of the element with ID "myId". </div> </body> 我正在使用下面的DOM Manipulation执行JavaScript Code: const myElement = document.getElementById('myId'); myElement.setAttribute('data-example', 'value'); console.log(myElement); myElement.removeAttribute('data-example'); console.log(myElement); 但是，first console.log() statement 不显示 data-example 属性。 <div id="myId" class="oldClass"> This is the original content of the element with ID "myId". </div> 您遇到的问题与浏览器处理 console.log() 的方式及其处理 DOM 元素的方式有关。当您使用 console.log(myElement) 时，它会记录对 DOM 节点的引用，而不是该节点当时的静态快照。如果您在记录后操作 DOM，当您在浏览器的开发人员工具中展开记录的元素引用时，这些更改将反映在记录的元素引用中。 为了避免这种混乱并在记录元素时捕获它存在的元素，您可以直接记录特定的属性或值，而不是元素引用。

使 ReactDOM.createPortal 插入元素作为目标容器的第一个子元素（而不是最后一个子元素）

所以我使用 ReactDOM.createPortal 在正常 DOM 放置之外渲染一个元素。我必须这样做，因为我正在与一个创建它自己的元素的库进行交互（超出我的范围）并且我

如何使用打字稿制作 HTML 代码？

我没有 javascript 和 typescript 的经验。当我使用 PHP 时，我将导航栏制作成一个可以回显 html 代码的函数。这也可以使用打字稿来实现吗？我做了一个功能...