HTML5 DOM扩展

一、选择符

1. querySelector()方法：返回与该模式匹配的第一个元素

//取得body元素
var body = document.querySelector("body");

//获取的ID为"one"的元素
var one = document.querySelector("#one");

//获取的Class为"two"的第一个元素。注意：并不是所有元素
var two = document.querySelector(".two");

2. querySelectorAll()方法：返回与该模式匹配的所有元素

//获取的所有"li"的元素
var lis=document.querySelectirAll("li");

//获取的ID为="box"下所有"li"的元素
var lis=document.querySelectir("#box").querySelectirAll("li");

//获取的img标签Class为"show"的所有元素
var lis=document.querySelectirAll("img.show");

3. matchesSelector()方法：调用元素是否与选择符匹配

if(document.body.matchesSelector('body.app'){
//ture
}

二、元素遍历

1.childElementCount:返回子元素的个数(不包括文本节点和注释)
2.firstElementChild:指向第一个子元素
3.lastElementChild:指向最后子元素
4.previousElementSibling:指向前一个同辈元素
5.nextElementSibling:指向下一个同辈元素
6.classList属性：可以对类名进行添加、删除、替换等操作

//删除"hide"类
div.classList.remove("hide");

//添加"show"类
div.classList.add("show");

//切换"high"类
div.classList.toggle("high");

更多属性请自行查看相关资料...

相关推荐