一.扩展方法
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会有三个元素