html5 新dom,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","

hello world!

");

div.insertAdjacentHTML("afterbegin","

hello world!

");

div.insertAdjacentHTML("beforeend","

hello world!

");

div.insertAdjacentHTML("afterend","

hello world!

");

scrollIntoView()方法

參數為布爾型：

true：瀏覽器窗口移動到指定元素的頂部；

false: 瀏覽器窗口移動到指定元素的底部；

HTML5_ScrollInToView方法

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

document.querySelectorAll(".go_top")[i].οnclick=function(){

document.body.scrollIntoView(true);

};

}

}

.scroll{

background-color: #0000FF;

width: 100%;

height: 800px;

text-align: center;

line-height: 800px;

font-size: 100px;

}

一

二

三

四

下去

回去一

回去二

回去三

回去四