JS-十一章:DOM扩展

一.扩展方法

1.querySelector('');//方法接收一个css选择符,返回符合的第一个元素,没有则返回null

2.querySelectorAll('');//返回一个NodeList集合

3.getElementsByClassName(' ');//返回NodeList,接收类名

二.扩展的属性

说明:使用这些属性,不必担心空文本节点(空的也存在)

1.childElementCount;//返回元素的个数(不包快文本节点textnode和注释)

2.firstElementChild;//区别firstChild元素,意为第一个子元素(htmlElement类型)

3.lastElementChild;//区别lastChild

4.previousElementSibling;//区别previousSibling;

5.nextElementSibling;//区别nextSibling;

三.焦点管理

1.element.focus();//某元素获得焦点

2.document.hasFocus();//判断页面是否获得焦点,用于判断是否在操作该页面

四.HTMLDocument的HTML五的变化

//新属性

1.document.readyStatge;//loading或者complete//在加载或者加载完成

2.element.dataset;//可以访问自定义的属性

3.element.innerHTML;//元素内的所有文字(按原来的格式输出)//设置这个值相当于重写该元素的内容//注意问题,内容替换指点的元素时,最好移除监听事件先,以防内存泄漏

4.element.innerText;//属性元素内所有的文本内容

5.element.children;//还属性获得一个HTMLCollection集合//和NodeList还是有点区别的

//innerHTML操作属性的效率优化
//低效率版
for (var i=0, len=values.length; i < len; i++){
 ul.innerHTML += "<li>" + values[i] + "</li>"; //要避免这种频繁操作！！
} 
//高效率版
var itemsHtml = "";
for (var i=0, len=values.length; i < len; i++){
 itemsHtml += "<li>" + values[i] + "</li>";
}
ul.innerHTML = itemsHtml; 

疑惑:

//div嵌套一个div,为什么div的NodeList会有三个元素