HTML5新增了哪些内容或API

1.document.querySelector()和document.querySelectorAll()

document.querySelector()：根据css选择器返回第一个匹配的元素，如果没有匹配返回null；

document.querySelectorAll("selector")：querySelectorAll和querySelector作用一样的，只是querySelectorAll返回的是元素数组，querySelector返回的是一个元素。如果querySelectorAll没有匹配的内容返回的是一个空数组。

 

2.document.getElementsByClassName()

getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。

 

3.classList属性

• add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
• contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
• remove(value)：从列表中删除给定的字符串。
• toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它

 

4.自定义数据属性

HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来看一个例子。

<div id="myDiv" data-myname="mike"></div>

1 var div=document.getElementById('myDiv');
2 if(div.dataset.myname){alert(div.dataset.myname);}

 

5.insertAdjacentHtml(),insertAdjacentText(),insertAdjacentElement()

插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接收两个参数：插入位置和要插入的HTML 文本。第一个参数必须是下列值之一：

• "beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
• "afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
• "beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
• "afterend"，在当前元素之后插入一个紧邻的同辈元素。

--element.insertAdjacentHTML('beforebegin','<p>hello world</p>');

 

6.FullScreen API...

 

7.页面可见性（Page Visibility）...

 

8.预加载（prefetch）

1 <link rel='prefetch' href='page1.html'>
2 <link rel='dns-prefetch' href='flower.png'>

 

 

8.图形元素（The Figure Element）

1 <figure>
2     <img src="path/to/image" alt="About image" />
3     <figcaption>
4         <p>This is an image of something interesting. </p>
5     </figcaption>
6 </figure>

 

9.内容可编辑（contenteditable）

1 <ul contenteditable=true>
2     <li>i am editable</li>
3     <li>i am editable too</li>
4     <li>i am editable too too</li>
5 </ul>

 

10.本地存储（Local Storage）

 1 <script type="text/javascript">
 2 //localStorage方法
 3 if (localStorage.pagecount)
 4     {
 5     localStorage.pagecount=Number(localStorage.pagecount) +1;
 6     }
 7 else
 8     {
 9     localStorage.pagecount=1;
10     }
11 document.write("Visits: " + localStorage.pagecount + " time(s).");
12 
13 
14 //sessionStorage方法
15 if (sessionStorage.pagecount)
16   {
17   sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
18   }
19 else
20   {
21   sessionStorage.pagecount=1;
22   }
23 document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
24 </script> 

 

转载于:https://www.cnblogs.com/deric/p/HTML.html