HTML5 新增内容和 API详解

第HTML5新增内容和API详解该属性用于在元素中添加，移除及切换CSS类。

classList属性返回元素的类名，作为DOMTokenList对象：

divid=div>

classList属性是只读的，但可以修改它：

add()：添加class

remove()：删除class

length：返回类列表中类的数量(只读属性)

contains()：判断指定的class是否存在

item(index)：返回元素中索引值对应的class

toggle()：在元素中切换class

divid=div>

querySelector()与querySelectorAll()

querySelector()

返回文档中匹配指定CSS选择器的第一个元素，如果没有匹配返回null

divid=divquerySelector1/div

div>

querySelectorAll()

方法返回文档中匹配指定CSS选择器的所有元素，返回NodeList对象，如果没有匹配空NodeList对象(NodeList[])

div>

getElementsByClassName()

方法返回文档中所有指定类名的元素集合，作为NodeList对象。

div>

自定义数据属性

inputtype=buttondata-index=10data-index-color=red

script

varbtn=document.querySelector(input

//访问自定义属性值

btn.dataset;//DOMStringMap{index:10,indexColor:red,name:zpf}

btn.dataset.index;//10

btn.dataset.indexColor;//red

btn.dataset.aaa;//undefined

//设置自定义属性值

btn.dataset.index=100;

btn.dataset.index;//100

btn.index=20;

btn.index;//20

//检测自定义属性值

nameinbtn.dataset;//false

=zpf

nameinbtn.dataset;//true

/script

localStorage、sessionStorage、cookie的区别及用法封装

insertAdjacentHtml()、insertAdjacentText()、insertAdjacentElement()

添加HTML内容与文本内容以前用的是innerHTML与innerText方法，现在还有insertAdjacentHTML和insertAdjacentText方法：

element.insertAdjacentHTML(position,text);

position是相对于元素的位置，并且必须是以下字符串之一：

beforebegin:元素自身的前面。

afterbegin:插入元素内部的第一个子节点之前。

beforeend:插入元素内部的最后一个子节点之后。

afterend:元素自身的后面。

text是要被解析为HTML或XML,并插入到DOM树中的字符串。

!--beforeBegin--

!--afterBegin--

!--beforeEnd--

!--afterEnd--

insertAdjacentHtml()、insertAdjacentText()

例：

pid=name张三/p

script

constdom=document.querySelector(#name

dom.insertAdjacentHTML(beforeEnd,ahref=Link/a

dom.insertAdjacentText(afterBegin,姓名：

/script

新结构变成：

pid=name

ahref=Link/a

insertAdjacentElement()

将指定的元素插入指定的位置

例：

pid=age年龄：20/p

pid=name张三/p

script

constdomAge=document.querySelector(#age

constdomName=document.querySelector(#name

domName.insertAdjacentElement(afterEnd,domAge);//将domAge元素放在domName元素的afterEnd位置

/script

新结构变成：

pid=name张三/p

pid=age年龄：20/p

内容可编辑(contenteditable)

divcontenteditable=true这是一段可编辑的段落。/div

script

setTimeout(()={

document.querySelector(div).innerText;

},3000);

/script

预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源。页面提供给浏览器需要预加载的集合。浏览器载入当前页面完成后，将会在后台下载需要预加载