by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12246
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
一、先说setHTML方法
之前有介绍过setHTMLUnsafe()方法，稍等，让我找一下。
找到了，就是这篇：介绍两个DOM新方法setHTMLUnsafe和getHTML
是去年4月份介绍的，距今有15个月。
当时setHTML()方法还未支持，谁知才没过多久，Chrome浏览器就已经支持了此特性。
关于setHTML
setHTML()方法设置HTML字符串内容的时候，会自动进行XSS过滤，会自动移除<script>、<frame>、<iframe>、<embed>、<object>、<use>以及事件处理程序属性。
而setHTMLUnsafe()方法则不会，setHTMLUnsafe()方法的行为表现更接近于innerHTML方法。
举个例子：
<div id="container"></div>
<p>
<button id="b1">setHTML()方法</button>
<button id="b2">setHTMLUnsafe()方法</button>
</p>const str = `<script>console.log('糟了，中了刀盾');</script>
<img src="book.webp" onload="this.style.border= 'red solid'">
<details>
<summary>HTML并不简单</summary>
<p>感谢大家正版支持，无论环境如何变化，学习总是不要停止的。</p>
</details>
<p>普通文字也不显示？</p>`;
b1.onclick = () => {
container.setHTML(str);
}
b2.onclick = () => {
container.setHTMLUnsafe(str);
}结果最终的运行结果远超自己的预期！
我一开始预估的是：
<script>元素被过滤；onload属性过滤，但是图片元素保留。<details>元素正常显示，再退一步，可能交互功能过滤，只有纯文本
setHTML(str)方法执行后，container容器里面唯一存活的元素就是<p>元素，而前面的<script>、<img>、<details>元素通通消失不见了。
这特么过滤的也太狠了，根本就没法使用了！
setHTMLUnsafe()方法则符合预期，图片正常显示，onload方法也正常执行了，<details>元素的展开与收起交互也是正常的。
峰回路转，可选参数
后来我一看文档，发现setHTML()方法支持可选参数，可以指定过滤的元素和属性。
我就说嘛，怎么会有设计这么鸡肋的方法。
不过这个可选参数还不太好理解，称为Sanitizer 或者 SanitizerConfig 对象。
嗯……这个时候最快的学习方法就是案例。
比方说允许的可选参数示意：
const sanitizer = new Sanitizer({
elements: ["div", "p", "script"],
attributes: ["id"],
replaceWithChildrenElements: ["b"],
comments: true,
dataAttributes: false,
});移除的参数示意：
const sanitizer = new Sanitizer({
removeElements: ["span", "script"],
removeAttributes: ["lang", "id"],
comments: false,
});回到这里，如果我希望setHTML的时候，仅仅script元素和onload属性被过滤，可以这么设置：
const sanitizer = new Sanitizer({
removeElements: ["script"],
removeAttributes: ["onload"],
});
container.setHTML(str, {
sanitizer
});此时，container里面的元素呈现就符合预期了！
眼见为实，您可以狠狠地点击这里：setHTML和setHTMLUnsafe方法效果对比demo
二、Element.startViewTransition指的是？
startViewTransition其实之前也介绍过，是这篇文章：页面级可视动画View Transitions API初体验
看了下发布日期，是两年前的作品了。
不过那个时候startViewTransition只能在document文档对象中调用，也就是只能是页面级的可视过渡效果。
现在startViewTransition API的应用范围再次升级，可以在任意的HTML元素DOM上调用。
先看兼容性，同样目前仅Chrome浏览器支持：
startViewTransition可以让元素状态发生变化的时候天然产生动画效果，而不需要额外进行CSS设置（当然，CSS设置也是可以的，但不是必须的）。
举个简单的例子，点击某个按钮，删除元素。
如果我们直接使用Elememt.remove()方法，元素会突然噶掉，就像跌落的股价令人猝不及防。
但是在startViewTransition()回调中调用，则自然而然会有过渡动画效果。
眼见为实，您可以狠狠地点击这里：Element.startViewTransition方法demo演示
container.startViewTransition(() => {
img.remove();
});效果GIF：
需要注意的是，startViewTransition()方法只能设置在需要进行动画效果的容器元素上，设置在当前元素上是无效的。
相比全局的code>document.startViewTransition()方法，Element.startViewTransition()控制范围更精准，通常而言，性能也更高。
同样的，此处的可视过渡效果也支持使用::view-transition-group等伪元素进行类似于过渡时长，类型等效果的设置。
具体参见之前撰写的这篇文章，这里不再赘述。
三、总结一下
本文介绍了两个DOM新特性都还算有不错的应用价值，不过受制于兼容性，短期还是看不到在生产环境应用的可能性。
目前大家了解下即可。
最后还有点闲功夫，分享下上周自驾游一件幸运的事情。
去盐城中华麋鹿园看麋鹿的，结果破天荒偶遇鹿王争霸，目睹全程近10分钟的火拼，鹿角碰撞的时候哐哐作响，最后打到双眼血红，双双口吐鲜血，真是往死里干啊！
不过人品是守恒的，我已经开始担心我接下来的钓鱼收获会不会变得惨淡了。
最后，南宫阙师姐压轴！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12246
（本篇完）