HTML5中的DOM新特性_ZenDei技術網路在線

HTML5中的DOM新特性

-Advertisement-

元素下的classList屬性 classList屬性下麵有四個方法： add( value ): 添加，已存在的屬性不添加 remove( value )：刪除屬性 contain( value )：檢測屬性是否存在，返回布爾型 toggle( value )：檢測屬性，存在將其刪除，不存在添加 ...

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;
            width: 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>

您的分享是我們最大的動力!