189 8069 5689

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         

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

DOM扩展-HTML5、专有扩展

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";

DOM扩展-HTML5、专有扩展

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

 

插入标记

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

DOM扩展-HTML5、专有扩展

1         
2             

This is a paragraphwith a list following it.

3             
    4                 
  • Item 1
  • 5                 
  • Item 2
  • 6                 
  • Item 3
  • 7             
8         

DOM扩展-HTML5、专有扩展

对于上面的

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

1         

This is a paragraphwith a list following it.

2         
    3             
  • Item 1
  • 4             
  • Item 2
  • 5             
  • Item 3
  • 6         

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