[JavaScript]DOM扩展（二）_dom afterend-优快云博客

本文链接：https://blog.youkuaiyun.com/fqq_5280/article/details/81587992

插入标记

之前的DOM提供的插入节点的操作在插入多个节点的时候十分繁杂，如果使用插入标记的方法，直接向文档中插入HTML字符串，由执行环境自动解析HTML字符串并创建相应的节点并添加到文档中，这样的话操作就方便多了。

`innerHTML`属性

在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。
在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用这个DOM树完成替换调用元素原先的所有子节点。

但是不同浏览器返回的文本格式会有所不同，
IE8及以下的浏览器，在使用innerHTML属性时返回的字符串有两处不同：

所有的标签都会转为大写
所有的空白节点都会被去掉

innerHTML的使用也存在一些限制，

1.<script>元素
在大部分浏览器中，通过innerHTML插入的<script>标签不会被执行，只有IE9及以下的浏览器会执行，但也需要满足一定的条件，首先需要为script添加defer特性，其次<script>标签必须位于”有作用域”的元素之后(“有作用域”的元素这里可以理解为会直观显示在页面上的元素，比如script，style这些元素是不会显示在页面上的，而input、div等元素会直接显示在页面上，因此可以称为”有作用域”)。
2. style和link标签
在IE8及以下的浏览器中，如果插入style标签，必须也要跟随在一个”有作用域”的元素之后，因此可以采用<script>一节中介绍的方法。高版本IE及其他浏览器中插入的style样式都可以被执行。
另外，如果使用link标签引入外部样式，那么和style标签的效果是一样的。
3. 还有一些元素是不支持innerHTML属性的，包括：<table>、 <thead>、 <tbody>、 <tfoot>、 <tr>、 <style>、 <html>、 <head>、 <frameset>、<col>、<colgroup>

`outerHTML`元素

outerHTML和innerHTML的区别：在读取或写入时除了包含所有子节点，同时也把自己算进去了。

`insertAdjacentHTML()`方法

这个方法接收两个参数：插入的位置和HTML字符串
插入位置：

“beforebegin”：在元素之前插入一个紧邻的同辈元素
“afterbegin”：如果元素没有子元素，那么就直接插入；如果元素有子元素，就在第一个子元素之前插入
“beforeend”：如果元素没有子元素，那么就直接插入；如果元素有子元素，就在最后一个子元素之后插入
“afterend”：在元素之后插入一个紧邻的同辈元素

`scrollIntoView()`方法

这个方法可以在所有HTML元素上面调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

如果给这个方法传入true作为参数，或者不传入参数，那么窗口滚动之后，会让调用元素的顶部与视口顶部尽可能平齐。
如果传入false作为参数，调用元素会尽可能全部出现在视口中（如果可能的话，调用元素底部会与视口底部平齐），不过顶部不一定平齐。

专有扩展

文档模式

IE8中引入了文档模式的概念，文档模式决定了我们可以使用哪些功能。
也就是说，文档模式决定了我们可以使用哪个级别的CSS，可以使用JavaScript API中的哪些功能以及如何对待文档类型。
ps. 之后的IE版本都提供了向下兼容的文档模式，比如在IE9中，可选的文档模式有：IE5(以混杂模式渲染页面)、IE7(以IE7的标准模式渲染页面)、IE8(以IE8的标准模式渲染页面，到了IE8，DOM Selectors API、CSS2.1的完整功能以部分CSS3的功能就都可以使用了)、IE9(以IE9的标准模式渲染页面，到了IE9，ES5、CSS3以及更多的HTML5的功能也都可以使用了)
要强制浏览器以某种模式渲染页面，可以通过设置HTTP的X-UA-Compatible头部或设置对应的meta标签来实现。

<meta http-equiv="x-ua-compatible" content="IE=IEVersion"/>

IEVersion可以是：
- edge：始终以最新的文档模式来渲染页面，忽略文档类型声明
- EmulateIEXX：XX代表某个IE版本，即如果有文档类型声明，那么就以XX版本的IE标准模式来渲染页面，否则把文档模式设为IE5
- XX：XX代表某个IE版本，即忽略文档类型声明，以XX版本的IE标准模式渲染页面

如果没有设置X-UA-Compatible，则浏览器会根据文档类型声明选择最佳的文档模式进行渲染
document.documentMode可以判断文档当前所处的文档模式，这个属性只有IE支持。