1,与类相关的扩充
- getElementsByClassName()
- 可通过Document对象及所有HTML元素调用。
- 接收一个参数,包含一或多个类名的字符串。传入多个类名时,类名的先后顺序不重要。
- 返回带有指定类的所有元素的NodeList。
- classList属性
- 在操作类名时,通过className属性的话,若是多个类名一起的字符串,那么修改类名的时候,就需要有关于字符串操作的方法来修改className。
- HTML5新增了一种操作类名的方式,为所有元素添加classList属性。这个classList属性时新集合类型DOMTokenList的实例。与其他DOM集合类似,DOMTokenList有一个length属性。取得元素可以使用item()方法,也可以使用方括号语法。这个新类型还定义如下方法。
- add(value):将给定的字符串值添加到列表中,如果值存在,就不添加。
- contains(value):表示是否存在给定的值,存在返回true,不存在返回false。
- remove(value):从列表中删除给定的字符串。
- toggle(value):若存在给定值,删除它。若没有给定值,添加它。
- 有了classList属性,除非你需要全部删除所有类名,或者完全重写元素的class属性,否则就用不到className属性了。
2,焦点管理
- HTML5添加了辅助管理DOM焦点的功能。
- document.activeElement属性
- 这个属性始终会引用DOM中当前获得了焦点的元素。
- 文档刚刚加载完成时,保存的是documen.body元素的引用。
- focus()方法
- 元素获得焦点的方法。另外还有的方式有页面加载,用户输入。
- document.hasFocus()方法
- 确定文档是否获得了焦点。可以知道用户是不是正在与页面交互。
3,HTMLDocument的扩展
- readyState属性
- Document的readyState属性有两个可能的值:
- loading,正在加载文档;
- complete,已经加载完文档;
- Document的readyState属性有两个可能的值:
兼容模式compatMode属性
- CSS1Compat 代表标准模式
- BackCompat 代表混在模式
- 代码示例:
if (document.compatMode == "CSSCompat"){ alert("Standards mode"); }else{ alert("Quirks mode"); }
- head属性
- 引用文档的head元素。
4,字符集属性
- charset属性
- 表示文档中实际使用的字符集,也可用来指定新字符集。
- 默认为“UTF-16”。
- 可使用meta元素,响应头部或者直接设置charset属性修改这个值。
- 支持的浏览器有IE,Firefox,Safari,Opera,和Chrome。
- defaultCharset属性
- 表示当前浏览器及操作系统默认的字符。
- 支持的浏览器有IE,Safari和Chrome。
5,自定义数据属性
- HTML5规定可以为元素添加非标准的属性,但要添加data-
- 目的是为元素提供与渲染无关的信息,或者提供语义信息。
- 可以通过元素的dataset属性来访问自定义属性的值。
dataset是DOMStringMap的一个实例,也就是一个名值对儿的映射。,只不过属性名没有data-前缀,如下代码所示:
var div = document.getElementById("myDiv"); var appId = div.dataset.appId; var myName = div.dataset.myname; div.dataset.appId = 23456; div.dataset.myname = "Michael"; if (div.dataset.myname){ alert("Hello," + div.dataset.myname); }
6,插入标记
- 需要给文档添加大量HTML标记的情况下,使用下面这些HTML5规范的扩展可以方便的进行。
innerHTML属性
- 返回与调用元素的所有子节点的HTML标记。
- 写模式下,genuine指定值创建新的DOM数,然后用新DOM数完全替换调用元素原先所有的子节点。
如下所示
<div id="content"> <p>This is a <strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
它的innerHTML属性会返回下列字符串
<p>This is a <strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
- 返回的文本格式因浏览器相异,IE和Opera会将所有标签转换为大写形式,而Safari,Chrome和Firefox会按照原文本格式返回。
- innerHTML属性的一些限制
- script元素并不会执行其中的脚本(IE8及更早版本除外,但必须满足一些条件,具体参看《JavaScript高级程序设计p295》)
- 大多数浏览器都支持以直观的方式通过innerHTML插入style元素。
- 不支持innerHTML元素的有:col,colgroup,frameset,head,html,style,table,tbody,thead,tfoot,tr,在IE8及更早版本title也不支持。
- outerHTML属性
- 返回调用它的元素及所有子节点的HTML标签。
- 写模式下,根据指定的值,替换元素本身以及元素的子树。
insertAdjacenetHTML()方法
- 接收两个参数
- 插入位置字符串
- beforebegin
- afterbegin
- beforeend
- afterend
- 要插入的文本
- 插入位置字符串
代码示例
element.insertAdjacentHTML("beforebegin","<p>Hello world!</p>");
- 接收两个参数
- scrollIntoView()方法
- 如果传入true
- 窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
- 传入false
- 调用元素会尽可能全部出现在是口中,可能的话,调用元素的顶部会与视口顶部平齐。
- 如果传入true