dom 相关问题

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

在使用和标签定义的自定义组件中，子元素可以获取作为自定义组件的父元素，然后使用此元素引用来访问... 在使用 <template> 和 <slot> 标签定义的自定义组件中，子元素可以获取作为自定义组件的父元素，然后使用此元素引用来访问类定义的变量和函数。但是，子元素如何知道哪个元素是自定义组件呢？模板本身包含在影子 DOM 中。当在页面上渲染自定义组件时，这个影子 DOM 会被克隆并附加到自定义组件中作为其宿主。插入到自定义组件中的元素似乎无法分辨它所附加的节点树来自克隆的影子 DOM 节点，并且无法分辨当前 DOM 树中的哪个元素是顶层自定义组件，除非它迭代每个 parentNode 以检查它们是否有 shadowRoot。如何让自定义组件内的子元素访问自定义组件的类变量和函数？ customElements.define("my-comp", class extends HTMLElement { creationTimestamp; constructor() { super(); let template = document.getElementById('my-template'); let templateContent = template.content; const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.appendChild(templateContent.cloneNode(true)); this.creationTimestamp = Date.now(); } }) <html> <template id="my-template"> I'm a new custom component using slots with value <slot name="slot1">default</slot> <button onclick="console.log(this.parentNode.host.creationTimestamp)">Print timestamp at Template level</button> </template> <my-comp> <span slot="slot1"> slotted value <div> <button onclick="console.log(this.parentNode.parentNode.parentNode.creationTimestamp)">Print timestamp</button> </div> </span> </my-comp> </html> 有几个非常简单的规则可以解耦 WebComponent：父级到子级：单向数据绑定或HTML5属性用于传递数据并调用child.func()来执行操作。子级到父级：子级触发事件。父母监听该事件。由于事件冒泡，您可以让任意数量的家长接收该事件，而无需额外的努力。标准 Web 组件也使用此模式（input、textbox 等）。它还允许轻松测试，因为您不必模拟父级。这是 Polymer 库描述的推荐模式，它是 WebComponent 的包装器。不幸的是，我找不到描述这种模式的具体文章。在以下示例中，父级侦听来自子级的事件，并调用自身的函数来影响其状态，或调用子级的函数以使它们执行某些操作。孩子们都不知道父母的事。这是一种干净的方式，可确保清晰，关注点分离。孩子做他该做的事；父母可以指示它做什么，甚至对其行为做出反应。相反，孩子从不指导父母，甚至不知道。现在我明白了。您想要防止： let timeStamp = this.parentNode.parentNode.parentNode.creationTimestamp; 有多个 StackOverflow 答案可以解决这个问题：让孩子找到家长控制：孩子模仿标准 JS .closest(selector)，它不会刺穿 ShadowRoots！具有自定义 closestElement(selector) 功能：自定义元素 getRootNode.closest() 函数跨越多个（父）shadowDOM 边界让父母告诉一些事情给孩子控制：父母通过递归深入进入shadowRoots：如何获取包含shadowRoot元素的文档或节点中的所有HTML 让家长响应孩子的来电控制：两者子级发送事件，父级需要监听通过自定义事件通信的Web组件无法发送数据

javascript html dom web-component

回答 2 投票 0

使用 DOM 解析 xml 时如何处理缺失标签？

我正在尝试使用 DOM 进行 XML 解析，但问题是某些地方缺少标签。告诉我如何处理这种情况，以便在没有它的情况下，将其他一些字符串写入数组...

java xml parsing dom

回答 1 投票 0

根据渲染时间信息（即行高）调整 React DOM 中的元素

上下文我使用 React JS 创建了一个带有行号的简单文本编辑器。它应该只编辑纯文本（即不需要富文本编辑）。文本输入字段用

javascript reactjs dom jsx

回答 1 投票 0

带有 3 个参数的函数，用于创建前置元素

这是我第一次在这里发帖，如果我说了什么奇怪的话，抱歉。我目前正在学习Javascript。我只是尝试创建一个有 3 个参数的函数，一个 Parent 元素，一个 eleme...

javascript html dom

回答 1 投票 0

如何在 contentEditable div 中的 p 标签中添加新行

我有一个 contentEditable div，每当我通过按 Enter 或 shift+enter 插入新行时，新行是 div 中的 textNode，但我希望新行位于 p 元素中。我想要一个简单的解决方案...

javascript reactjs dom next.js contenteditable

回答 1 投票 0

Java Selenium 和 Angular 2 | Webdriver 以可视方式清除文本字段，但不从 DOM 中清除

我有一个使用 Selenium Webdriver 用 Java 编写的测试，它在视觉上清除了用 Angular 2 编写的文本字段，但 Selenium 实际上并没有清除 DOM 中的字段。我需要收到来自...的警报

java angular dom selenium-webdriver

回答 2 投票 0

如何在 ul 中记录特定文本？

