dom扩展之html5

  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>