DOM扩展-HTML5、专有扩展

专注于为中小企业提供成都网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业新城免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

 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