主要的两个扩展对象是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:
与类相关的扩充:
- getElementByClassName():接收包含一个或多个类型的字符串,返回属于该类的全部元素的nodelist。
var allCurrentUserName = document.getElementByClassName("username current");
- classList属性:包含了该元素所有的class,并且添加了一些操作这些class的方法,包括:
- add(value):将给定value添加到class中,如果该值已经存在,则不添加
- contains(value):检测classList里面是否有给定的值,存在则返回true,否则为false
- remove(value):从classList里面 移除value
- toggle(value):如果列表中有该值,则删去;如果没有,就添加上。
焦点管理:
- document.activeElemnt属性:初始时document.body保存引用,保存的是在页面中获得焦点的元素
- focus():使元素获得焦点。
- document.hasFocus(): 判断文档是否获得了焦点。
自定义数据属性:可以为元素添加非标准的属性,只要以data-为前缀即可。访问这些属性可以用dataset属性。
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;
var myName = div.dataset.myname;
插入标记:
- innerHTML属性:读模式下:返回与调用元素的所有子节点(包括元素,文本和注释)对应的HTML标记;写模式下,会根据指定的值创建新的DOM树,并完全替代原来的DOM树。例:
需要注意的是:1、在innerHtml中添加<script>标签并不会执行其中的脚本,IE8及其早些的版本支持,但是需要为script指定defer属性,并且要包含在一个有作用域的元素内。2、大多数浏览器都可以通过innerHtml直观的添加css式样。<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> */
div.innerHTML="<style type =\"text/css\" >body{background-color:red;}</style>";
- outerHTML:类型与innerHTML,唯一不同的是,在写模式下,会将调用元素也替换掉。
- insertAdjacentHTML():在指定位置插入HTML文本,第一个参数必须为:
- beforebegin:在当前元素之前插入一个相邻的同辈元素
- afterbegin:在当前元素之后或者在第一个子元素之前
- beforeend:在当前元素之下或者在最后一个子元素之后再插入
- afterend:在当前元素之后插入一个相邻的同辈元素。