HTML5

与类相关的扩充

1、getElementsByClassName()方法

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

1         //取得所有类中包含"username"和"current"的元素，类名的先后顺序不重要2         var allCurrentUsername = document.getElementsByClassName('username current');3         //取得ID为'myDiv'的元素中都带有类名"selected"的所有元素4         var selected = document.getElementById('myDiv').getElementsByClassName('selected');

调用这个方法时，只有位于调用元素子树中的元素才会返回。

2、classList属性

在操作类名时，需要通过className属性添加，删除和替换类名。因为className中是一个字符串，所以即使只修改字符串的一部分，也必须每次都设置整个字符串。HTML5新增加了一种操作类名的方式，那就是为所有元素都添加classList属性。这个classList属性是新集合类型DOMTiokenList的实例。与其他DOM集合类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法：

//Alt + 41406、Alt + 41407
【1】add(value):将给定的字符串添加到列表中，如果以存在就不在添加；
【2】contains(value):表示列表中是否存在给定的值，如果存在就返回true，反之返回false；
【3】remove(value):从列表中删除给定的字符串；
【4】toggle(value):如果列表中存在给定的值，删除它，如果列表中没有给定的值，添加它；

1         //添加"currrent"类2         div.classList.add('current');3         //切换"user"类4         div.classList.toggle('user');

 

焦点管理

document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方法通常有页面加载，用户输入和在代码中调用focus()方法。

1         var button = document.getElementById('myButton');2         button.focus();3         console.log(document.activeElement === button); //true

默认情况下，文档刚刚加载完成时，document.activeElement的值为document.body，当文档加载时document.activeElement的值为null；

document.hasFocus()方法，这个方法用于确定文档是否获得了焦点；

1         var button = document.getElementById('myButton');2         button.focus();3         console.log(documet.hasFocus()); //true

 

HTMLDocument的变化

HTML5扩展了HTMLDocument，增加了新的功能
1、readyState属性

它有两个可能的值
【1】loading,正在加载文档。
【2】complete,已经加载完文档。

使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器

2、兼容模式

在标准模式下，document.compatMode的值等于"CSS1Compat",而在混杂模式下，document.compatMode的值等于"BackCompat"。

3、head属性

作为对document.body引用文档的元素的补充，HTML5新增了document.head属性，引用文档的元素，要引用文档的元素，可以结合使用这个属性和另一种后备方法。

1         var head = document.head || document.getElementsByTagName('head')[0];

 

字符集属性

HTML5新增了几个与文档字符集有关的属性，其中，charset属性表示文档中实际使用的字符集，也可以用来指定新字符集。默认情况下，这个属性的值为"UTF-16";

1         console.log(document.charset); //"UTF-16"2         document.charset = "UTF-8";

另一个属性是defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有默认的字符集，那charset和defaultCharset属性的值可能会不一样，例如：

1         if(document.charset != document.defaultCharset){2             console.log("Custom character set being used.");3         }

 

自定义数据属性

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

1         

添加了自定义属性后，可以通过dataset属性来访问自定义属性的值，只不过属性名没有data-前缀

1         var div = document.getElementById('myDiv');2 3         //取得自定义属性的值4         var appid = div.dataset.appid;5         var myName = div.dataset.myName;6 7         //设置值8         div.dataset.appid = 23456;9         div.dataset.myName = "Michael";

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性

 

插入标记

在读模式下，innerHTML属性会返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记；在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点；下面是一个例子

1         
2             
This is a paragraphwith a list following it.
3             
    4                 
  • Item 1
    • 5                 
  • Item 2
    • 6                 
  • Item 3
    • 7             
8         

对于上面的

来说，他的innerHTMl属性会返回如下字符串。

1         
This is a paragraphwith a list following it.
2         
    3             
  • Item 1
    • 4             
  • Item 2
    • 5             
  • Item 3
    • 6         

不要指望所有浏览器返回的innerHTML值完全相同,使用innerHTML属性也有一些限制。比如，在大多数浏览器中，通过innerHTML插入