javascript学习——DOM扩展

  主要的两个扩展对象是Selector API和HTML5，添加了一些使用的方法和属性。

  Selector API：可以根据CSS选择符选择与某个模式匹配的DOM元素，核心是通过CSS选择符查询DOM文档取得元素的引用。主要方法有querySelector()和querySelectorAll()方法。

•   querySelector():返回与模式匹配的第一个元素。可以支持元素，类，id

  var body = document.querySelector("body");var myDiv = document.querySelector("#myDiv");var selected = document.querySelector(".selected");

  
  
• querySelectorAll():返回符合模式的全部元素。返回一个NodeList。

  var ems = document.getElementById("myDiv").querySelectorAll("em");

  
  

   元素遍历：添加了5个新属性，用于遍历子元素

• childElementCount:子元素的个数（不含文本节点和注释）
• firstElementChild：第一个子元素
• lastElementChild：最后一个子元素
• previousElementSibling：前一个同辈子元素
• nextElementSibling：后一个同辈子元素

  var i，len,child = element.firstElementChild;while(child!=element.lastElementChild){  process(child); //操作该节点  child = child.nextElementSibling;}

  
  

    HTML5:

    与类相关的扩充：

1.     getElementByClassName():接收包含一个或多个类型的字符串，返回属于该类的全部元素的nodelist。

   var allCurrentUserName = document.getElementByClassName("username current");

2.    classList属性：包含了该元素所有的class，并且添加了一些操作这些class的方法,包括：

• add（value）:将给定value添加到class中，如果该值已经存在，则不添加
• contains（value）：检测classList里面是否有给定的值，存在则返回true，否则为false
• remove（value）：从classList里面 移除value
• toggle（value）：如果列表中有该值，则删去；如果没有，就添加上。          

      焦点管理：

1.      document.activeElemnt属性：初始时document.body保存引用，保存的是在页面中获得焦点的元素
2.      focus():使元素获得焦点。
3.      document.hasFocus(): 判断文档是否获得了焦点。

     自定义数据属性：可以为元素添加非标准的属性，只要以data-为前缀即可。访问这些属性可以用dataset属性。

    

var div = document.getElementById("myDiv");var appId = div.dataset.appid;var myName = div.dataset.myname;

     插入标记：

1.     innerHTML属性：读模式下：返回与调用元素的所有子节点（包括元素，文本和注释）对应的HTML标记；写模式下，会根据指定的值创建新的DOM树，并完全替代原来的DOM树。例：

   <div id = "content">   <p> this is a paragraph</p>   <ul>         <li>Item 1</li>         <li>Item 2</li>   </ul></div>var div = document.getElementById("content");alert(div.innerHtml); /*返回  <p> this is a paragraph</p>   <ul>         <li>Item 1</li>         <li>Item 2</li>   </ul>*/

   需要注意的是：1、在innerHtml中添加<script>标签并不会执行其中的脚本，IE8及其早些的版本支持，但是需要为script指定defer属性，并且要包含在一个有作用域的元素内。2、大多数浏览器都可以通过innerHtml直观的添加css式样。

   div.innerHTML="<style type =\"text/css\" >body{background-color:red;}</style>";

   
   
2. outerHTML:类型与innerHTML，唯一不同的是，在写模式下，会将调用元素也替换掉。
3. insertAdjacentHTML():在指定位置插入HTML文本，第一个参数必须为：
   1. beforebegin：在当前元素之前插入一个相邻的同辈元素
   2. afterbegin：在当前元素之后或者在第一个子元素之前
   3. beforeend：在当前元素之下或者在最后一个子元素之后再插入
   4. afterend：在当前元素之后插入一个相邻的同辈元素。