JavaScript DOM扩展——“HTML5”的注意要点

  • A+
所属分类:JavaScript

 

与类相关的扩充

getElementsByClassName()方法

接收一个参数,即一个或多个类名的字符串。如:

他返回的对象是NodeList。

classList属性

该属性是DOMTokenList 的实例。主要的方法有:

  • add(value)
  • contaiin(value)
  • remove(value)
  • toggle(value)

如:

如果不用classList属性,则需要通过className属性来操作。如:

以下面的代码为例:

js部分如下:

焦点管理

document.activeElement属性

这个属性会引用Dom中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入(Tab键)和在代码中调用focus()方法如:

以上代码会write当前获得焦点的元素;文档刚刚加载完成时,document.activeElement中保存的是document.body元素的引用。文档加载期间则为null。

document.hasFocus()方法,这个方法用于确定文档是否获得了焦点。如:

HTMLDocument的变化

readyState属性

该属性可能有两个值:loading(正在加载文档);complete(加载文档完毕)用法是套用if条件语句:

compatMode属性(兼容模式)

这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。标准模式下为CSS1Compat;混杂模式下为BackCompat如:

head属性

引用文档的head元素,可以结合使用这个属性和另一种后备方法。

字符集属性

charset属性和defaultCharset属性

前者为文档中实际使用的字符集;后者为文档默认的字符集应该是什么;如:

自定义数据属性

dataset属性和data-name形式的属性

前者是用来访问自定义属性的值;后者则是添加非标准属性的格式;如:

插入标记

通过DOM操作对要插入大量新的HTML标记下非常麻烦;使用插入标记技术则更加方便。

innerHTML属性

在读模式下,该属性返回HTML标记;如:

 

在写模式下,该属性则根据指定创建新的DOM树,然后会用这个DOM树完全替换掉原先的所有子节点;如:

不通的浏览器返回的文本格式会有所不同,不要指望所有浏览器返回的值完全一样。

如果设置的值没有HTML标签,那么结果就是设置纯文本。

另外,需要注意的是,该属性插入script元素并不会执行其中的脚本。但在IE8及更早的中,元素script被指定为defer属性以及位于“有作用域的元素”之后才会执行。

大多数浏览器都支持插入style元素,但IE8及更早的版本则需要前置一个“有作用域的元素”。

不支持innerHTML属性的元素有:col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot和tr。

在IE8中,window.toStaticHTML()方法接收一个HTML字符串,返回一个经过无害处理后的版本。

outerHTML属性

同样的,在读模式下返回调用它的元素及所有子节点的HTML标签。在写模式下,会创建新的DOM子树,然后用这个DOM子树完全替换调用元素。如:

innerHTML与outerHTML两者的区别如下:

insertAdjacentHTML()方法

该方法接收两个参数:一个是要插入的位置;另一个是要插入的HTML文本。第一个参数可选择以下值:

  • beforebegin:在当前元素之前插入一个相邻的同辈元素;
  • afterend:在当前元素之后插入一个相邻的同辈元素;
  • beforeend:在最后一个子元素之后再插入一个新的子元素;
  • afterbegin:在第一个子元素之前再插入一个新的子元素;

如下:

scrollIntoView()方法

该方法可以在所有HTML元素上调用,如果给这个方法传入true,或者不传入参数,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入FALSE,调用元素会尽可能全部出现在视口中。如:

没考虑兼容性

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: