HTML5中的DOM新特性

HTML5的范围十分广泛，这里只对DOM节点部分进行相应的总结，部分常用知识点如：getElementsByClassName()，charset().并没有对进行过多的阐述。

元素下的classList属性

classList属性下面有四个方法：

add(value): 添加，已存在的属性不添加
remove(value)：删除属性
contain(value)：检测属性是否存在，返回布尔型
toggle(value)：检测属性，存在将其删除，不存在添加

    //删除“disable”类
    div.classList.remove("disable");
    
    //添加“current”类
    div.classList.add("current");
    
    //是否存在"Class"类
    div.classList.contain("Class");
    
    //检测“toggle”类 
    div.classList.toggle("toggle");

readyState属性

readyState属性有两个值：

loading：正在加载的文档
complete：已经加载完的文档

innerHTML和outerHTML的区别

innerHTML可以返回元素内的所有子元素
outerHTML可以返回包括元素本身和所有子元素

insertADjacentHTML()方法

insertADjacentHTML()可以接收两个参数

第一个参数：

"beforebegin"：在该元素之前的位置插入一个节点
"afterbegin": 在元素下的子元素内的第一个位置，插入节点
"beforeend": 在元素下的子元素内的最后一个位置，插入节点
"beforebegin"：在该元素之后的位置插入一个节点

第二个参数：HTML字符串

//代码中的使用
    div.insertAdjacentHTML("beforebegin","<p>hello world!</p>");
    
    div.insertAdjacentHTML("afterbegin","<p>hello world!</p>");
    
    div.insertAdjacentHTML("beforeend","<p>hello world!</p>");
    
    div.insertAdjacentHTML("afterend","<p>hello world!</p>");

scrollIntoView()方法

参数为布尔型：

true：浏览器窗口移动到指定元素的顶部；
false: 浏览器窗口移动到指定元素的底部；

<html>
<head>
    <title>HTML5_ScrollInToView方法</title>
    <meta  charset="utf-8">
    <script type="text/javascript">
        window.onload = function(){
            document.querySelector("#roll1").onclick = function(){
                document.querySelector("#scroll1").scrollIntoView(true);
            };
            document.querySelector("#roll2").onclick = function(){
                document.querySelector("#scroll2").scrollIntoView(true);
            };
            document.querySelector("#roll3").onclick = function(){
                document.querySelector("#scroll3").scrollIntoView(true);
            };
            document.querySelector("#roll4").onclick = function(){
                document.querySelector("#scroll4").scrollIntoView(true);
            };
            document.querySelector("#down").onclick = function(){
                document.body.scrollIntoView(false);
            };
            var len=document.querySelectorAll(".go_top").length;
            for(var i=0;i<len;i++){
                document.querySelectorAll(".go_top")[i].onclick=function(){
                    document.body.scrollIntoView(true);
                };
            }
        }
    </script>
    <style type="text/css">
        .scroll{
            background-color: #0000FF;
             100%;
            height: 800px;
            text-align: center;
            line-height: 800px;
            font-size: 100px;
        }

    </style>
</head>
<body>
<button id="roll1">一</button>
<button id="roll2">二</button>
<button id="roll3">三</button>
<button id="roll4">四</button>
<button id="down">下去</button>
    <div id="scroll1" class="scroll"><button id="go_top1" class="go_top">回去</button>一</div>
    <div id="scroll2" class="scroll" style="background-color: #07B57A"><button id="go_top2" class="go_top">回去</button>二</div>
    <div id="scroll3" class="scroll" style="background-color:#3a3019;"><button id="go_top3" class="go_top">回去</button>三</div>
    <div id="scroll4" class="scroll" style="background-color: #f73463"><button id="go_top4" class="go_top">回去</button>四</div>
</body>
</html>