11

var i len ee;

var e= document. querySelectorAll( "em"); //获取所有em,只要传给 querySelectorAll ( )方法的css选择符有效，该方法就会返回一个

NodeList对象,而不管找到多少匹配的元素。如果没找到匹配的元素，NodeList就是空的。

for( var i= 0, len= e. length; i< len; i++){

ee= e[ i]; 或e.item(i)

ee. className= "improt";

}

var a=document.querySelector("em");  //获取第一个em

var b=document.getElementById("s").querySelector(".ff");

var b=document.getElementById("s").querySelector("p em");

matchesSelector()方法，如果被调用元素与该选择符匹配，返回true，否则返回false.

在取得某个元素引用的情况下，使用这个方法能够方便的检测他是否会被querySelector()或querySelectorAll()方法返回。

function a(element,selector){

if(element.matchesSelector){

return element.matchesSelector(selector); 

}else if(element.msMatchesSelector){

return element.msMatchesSelector(selector); 

}else if(element.mozMatchesSelector){

return element,mozMatchesSelector(selector); 

}else if(element.webkitMatchesSelector){

return element,webkitMatchesSelector(selector); 

}else{

throw new Error（“not supported”）；

}

}

if(a(document.body,"body.page1")){

//执行操作

}

元素遍历

chlidElementCount  元素个数

firstElementChild:

lastElementChild

previousElementSibling 前一个同辈元素

nextElementSibling 后一个同辈元素

跨浏览器遍历某元素的所有子元素。

var i, len,

child=element.firstChildElementChild;

while(child!=element.lastElementChild){

processChild(child);

child=child.nextElementbling;

}

}

删除一个类名，需要把三个类名拆开，删除不想要的，再拼成新字符串

< div clsaa= "qq user ww" ></ div >

<script>

\\ var pos=-1;

\\ i,

\\ len;

\\var a=div.clasName.split(/\s+/);

\\for(i=0,aa=a.length;i<aa;i++){

\\ if(a[i]=="usr"){

\\ pos=i;

\\ break;

\\ }

\\ a.splice(i,1);

\\ div.className=a.join("");

\\ }

div.classList.remove("user");  //删除类名user，前面那么多行代码，用这一行代码就搞定了（classList支持的浏览器firefox3.6+和chrome）

</script>

有了classLists属性，除非你需要删除全部所有类名或完全重写元素的class属性，否则也就用不到className属性classList支持的浏览器firefox3.6+和chrome

div.classList.remove("user");  //删除类名user，前面那么多行代码，用这一行代码就搞定了

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

div.classList.toggle("user");  //有就删除，没有就添加

contains("user");  //存在user就 返回true,否则返回false

if(div.classList.contains("qq"&&div.classList.contains("user")){

//执行操作

}

insertAdjacentHTML()方法

Element. insertAdjacentHTML( beforebegin, "<p>vfgfb</p>"); //插入紧邻同辈元素之前

Element . insertAdjacentHTML ( afterend , "<p>vfgfb</p>" ); //插入紧邻子元素之后

Element.insertAdjacentHTML(afterbegin,"<p>vfgfb</p>"); //插入紧邻子元素之前或最后一个子元素之后

Element.insertAdjacentHTML(beforeend,"<p>vfgfb</p>"); //插入紧邻同辈元素之前或第一个子元素之前

contains()方法检测某个节点是不是另一个节点的后代。

alert(document.documentElement.contains(document.body));   //true

document.body.scrollByLines(5);  //将页面主体滚动5行

document.images[0].scrollIntoViewIfNeeded();  //在当前元素不可见的情况下，让她进入浏览器的视口

document.body.scrollByPages(-1);  //将页面主体往回滚动1页

scrollIntoView方法，是唯一一个所有浏览器都支持的方法，所以最常用。

docment.form[0].scrollIntoView();  //如果参数是true或空，则窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐；如果传入参数为false，调用元素会尽可能全部出现在视口中（可能的话调用元素底部会与视口底部平齐）。