DOM学习笔记（3）

HTMLDocument的变化

HTML5扩展了HTMLDocument，增加了新的功能，与DOM扩展类似，这些变化同样基于哪些已经得到很多浏览器完美支持的专有扩展。所以尽管这些扩展被写入标准的时间相对不长，但很多浏览器很早已经支持这些功能了。

readyState属性

Document的readyState属性有loading和complete 这两个值，使用它最恰当的方法就是通过它来实现一个指示文档已经加载完成的指示器。在这个属性得到广泛支持前，一般通过onload事件处理机制来确定文档加载完毕

if(document.readyState=="complete"){
    //do someThing
}

我们在前面也使用过兼容模式的代码，IE给document添加了一个名为compatMode的属性，这个属性就是为了告诉大家浏览器使用了标准模式还是混杂模式。在标准模式下，document.compatMode的值等于CSS1Compat，在混杂模式下，document.compatMode的值等于BackCompat。

if(document.compatMode=="CSS1Compat"){
    alert("标准模式");
}else{
    alert("混杂模式");
}

插入标记

innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。在写模式下，innerHTML会根据选定的值创建新的DOM树，然后利用这个DOM树完全替换调用元素原先的所有子节点。

<div id="content">
    <p>this is a<strong> picture </strong>with a list</p>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>
var myDiv=document.getElementById("content");
console.log(myDiv.innerHTML)//输出div下所有的node节点
console.log(myDiv.outerHTML)//输出包括div的所有节点

scrollIntoView()方法可以在所有HTML元素上调用，通过滚动浏览器窗口的某个容器元素，调用元素就可以出现在视图中，如果给这个方法传入true，或者传入任何参数，那么窗口滚动之后会调用元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中.

文档模式

页面的文档模式决定了可以使用什么功能，要强制浏览器以某种模式渲染页面，可以使用HTTP头部信息X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">//IEversion是一个值

• Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明。始终保持标准模式渲染
• EmulateIE9：如果有文档声明，则以IE9标准模式渲染页面，否则将文档设置为IE5
• EmulateIE8：如果有文档声明，则以IE8标准模式渲染页面，否则将文档设置为IE5
• EmulateIE7：如果有文档声明，则以IE7标准模式渲染页面，否则将文档设置为IE5
• 9：强制以IE9标准模式渲染页面，忽略文档声明
• 8：强制以IE8标准模式渲染页面，忽略文档声明
• 7：强制以IE7标准模式渲染页面，忽略文档声明
• 5：强制以IE5标准模式渲染页面，忽略文档声明