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 代码的函数。这也可以使用打字稿来实现吗？我做了一个功能...

php DOMElement->replaceWith() 的奇怪问题

我看到一些奇怪的行为，但我无法调试。该代码来自 WordPress 短代码变体的简单实现。 代码循环遍历 DOMNodeList（自定义...

操纵 XML 元素属性的顺序

我读过很多帖子，人们询问如何对 XML 元素强制执行某种属性顺序，一般的回答是它不合法/必需/允许/相关/其他。 我不是...

Cypress 如何处理点击？

这是HTML代码 属性 ...

无法选择 div 元素的类并向该元素添加另一个类

我正在做这个 GPS 项目，遇到了一个问题。我想构建一个由 360x180 网格项组成的网格，每个网格项代表一个 GPS 坐标，它动态地获取自己的...

Safari 的 getBoundingClientRect() 实现返回不正确的顶部

我有一个带有 float: right 的 div，我试图获取它与视口顶部的距离。在除 Safari 之外的每个浏览器中，我都从 element.getBoundingClientRect() 获得了预期的结果....

为什么表单按钮对页面 DOM 所做的更改在一段时间后会自动恢复？

我想要做的是交换两个 HTML DOM 节点。 让我们采用以下 HTML 列表和下面的交换按钮： 0 ... 我想要做的是交换两个 HTML DOM 节点。 让我们采用以下 HTML 列表和下面的交换按钮： <ul class="center-text"> <li>0</li> <li>1</li> <li>2</li> </ul> <form class="center-text"> <button id="swapButton">Swap</button> </form> 这是我的 JS 代码： // the "ready" method is the only jQuery method used in the code $(document).ready(function(){ document.getElementById("swapButton").onclick = function() { var ul = document.getElementsByTagName("ul")[0]; // pseudo-swapping: insert "child2" before "child0" // (indexes are 1 and 5 because of the TextNodes between list nodes) ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1)); } }); 因此，单击交换按钮时会发生以下情况： 物品确实被交换了。但不知何故，在（比方说 1/4）秒后，它们会恢复到原来的位置，即自动交换回来。 我的问题是：为什么？ PS：该代码仅用于教育目的，我只是尝试了解幕后发生的事情，所以请不要发布任何替代的 jQuery 方法。 $(document).ready(function(){ document.getElementById("swapButton").onclick = function(e) { e.preventDefault(); var ul = document.getElementsByTagName("ul")[0]; ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1)); } }); 这是因为按钮将页面重定向到同一页面。并恢复全部。您需要防止按钮的默认行为。

JavaScript id 详细信息显示一个结果，与 id 无关

我正在使用 NY Times api 使用 javascript 创建一个图书应用程序，用户可以通过单击任何一本书来查看图书详细信息。我使用来自 a...的 Primary_isbn10 为每本书指定了不同的 id...

如何将事件委托添加到单选按钮上的“更改”事件（而不是单击）？

我经常使用类似代码的父元素上的“click”事件轻松实现事件委托 HTML： 我经常使用类似代码的父元素上的“单击”事件轻松实现事件委托 HTML： <div> <span> <input type="radio" id="all0" name="difficulty-ask" class="difficultyaskclass" value="all" checked="checked" /> <label for="all0">All</label> <input type="radio" id="2easy1" name="difficulty-ask" class="difficultyaskclass" value="easy" /> <label for="2easy1">Easy</label> <input type="radio" id="2med2" name="difficulty-ask" class="difficultyaskclass" value="medium" /> <label for="2med2">Medium</label> <input type="radio" id="2hard3" name="difficulty-ask" class="difficultyaskclass" value="hard" /> <label for="2hard3">Hard</label> </span> </div> JS： parentelement.addEventlistener('click', (event) => { if(event.target.classList.contains('targetelement'){Code..}}; （父元素只是一个常规的div，其中放置了单选按钮） 如果单选按钮切换状态，它现在如何处理“更改”事件？ 我首先通过循环遍历所有这些，然后为每个添加一个事件监听器来使其工作。但这显然不是理想的解决方案，我肯定需要一些事件委托。 您可以使用 input 事件，该事件对任何表单元素也有效 演示： const myForm = document.forms['my-form']; myForm.addEventListener('submit', e => { e.preventDefault(); // disable submit - page reload const formValues = Object.fromEntries(new FormData(myForm).entries()); console.log( formValues ); setInterval(console.clear,8000); }) myForm.addEventListener('input', e => { if (!e.target.matches('input[type="radio"]')) return; console.log(myForm['difficulty-ask'].value); setInterval(console.clear,2000); });label { display:block; } fieldset { width: fit-content; }<form name="my-form"> <fieldset> <legend> difficulty </legend> <label> <input name="difficulty-ask" type="radio" value="all" checked > All </label> <label> <input name="difficulty-ask" type="radio" value="easy" > Easy </label> <label> <input name="difficulty-ask" type="radio" value="medium" > Medium </label> <label> <input name="difficulty-ask" type="radio" value="hard" > Hard </label> </fieldset> <button>submit</button> </form>

如何在不操作DOM的情况下以角度操作/复制ElementRef？

我有一个近 200 行的格式化 html 表格，我必须将其导出为 PDF。目前我正在使用 jsPDF 库。 制作PDF() { var elWidth = this.el.nativeElement.getBoundingClientRect().width ...

如何将元素数组转换为 NodeList？

首先，这不是问如何将 NodeList 转换为 Array。这是相反的。 为了保持一致性，我想创建一个返回 NodeList 的函数，就像...

如何使用 JavaScript fetch 方法更新 DOM 以从 API 过滤用户数据？

我希望从 API 获取数据并使用 JavaScript 获取功能在 HTML 页面中显示。 JavaScript 代码详述如下。我可以从API读取用户数据的console.log。然而，n...