1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>dom扩展之html5</title> 7 </head> 8 <button id="mybtn">btn</button> 9 <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div> 10 <body> 11 </body> 12 <script> 13 /* 14 与类相关的扩充 15 1. getElementsByClassName()方法; 16 在 document 对象上调用getElementsByClassName()始终会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。 17 //取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓 18 var allCurrentUsernames = document.getElementsByClassName("username current"); 19 因为返回的对象是 NodeList，所以使用这个方法与使用 getElementsByTagName()以及其他返回 NodeList 的 DOM 方法都具有同样的性能问题。 20 支持 getElementsByClassName()方法的浏览器有 IE 9+、Firefox 3+、Safari 3.1+、Chrome 和Opera 9.5+。 21 22 2. classList 属性 23 classList 属性是新集合类型 DOMTokenList 的实例。与其他 DOM 集合类似， 24 DOMTokenList 有一个表示自己包含多少元素的 length 属性，而要取得每个元素可以使用 item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。 25 add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。 26 contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。 27 remove(value)：从列表中删除给定的字符串。 28 toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。 29 //删除"disabled"类 30 div.classList.remove("disabled"); 31 //添加"current"类 32 div.classList.add("current"); 33 //切换"user"类 34 div.classList.toggle("user"); 35 有了 classList 属性，除非你需要全部删除所有类名，或者完全重写元素的 class 属性，否则也 36 就用不到 className 属性了。 37 支持 classList 属性的浏览器有 Firefox 3.6+和 Chrome。 38 */ 39 var btn=document.getElementById('mybtn'); 40 btn.focus(); 41 console.log(document.activeElement);//document.activeElement===<button id="mybtn">btn</button> 42 /* 43 焦点管理 44 是 document.activeElement 属性，这个属性始终会引用 DOM 中当前获得了焦点的元素。 45 元素获得焦点的方式有页面加载、用户输入（通常是通过按 Tab 键）和在代码中调用 focus()方法. 46 默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是 document.body 元 素的引用。 47 文档加载期间，document.activeElement 的值为 null。 48 49 document.hasFocus()方法，这个方法用于确定文档是否获得了焦点. 50 通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。 51 查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点，这两个功能最重要的用途是提 52 高 Web 应用的无障碍性。无障碍 Web 应用的一个主要标志就是恰当的焦点管理，而确切地知道哪个元 53 素获得了焦点是一个极大的进步，至少我们不用再像过去那样靠猜测了。 54 实现了这两个属性的浏览器的包括 IE 4+、Firefox 3+、Safari 4+、Chrome 和 Opera 8+。 55 * */ 56 57 /* 58 HTMLDocument的变化 59 readyState 属性。Document 的 readyState 属性有两个可能的值： 60 loading，正在加载文档； 61 complete，已经加载完文档。 62 document.readyState 属性的基本用法如下。 63 if (document.readyState == "complete"){ 64 //执行操作 65 } 66 支持 readyState 属性的浏览器有 IE4+、Firefox 3.6+、Safari、Chrome 和 Opera 9+. 67 68 检测页面的兼容模式就成为浏览器的必要 69 功能。IE 为此给 document 添加了一个名为 compatMode 的属性，这个属性就是为了告诉开发人员浏 70 览器采用了哪种渲染模式。就像下面例子中所展示的那样，在标准模式下，document.compatMode 的 71 值等于"CSS1Compat"，而在混杂模式下，document.compatMode 的值等于"BackCompat"。 72 陆续实现这个属性的浏览器有 Firefox、Safari 3.1+、Opera 和 Chrome。最终，HTML5 也把 73 这个属性纳入标准，对其实现做出了明确规定。 74 * */ 75 if (document.compatMode == "CSS1Compat"){ 76 alert("Standards mode"); 77 } else { 78 alert("Quirks mode"); 79 } 80 /*作为对 document.body 引用文档的<body>元素的补充，HTML5 新增了 document.head 属性，*/ 81 var head = document.head ; 82 alert(head); 83 /* 84 字符集属性 85 charset 属性表示文档中实际使用的字符集， 86 也可以用来指定新字符集。默认情况下，这个属性的值为"UTF-16"，但可以通过<meta>元素、响应头 87 部或直接设置 charset 属性修改这个值。来看一个例子。 88 alert(document.charset); //"UTF-16" 89 document.charset = "UTF-8"; 90 另一个属性是 defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么 91 92 * */ 93 /* 94 自定义数据属性 95 HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的 96 信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。来看一个例子。 97 <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div> 98 var div = document.getElementById("myDiv"); 99 //取得自定义属性的值 100 var appId = div.dataset.appId; 101 var myName = div.dataset.myname; 102 //设置值 103 div.dataset.appId = 23456; 104 div.dataset.myname = "Michael"; 105 */ 106 /* 107 插入标记 108 innerHTML 属性;2. outerHTML 属性3. insertAdjacentHTML()方法;4. 内存与性能问题;详见【高级程序设计】 109 * */ 110 111 /* 112 scrollIntoView()方法 113 //让元素可见 114 document.forms[0].scrollIntoView(); 115 scrollIntoView()可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用 116 元素就可以出现在视口中。如果给这个方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动 117 之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 作为参数，调用元素会尽可能全部 118 出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐； 119 例如：document.forms[0].scrollIntoView(); 120 * */ 121 /* 122 专有扩展【文档模式，children属性，contains()方法，插入文本 ，滚动】 123 124 IE8 引入了一个新的概念叫“文档模式”（document mode）。页面的文档模式决定了可以使用什么功 125 能。换句话说，文档模式决定了你可以使用哪个级别的 CSS，可以在 JavaScript 中使用哪些 API，以及 126 如何对待文档类型（doctype）。到了 IE9，总共有以下 4 种文档模式。 127 IE5：以混杂模式渲染页面（IE5 的默认模式就是混杂模式）。IE8 及更高版本中的新功能都无法 128 使用。 129 IE7：以 IE7 标准模式渲染页面。IE8 及更高版本中的新功能都无法使用。 130 IE8：以 IE8 标准模式渲染页面。IE8 中的新功能都可以使用，因此可以使用 Selectors API、更多 131 CSS2 级选择符和某些 CSS3 功能，还有一些 HTML5 的功能。不过 IE9 中的新功能无法使用。 132 IE9：以 IE9 标准模式渲染页面。IE9 中的新功能都可以使用，比如 ECMAScript 5、完整的 CSS3以及更多 HTML5 功能。这个文档模式是最高级的模式。 133 要理解 IE8 及更高版本的工作原理，必须理解文档模式。要强制浏览器以某种模式渲染页面，可以使用 HTTP 头部信息 X-UA-Compatible，或通过等价的 134 <meta>标签来设置： 135 <meta http-equiv="X-UA-Compatible" content="IE=IEVersion"> 136 注意，这里 IE 的版本（IEVersion）有以下一些不同的值，而且这些值并不一定与上述 4 种文档 137 模式对应。 138 Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明。对于 IE8，始终保持以 IE8 标 139 准模式渲染页面。对于 IE9，则以 IE9 标准模式渲染页面。 140 EmulateIE9：如果有文档类型声明，则以 IE9 标准模式渲染页面，否则将文档模式设置为 IE5。 141 EmulateIE8：如果有文档类型声明，则以 IE8 标准模式渲染页面，否则将文档模式设置为 IE5。 142 EmulateIE7：如果有文档类型声明，则以 IE7 标准模式渲染页面，否则将文档模式设置为 IE5。 143 9：强制以 IE9 标准模式渲染页面，忽略文档类型声明。 144 8：强制以 IE8 标准模式渲染页面，忽略文档类型声明。 145 7：强制以 IE7 标准模式渲染页面，忽略文档类型声明。 146 5：强制将文档模式设置为 IE5，忽略文档类型声明。 147 比如，要想让文档模式像在 IE7 中一样，可以使用下面这行代码： 148 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 149 如果不打算考虑文档类型声明，而直接使用 IE7 标准模式，那么可以使用下面这行代码： 150 <meta http-equiv="X-UA-Compatible" content="IE=7"> 151 没有规定说必须在页面中设置 X-UA-Compatible。默认情况下，浏览器会通过文档类型声明来确 152 定是使用最佳的可用文档模式，还是使用混杂模式。 153 通过 document.documentMode 属性可以知道给定页面使用的是什么文档模式。这个属性是 IE8 154 中新增的，它会返回使用的文档模式的版本号（在 IE9 中，可能返回的版本号为 5、7、8、9）： 155 var mode = document.documentMode; 156 知道页面采用的是什么文档模式，有助于理解页面的行为方式。无论在什么文档模式下，都可以访 157 问这个属性。 158 159 由于 IE9 之前的版本与其他浏览器在处理文本节点中的空白符时有差异，因此就出现了 children 160 属性。这个属性是 HTMLCollection 的实例，只包含元素中同样还是元素的子节点。除此之外， 161 children 属性与 childNodes 没有什么区别，即在元素只包含元素子节点时，这两个属性的值相同。 162 下面是访问 children 属性的示例代码： 163 var childCount = element.children.length; 164 var firstChild = element.children[0]; 165 166 如前所述，HTML5 之前的规范并没有就与页面滚动相关的 API 做出任何规定。但 HTML5 在将 167 scrollIntoView()纳入规范之后，仍然还有其他几个专有方法可以在不同的浏览器中使用。下面列出 168 的几个方法都是对 HTMLElement 类型的扩展，因此在所有元素中都可以调用。 169 scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚 170 动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。 171 如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素显示在视口中部（垂直方向）。 172 Safari 和 Chrome 实现了这个方法。 173 scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值， 174 也可以是负值。Safari 和 Chrome 实现了这个方法。 175 scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决 176 定。Safari 和 Chrome 实现了这个方法。 177 希望大家要注意的是，scrollIntoView()和 scrollIntoViewIfNeeded()的作用对象是元素的 178 容器，而 scrollByLines()和 scrollByPages()影响的则是元素自身。下面还是来看几个示例吧。 179 //将页面主体滚动 5 行 180 document.body.scrollByLines(5); 181 //在当前元素不可见的时候，让它进入浏览器的视口 182 document.images[0].scrollIntoViewIfNeeded(); 183 //将页面主体往回滚动 1 页 184 document.body.scrollByPages(-1); 185 由于 scrollIntoView()是唯一一个所有浏览器都支持的方法，因此还是这个方法最常用。 186 * */ 187 </script> 188 189 </html>