Javascript学习笔记6 DOM扩展

选择符API

querySelector()
接受一个CSS选择符，返回与该模式匹配的第一个元素，没有找到返回null

var mydiv = document.querySelector("#mydiv");

querySelectorAll()
与querySelector()类似，不过其返回所有匹配的元素，即一个NodeList

var selecteds = document.querySelectorAll(".selected");

元素遍历

返回元素节点，不用担心空白的文本节点

element.childElementCount   //返回子元素的个数，不包括文本和注释

element.firstElementChild  //指向第一个子元素

element.lastElementChild  //指向最后一个子元素

element.previousElementSibling  //指向前一个同胞元素

element.nextElementSibling  //指向后一个同胞元素

HTML5

getElementsByClassName()
接受一个参数，即包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList

var a = document.getElementsByClassName("username current");

classList
元素的类名列表，包含了一些方法用于更方便的操作类名

div.classList.add("disabled");   //添加类
div.classList.remove("disabled");   //移除类
div.classList.contains("bd");    //检查是否包含某类

document.activeElement
返回当前获得焦点的元素，文档加载完毕时，是<body>元素

document.readyState
返回文档的加载状态，"loading"或者"complete"

document.charset
返回文档字符集，可以修改

document.charset = "UTF-8";

innerHTML
返回元素所有子节点（包括元素，文本和注释）的HTML标记，可以修改(<html>,<style>,<head>以及表格元素等不支持)

div.innerHTML = "hello world";

outerHTML
与innerHTML属性类似，但是其不仅返回子节点，还返回调用元素本身的HTML标记

scrollIntoView()
通过滚动浏览器窗口或某个容器元素，使调用元素出现在视口中。如果传入true或不传参数，则元素顶部将会与视口顶部尽量平齐，如果传入false，那么元素将会尽可能地全部出现在视口中

doucument.forms[0].scrollIntoView(); 

contains()
查找某个节点是不是另一个节点的后代，是则返回true，否则返回false

div.contains(someElement);