选择符API
这个API存在的主要目的就是让JS原生支持CSS查询。
querySelector()
这个方法接收一个CSS选择符,返回与该模式匹配的第一个元素或null。
var body = document.querySelector("body");
querySelectorAll()
这个方法同样接收一个CSS选择符,以静态NodeList的形式返回所有匹配的元素。
var strongs = document.querySelectorAll("p strong");
strong = strongs[i];
strong = strongs.item(i);
matchesSelector()
接收一个CSS选择符,并返回调用元素与该选择符是否匹配。
if (document.body.matchesSelector("body.page1")){
//true
}
元素遍历
由于空白text类型节点的问题,childNodes里面会包含空的文本节点。这导致遍历元素很不方便。于是有了这几个属性,它们都只返回真正的元素:
childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
这样一来遍历元素就不用判断节点类型了:
var i,
len,
child = element.firstElementChild;
while(child != element.lastElementChild){
processChild(child);
child = child.nextElementSibling;
}
HTML5
与类相关的扩充
getElementsByClassName()
接收一个或多个类名,返回动态NodeList。
var selected = document.getElementById("myDiv").getElementsByClassName("username current");
classList
这个是便于大家添加,删除类名的,之前使用className属性获得的是一个字符串,每次要改变都得找出要改的那个,删除或改变,再拼出新的字符串。有了这个属性就方便多了。
classList是新的类型DOMTokenList的实例。提供了4个方法:
add(value)
contains(value)
remove(value)
toggle(value) 如果存在就删除,不存在就添加
div.classList.add("current");
div.classList.toggle("user");
div.classList.remove("user");
if (div.classList.contains("bd")) {
}
焦点管理
添加了document.activeElement属性,这个属性始终引用DOM中当前获得焦点的元素。默认情况下,当文档刚刚加载完成时,这里面保存的是body元素,加载过程中是null。
添加了document.hasFocus()方法,用于确定元素是否获得焦点。
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
alert(document.hasFocus()); //true
HTMLDocument的变化
readyState属性
指示文档是否加载完成,有两个可能的值:loading和complete。
if (document.readyState == "complete"){
}
兼容模式
区分渲染页面的模式是标准的还是混杂的。属性为document.compatMode。标准模式时值为CSS1Compat,混杂模式时为BackCompat。
if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}
head属性
像body一样可以直接访问了document.head。
var head = document.head || document.getElementsByTagName("head")[0];
字符集属性
HTML5新增了几个与文档字符集有关的属性
charset表示文档中实际使用的字符集,默认为UTF-16,可以通过
来设置,或者响应头部,或者在JS中直接设置这个属性。
alert(document.charset);
alert(document.defaultCharset);
另一个属性是defaultCharset,代表根据默认浏览器设置,字符集应该是什么。
自定义数据属性
使用data-加自定义名,可以定义自己的节点特性,在JS里使用dataset访问,这个属性的值是一个DOMStringMap的一个实例,也就是一个键值对的映射。访问时不用带data-前缀。
var div = document.getElementById("myDiv");
var appId = div.dataset.appId;
var myName = div.dataset.myname;
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
alert(div.dataset.myname);
alert(div.dataset.appId);
//就算原来没有写在DOM里的也可以设置,会同步到DOM里
div.dataset.haha = "hahaha";
alert(div.dataset.haha);
插入标记
使用插入标记,可以直接插入HTML字符串来构建DOM树。
innerHTML
在读模式下,返回与调用元素所有子节点对应的HTML标记的字符串。
在写模式下则会根据指定的值创建新的DOM树,然后替换调用元素所有子节点。
alert(document.body.innerHTML);
var div = document.getElementById("myDiv");
div.innerHTML = "
balalalabalalala";
虽然绝大部分浏览器不支持在innerHTML中添加script节点,但是IE8是支持的,虽然有些特殊,要插入在有作用域的元素后。而且通过onclick等事件插入可执行的代码也是可能的。所以为了安全,在使用innerHTML时一定要注意安全。
style元素是被支持的。在IE8中有些特殊,要插入在有作用域的元素后。
//style元素是被支持的。在IE8中有些特殊,要插入在有作用域的元素后。
//失败
div.innerHTML = "";
//成功
div.innerHTML = "_";
//成功
div.innerHTML = "";
outerHTML
这个就是不止替换子元素,调用元素本身也被替换。
insertAdjacentHTML()
这个方法是在指定位置插入HTML文本,可以指定的位置有4个:
before begin:在当前元素之前插入一个同辈元素
after begin:插入在当前元素的所有子元素之前,作为当前元素的子元素
beforeend:插入在当前元素的所有子元素之后,作为当前元素的子元素
afterend:在当前元素之后插入一个同辈元素
element.insertAdjacentHTML("afterend", "
Hello world!");
内存与性能问题
在使用这个几个方法替换节点时,节点如果有一个事件处理程序或者引用了其他对象作为属性,这些东西可能还在内存中。所以最好先手动删除这些。
不过在插入新元素时,这个方法不管在编写上还是执行上都比我们使用DOM操作要高效的多,在执行这个方法时会创建一个HTML解析器,这个通常时浏览器级别的C++代码。
但是创建和销毁HTML解析器是要开销的,所以尽量减少调用次数,将字符串一次拼好在调用。
scrollIntoView()
div.scrollIntoView();
这个就是让屏幕滚动到这个元素所在的位置让大家能看见。传入true则尽量元素顶部与屏幕平齐,传入false则尽量多显示元素。
把当前元素设置为焦点也可以达到这个效果。
专有拓展
这些都是各个浏览器自己实现的,有的很普遍,有的很不普适。
文档模式
决定了可以使用什么功能,IE5,IE7,IE9等。
可以强制浏览器以什么方式渲染,通过HTTP头部的 X-UA-Compatible或meta标签。
其中IEVersion可以是Edge、EmulateIE9、EmulateIE8、EmulateIE7、9、8、7、5。
JS里也可以获取,IE中才有貌似。
var mode = document.documentMode;
children属性
只返回元素子节点,没有乱七八糟的文本节点
var childCount = element.children.length;
contains()方法
一个节点是不是另一个的后代
alert(document.documentElement.contains(document.body)); //true
插入文本
innerText
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
对content使用innerText读:
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
写的话就覆盖所有子节点,且会进行HTML编码去掉HTML标签避免生成多个节点。这个可以用来过滤用户输入哦。
有的浏览器不支持这个,但是支持textContent。
function getInnerText(element){
return (typeof element.textContent == "string") ?
element.textContent : element.innerText;
}
function setInnerText(element, text){
if (typeof element.textContent == "string"){
element.textContent = text;
} else {
element.innerText = text;
}
}
outerText
读时与innerText一样,写时覆盖调用节点。