getHTML() - 替代 innerHTML 的最佳方法

更新日期: 2024-11-09阅读: 877标签: dom

gethtml()的方法用于将元素的dom序列化为HTML字符串。该方法提供了一个选项参数,用于启用Shadow Root随着所有主流浏览器现已支持 getHTML() 方法,前端开发者有了一个强大的新工具来操作DOM。本文主要探讨 getHTML()的独特优势,特别是在处理Shadow DOM时的卓越表现。


getHTML()与innerHTML的异同

getHTML()和 innerHTML 的 getter 在基本功能上相似,都返回元素内部DOM树的HTML表示。但getHTML()的真正优势在于它能够包含Shadow DOM的HTML,而innerHTML则完全忽略Shadow DOM。


getHTML()的高级用法

getHTML()接受一个可选的options对象参数,通过适当的选项可以获取完整的HTML,包括Shadow DOM:

const container = document.body;
const host = createDiv(123);
const root = attachShadowDOM(host);
container.append(host);

console.log(container.getHTML({ shadowRoots: [root] }));

这段代码会返回包含声明式Shadow Root的完整HTML:

<div>
  <template shadowrootmode="open">
    <p>Paragraph <slot>default</slot></p>
  </template>
  123
</div>

如果在浏览器中将返回的 上面的 HTML 作为新页面打开,则会再现原始 DOM 树。

通常,shadow trees和slots是在自定义元素的构造函数中创建的,但为了保持上面和下面示例页面中的代码简单,这里没有创建任何自定义元素。相反,使用了两个辅助函数:

// shared.js

export function attach(host) {
    const shadowRoot = host.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = '<p>Paragraph <slot>default</slot></p>';
    return shadowRoot;
}
 
export function div(n) {
    const el = document.createElement('div');
    if (n) el.innerHTML = n;
    return el;
}

div(n)创建一个新的div元素,里面包含数字n,例如<div>123</div>,而attach(host)将HTML为<p>Paragraph <slot>default</slot></p>的shadow树附加到host元素上。为了用常见情况挑战getHTML(),div中的数字123被分配到shadow DOM的slot中。


处理嵌套的Shadow DOM

在上面的页面中,getHTML()被调用时使用了所有两个可能的选项:

<script type="module">
    import { attach, div } from './shared.js';

    const container=document.body;
    const host=div(123); 
    const root=attach(host);
    container.append(host);
 
    console.log('>innerHTML',container.innerHTML);
    console.log('>getHTML',container.getHTML());
    console.log('>getHTML2',container.getHTML({ serializableShadowRoots: true }));
    console.log('>getHTML3',container.getHTML({ shadowRoots: [root] }));
</script>

options对象可以有两个属性:serializableShadowRoots和shadowRoots。 当getHTML()在没有options的情况下被调用时,Shadow DOM会被忽略,就像在innerHTML中一样。

如果serializableShadowRoots为true,HTML将包括具有serializable属性设置为true的shadow roots。这样的roots通常不应该存在,因为serializable是与getHTML()一起引入的,默认情况下它是false。

要获取shadow roots的HTML,需要在shadowRoots属性中提供要序列化的shadow roots。当shadow roots是open的时候,可以很容易地递归检索网页中的所有shadow roots。在网页上下文中无法检索closed shadow roots,但可以在浏览器扩展注入的内容脚本中检索。

提供的shadow roots不一定会被序列化。在下一个示例页面中,创建了两个shadow trees。第二个shadow DOM嵌套在第一个中:

<script type="module">
    import { attach, div } from './shared.js';

    const container=document.body;
    const host=div(123); 
    const root=attach(host);
    container.append(host);

    const host2=div(456); 
    const root2=attach(host2);

    container.append(host);
    root.append(host2);

    console.log('>innerHTML',container.innerHTML);
    console.log('>getHTML',container.getHTML());
    console.log('>getHTML2',container.getHTML({ serializableShadowRoots: true }));
    console.log('>getHTML3',container.getHTML({ shadowRoots: [root] }));
    console.log('>getHTML4',container.getHTML({ shadowRoots: [root2] }));
    console.log('>getHTML5',container.getHTML({ shadowRoots: [root,root2] }));
</script>

如果第一个shadow DOM不包含在options中,getHTML()不会返回第二个shadow DOM的HTML: 要被序列化,shadow roots需要直接连接到要被序列化的DOM。如果省略了父shadow root,嵌套的shadow root也不会被序列化。


getHTML 局限性

  1. 缺少outerHTML等价物:目前还没有获取包含元素自身在内的HTML的方法。

  2. 单根元素限制:getHTML()返回的HTML如果没有单一根元素,浏览器可能无法正确解析为声明式Shadow DOM。

  3. 封闭的Shadow DOM:在网页上下文中无法获取封闭的Shadow DOM,但可以通过浏览器扩展的内容脚本来实现。


结语

getHTML()为开发者提供了一种强大的方法来处理包含Shadow DOM的复杂DOM结构。虽然它有一些限制,但在处理现代Web组件和复杂UI时,getHTML()的优势是显而易见的。随着Web组件的普及,掌握getHTML()将成为前端开发者的重要技能。

在实际开发中,getHTML()可以用于创建更精确的DOM快照、调试复杂的组件结构,以及在需要保留Shadow DOM结构的情况下序列化页面内容。随着Web标准的不断发展,我们可以期待看到更多类似getHTML()这样的强大api,进一步增强前端开发的能力和灵活性。的序列化。这些选项可用于包含已设置为的嵌套影子根serializable和/或指定的对象数组ShadowRoot,这些对象可以是开放的也可以是封闭的。如果没有参数,则不会序列化作为影子根的子节点,并且此方法的行为与读取的值相同Element.innerHTML。

来源:大迁世界

链接: https://fly63.com/article/detial/12717

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

归纳DOM事件中各种阻止方法

事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!