dom 相关问题

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

让我们假设以下基本 HTML：这是第1段的内容。 …… 让我们假设以下基本 HTML： <!DOCTYPE html> <html> <body> <p> This is the content of paragraph 1. </p> <p> This is the content of paragraph 2. </p> <p> This is the content of paragraph 3. </p> <p> This is the content of paragraph 4. </p> </body> </html> 我们还假设，我有一个所有文本节点的列表nodes。所以例如nodes[0] 将返回对应于第一段的文本节点，nodes[0].parentNOde 将返回第一段的实际 <p> 元素。我希望能够突出显示任何子字符串。假设我想突出显示文本 content of paragraph 1. This is the content of paragraph 2. 我拥有的是节点的索引以及要突出显示的文本的偏移量。所以在这个例子中，我给出了以下内容： start_node_index = 0 stat_node_offset = 14 end_nod_index = 1 end_node_offset = 0 注意：偏移量是相对于给定节点的文本字符串的字符。开始我们从左边数，结束我们从右边数。总结一下：给定的是 HTML resp。 DOM，实际要高亮的字符串以及基于自制索引在 DOM 树中的位置。我现在如何突出显示字符串？我不在乎我们是否将spans与CSS或<mark>元素一起使用。我们能否以某种方式简单地在开头添加 <mark> 并在末尾添加 </mark> 并让 DOM 更新算法为我们处理 DOM 更新，还是我必须自己编写一个复杂的算法来处理所有边缘情况？此处的最佳解决方案是为第一段中的文本添加一次<mark>，然后为第二段再次添加一次。有没有可能以某种方式使它自动化，所以我不必关心它？我想补充一点：因为我们有一个所有文本节点的节点列表，我们也知道开始节点和结束节点之间的所有文本节点，我们可以从中构建整个子树，这反过来又可以写我自己的算法，但我真的不想那样做。一些浏览器（目前除了 Firefox 和 Safari）支持 Text Fragments，这正是您想要的，但您无需手动计算偏移量，而是指定两个关键字来分隔开始 (textStart) 和结束(textEnd) 要突出显示的文本，浏览器会自动完成这项工作。您还可以指定要突出显示的整个字符串。所以在你的情况下，它会很简单： https://yoursite.com/#:~:text=第1段的内容。这是第2段的内容。如果您不想将该链接传递给您的用户，您可以使用一个自动添加片段的脚本。像这样的东西： location.hash = ":~:text=content of paragraph 1. This is the content of paragraph 2."; 请注意，更改 location.hash 属性不会导致重定向，即不会重新加载页面。甚至可以通过连接 & 来突出显示多个文本，如我提供的参考资料（具有多个文本片段的 URLs）所示。

javascript html dom

回答 1 投票 0

创建 React Ref 然后传递给组件

我正在根据我创建的对象动态制作各种 div，然后允许用户编辑 div，但我需要访问 div 上的 ref，以便我可以检查 div 的位置...

reactjs dom redux next.js ref

回答 0 投票 0

React Router 不工作 - 页面上没有任何内容

反应路由器不工作，因为尽管使用了路由器和路径，但我的反应页面上没有显示任何内容。这是我的代码：反应路由器不工作... 我安装了 react-router-dom 并导入了

javascript reactjs dom react-router router

回答 0 投票 0

这个使用js的计数器代码有什么问题

计数器没有正确响应，当我在单击减少 btn 计数器时运行此代码时，计数器显示 1 并在控制台中返回 -1。再次单击它会继续记录 0。 const dec=文档.

javascript function dom counter

回答 1 投票 0

通过删除 `<script type="text/plain"... />` 的类型属性延迟脚本加载不适用于 firefox

我目前正在为 NextJS 开发自定义 cookie 同意解决方案，它似乎已经很好地适用于这种方法：同意后应加载头部中的所有脚本...

javascript html dom firefox browser

回答 1 投票 0

如果我将它存储在变量中，为什么我的输入值总是空的？

我正在尝试从我的字段中获取值属性，以便稍后可以使用它从特定的 API URL 中获取数据。问题是无论 w... 我的

javascript html variables dom

回答 1 投票 0

如何让 for 循环在 JavaScript 中创建多个 eventListener？ [重复]

大家。我正在尝试操纵 DOM，因此每当用户单击类别时，我都希望他们的背景变为粉红色。我试图只向其中的第一个添加一个 eventListener

javascript html dom

回答 1 投票 0

Failed to execute 'removeChild' on 'Node': 要删除的节点不是该节点的子节点。在输入框输入时出现此错误

我正在尝试制作一个待办事项应用程序，其中我在删除元素时创建了删除功能，元素被成功删除但是一旦我在输入框中键入我就会收到此错误。辉...

javascript reactjs dom

回答 2 投票 0

如何从 DOM 中删除兄弟姐妹？

我有这个工作代码： a.parentNode.removeChild(a); 我还需要删除这个孩子的前一个兄弟姐妹，即它之前的元素。我该如何更新？ MDN有文档吗...

javascript html dom

回答 3 投票 0

当我尝试将 innerHTML 放在 JavaScript 中的变量上时，为什么会收到错误代码？ [关闭]

所以我目前正在尝试将 innerText 添加到一个内部有跨度的变量中。这个跨度将在一个 div 中结束，它最终在我的 html 页面的一个部分中。我的代码编辑器给出了这个错误...

javascript dom innerhtml innertext

回答 0 投票 0

快速滚动时，您使用哪个事件来即时检测元素上的光标？

我注意到当我在元素上快速滚动时，不会触发诸如滚轮或鼠标悬停之类的事件。你在这种情况下使用什么？我尝试使用滚轮和鼠标悬停事件

javascript dom

回答 1 投票 0