我无法弄清楚如何控制台记录 li 内部的innerText，而不是嵌套在 li 内部的 p。超文本标记语言坦克 t... 我不知道如何控制台记录 li 内部的innerText，而不是嵌套在 li 内部的 p。 HTML <ul id="list"> <li>Tank <p>this is tank</p> </li> <li>Warrior <p>this is warrior</p> </li> <li>Ninja <p>this is ninja</p> </li> </ul> JavaScript const listChoice = document.querySelectorAll('li') listChoice.forEach(cls => { cls.addEventListener('click', (e) => { const choice = e.target.innerText console.log(choice) if (choice === 'Tank') { console.log('You chose tank') } }) }) 我无法让我的选择变量等于目标innerText，以便console.log('you Choose Tank')显示在控制台中。我尝试使用firstChild，它记录了“Tank” 您试图在单击 li 元素时记录它们的内部文本。但是，由于 li 元素还包含 p 元素，因此您需要确保获得正确的文本。为此，请使用 li 元素的 textContent 属性，该属性检索 li 元素内的文本内容，然后使用 trim() 删除任何前导或尾随空格。通过此修改，您应该能够捕获 li 元素中的文本并使您的条件语句按预期工作。在此代码中，当您单击 li 元素时，它会记录该 li 元素的文本内容并检查它是否等于“Tank”以记录相应的消息。

javascript dom event-listener

回答 1 投票 0

为什么使用 CSS insertRule 时 DOM 没有更新？

我想向 DOM 添加 CSS 规则：这是我的代码函数empty_rule（工作表，类名）{ const索引=sheet.cssRules.length; sheet.insertRule(`.${class_name} { }`, index); 返回...

javascript css dom

回答 2 投票 0

useSignal 在更新对象中的值时重新渲染状态，为什么？

我注意到，当我更新信号变量中的单个值（例如（ const count = useSignal(0) ）时，DOM 不会重新渲染，但是当我更新对象的值时，DOM 会重新渲染） -渲染

reactjs dom signals

回答 1 投票 0

如何将 Shadow Dom 与 Javascript 和 CSS 模块一起使用

我正在尝试在我的 Javascript 模块中使用 Shadow DOM，并将 CSS 模块/工作表导入到 Javascript 模块中：- 模块.js 从 '/styles.css' 导入表断言 {type: 'css'}; 导出功能

javascript css dom es6-modules shadow-dom

回答 1 投票 0

如何修复这个错误？我正在使用超集来反应应用程序

我正在尝试将超集集成到我的应用程序中，但我不能，因为我遇到了这个错误，该错误与框架有关，而我在代码中没有使用框架，这是代码：从“re...

javascript reactjs dom apache-superset

回答 1 投票 0

在 Xamarin WebView (Visual Studio 2019) 中修改源 HTML

我知道使用 Visual Studio 创建 Android 应用程序并不流行，但我更喜欢它。不过，如果我需要使用 Android Studio，我可以。我的应用程序在 WebView 中加载网页。这部分有效。现在...

android html dom xamarin.android android-webview

回答 1 投票 0

Android Webview -> 在 webview 的 localStorage 中设置值时未捕获安全错误

我需要通过在本地和会话存储中设置一些属性来加载android中的webview。我尝试在 webView.evaluateJavascript("window.

javascript android dom webview android-webview

回答 2 投票 0

添加一些 DOM 之后恢复为纯 div

我有一个用html创建的div。在本次潜水中，我使用 JavaScript 添加了一些元素。然后我克隆了添加了这些新元素的 div。克隆过程完成后，我想要我创建的 div...

javascript html css dom

回答 1 投票 0

带有其他选项的下拉列表，允许我们手动添加值

我需要一个带有其他选项的下拉列表，如果用户的字段不在下拉列表中，它允许我们手动添加值。是否可以？提前致谢，巴拉吉

html css dom

回答 2 投票 0

在以编程方式单击之前必须手动单击搜索按钮

我正在尝试创建一个简单的 JS 函数，用于在 youtube 上搜索给定的字符串并返回第一个结果。我计划在打开 YouTube 的选项卡的控制台中运行它。这是我的...

javascript dom youtube

回答 1 投票 0

React 18 升级后 onScroll 不工作了

滚动时不会调用 onScroll 回调（scrollHandler）。这个问题是在我们从 React 16 升级到 React 18 后发生的。套餐详情 "react": "^18.2.0&quo...

javascript reactjs dom dom-events react-virtualized

回答 1 投票 0

如何防止从树中删除的 DOM 节点被虚假的强引用（例如闭包）所持有？

举个玩具示例，假设我有一个时钟小部件： { const clockElem = document.getElementById('clock'); const timefmt = new Intl.DateTimeFormat( '默认', { timeStyle: '中', });

javascript dom closures weak-references

回答 1 投票 0

如何防止在 `<input>` 元素之外触发撤消/重做事件

我想阻止在我的输入框中进行重做/撤消操作，但是当我在没有聚焦于输入框的情况下按cmd+z时，输入框中的文本仍然会被重做。 // stackoverflow '搜索...' 输入合作...

javascript html dom

回答 2 投票 0

Linkify.js.org (jQuery) HashTags：将默认 URL 目标更改为 Twitter？

我正在清理来自各种第三方 XML 源的 CDATA 内容，剥离所有 HTML 服务器端并使用 Linkify.js.org (v3.0.3) 安全地将 HTML 标签重新应用到清理后的纯文本链接客户端...

javascript jquery dom custom-data-attribute linkify

回答 2 投票 0

dom 相关问题

最新问题