有没有办法强制 DOM 在重复调用 JavaScript 提示之间更新？

我正在尝试让程序进入页面提示和更新之间的循环。但是，如果我将这个问题隔离开来，在这种情况下是两个追加调用和两个提示，我的行为

javascript dom prompt

回答 1 投票 0

在 localStorage 中保存一个段落，这样当页面重新加载时它会显示，除非它被删除

我怎么能在 localStorage 中保存一个元素，一旦按钮执行一个功能，它就会显示出来，并且在重新加载后保持不变，除非它被删除我怎么能在 localStorage 中保存一个元素，一旦按钮执行一个功能，它就会显示出来，并且在重新加载后保持不变，除非它被删除 <div class="newd"> <button class="create" >create task</button> </div> let ids1 = document.getElementById('ids') let ids2 = document.getElementById('ids2') let ids3 = document.getElementById('ids3') let newd = document.getElementsByClassName('newd') let buttonCreateTask = document.getElementsByClassName('create') function createTask() { let paro = document.createElement('p') let remove = document.createElement('button') remove.innerHTML = 'X' paro.innerText = ids1.value + '\n' + ids2.value + '\n' + ids3.value paro.appendChild(remove) remove.onclick = function() { paro.remove() } if (ids1.value !== '') { if (ids2.value !== '') { if (ids3.value !== '') { newd[0].appendChild(paro) ids1.value = '' ids2.value = '' ids3.value = '' //tried to store it like this localStorage.setItem('saved', newd[0]) } else { console.log('missing date') } } else { console.log('missing description') } } else { console.log('missing value') } return paro } buttonCreateTask[0].addEventListener('click', createTask) let saved = localStorage.getItem('saved') if (saved) { document.body.appendChild(saved) } buttonCreateTask 单击后生成任务，但如果我重新加载，创建的元素就会消失。我试着做 document.body.appendChild(saved) 但这给了我未捕获的类型错误：无法在“节点”上执行“appendchild”参数 1 不是“节点”类型。如何使用 localStorage 保存它？你可以存储你给变量“paro”的值，当你想再次显示它时，你可以创建一个新元素并使用存储的数据作为它的值或“innerText”。希望对您有所帮助！您可以将元素的innerHTML存储在localStorage中，并使用事件委托来处理删除按钮。但是，此时最好重新考虑设计。 // ... let prevContent = localStorage.getItem('saved'); if (prevContent) newd[0].innerHTML = prevContent; newd[0].addEventListener('click', function(e){ if (e.target.matches('button.remove')) { e.target.parentElement.remove(); localStorage.setItem('saved', newd[0].innerHTML) } }); let buttonCreateTask = document.querySelector('.create'); buttonCreateTask.addEventListener('click', createTask); function createTask (){ let paro = document.createElement('p') let remove = document.createElement('button') remove.classList.add('remove'); remove.innerHTML = 'X' paro.innerText = ids1.value + '\n' + ids2.value + '\n' + ids3.value paro.appendChild(remove) newd[0].appendChild(paro) ids1.value = '' ids2.value = '' ids3.value = '' localStorage.setItem('saved', newd[0].innerHTML) return paro }

javascript html dom local-storage

回答 2 投票 0

如何在javascript中检查是否有某些连续的复选框被选中并添加折扣和相反

我有一个带有 7 个复选框的表单，这些复选框具有数据计算属性。我想在连续检查 3 到 5 时操作数据计算值。获得第一个折扣和第三个折扣...

javascript html forms dom

回答 2 投票 0

如何通过单击 HTML 按钮向 div 添加多个元素

我一直在开发 ToDo 应用程序，我已经通过单击按钮设法创建了一个任务，问题是我希望它在单击 createButton 时继续创建任务，但它只执行一次。怎么

javascript html dom

回答 1 投票 0

简单的 html dom 解析器获取元素之间的 html

我正在使用 PHP Simple HTML Dom 库从网页获取 HTML。我需要在“div.page-content”内的第一个标签和第一个“h4”标签之间获取 HTML。例子：我正在使用 PHP Simple HTML Dom 库从网页获取 HTML。我需要在“div.page-content”内的第一个标签和第一个“h4”标签之间获取 HTML。例子： <div class="page-content"> First text <p>Second text</p> <div>Third text</div> <p>More text</p> <h4>Subtitle 1</h4> <p>bla bla</p> <p>bla bla</p> <h4>Subtitle 2</h4> <p>bla bla</p> <p>bla bla</p> </div> 我试过这样做： $start = $html->find('div.page-content p', 0); while ( $next = $start->next_sibling() ) { if ( $next->tag == 'h4') break; else{ echo $next->plaintext; echo '<br/>'; $start = $next; } } 但它只获取第二个、第三个和更多的文本，没有第一个文本。我需要全部获取： First text <p>Second text</p> <div>Third text</div> <p>More text</p>

php html dom

回答 0 投票 0

为什么我动态添加的 Javascript 元素在刷新我的网站后消失了？ [关闭]

我目前正在为我的学校项目申请编写成绩显示页面。该代码应该动态地将 overallGWA、maxGWA 和拉丁荣誉标题添加到页面。它有效

javascript html dom

回答 0 投票 0

如何通过抓取 <li> 标签的 <ol> 标签使用 javascript 添加样式？ [关闭]

我有以下任务要完成，但我对此感到困惑。我不确定 javascript 应该如何组合在一起并尝试了多种组合。 UL> li>乌诺...

javascript html css dom

回答 1 投票 0

为什么每两次按键只触发一次渲染？

问题：目标：每次我按下“W+C+N”键时，屏幕上都会随机出现一个图像。实际结果：图像仅每两次按键出现一次。例如，如果我按 4 次 &...