JavaScript高级程序设计笔记(11)-DOM扩展

选择符API

querySelector()方法

querySelector()方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

//取得body元素
var body = document.querySelector('body');
//取得ID为'myDiv'的元素
var myDiv = document.querySelector('#myDiv');
//取得类为'selected'的第一个元素
var selected = document.querySelector('.selected');
//取得类为'button'的第一个图像元素
var img = document.body.querySelector('img.button')

querySelectorAll()

querySelectorAll()方法接收的参数与querySelector()方法一样，返回一个NodeList的实例。

var strongs = document.querySelctorAll('p strong');

var i, len, strong;
for(i = 0, len = strongs.length; i < len; i++){
	strong = strongs[i];//或者strongs.item(i)
	strong.className = 'important';
}

matchesSelector()方法

元素遍历

HTML5

与类相关补充

getElementsByClassName()

classList属性

var classList = document.getElementById('myDiv').classList;

classList.remove('user');
classList.add('current');
classList.toggle('user');

if(classList.contains('bd')&&classList.contains('disabled')){
	//执行操作
}

焦点管理

HTML5辅助管理DOM焦点：document.activeElement

1
2
3

var button = document.getElementById('myButton');
button.focus();
alert(document.activeElement === button);

HTMLDocument的变化

readyState属性

HTML5标准：Document的readyState属性有两个值：

1、 loading:正在加载文档
2、 complete:已经加载完文档

1
2
3

if(document.readyState == 'complete'){
	//执行操作
}

兼容模式

HTML5标准： document.compatMode，标准模式下该值等于’CSS1Compat’，混杂模式下，该值等于’BackCompat’。

if(document.compatMode == 'CSS1Compat'){
	alert('Standard mode');
}else{
	alert('Quirks mode');
}

head属性

HTML5标准：document.head

1	var head = document.head\|\|document.getElementsByTagName('head')[0];

字符集属性

alert(document.charset);
document.charset = 'UTF-8';

if(document.charset!=document.defaultCharset){
	alert('Custom character set being used');
}

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。

1	<div id='myDiv' data-appId='2107' data-myname='hnwc'></div>

添加自定义属性后，通过元素的dataset属性来访问自定义属性的值。

var div = document.getElementById('myDiv');
//取得自定义属性值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 2014;
div.dataset.myname = 'cq';
//判断
if(div.dataset.myname){
	alert('hello ' + div.dataset.myname);
}

插入标记

1、 innerHTML
在取模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。
在写模式下，innerHTML会根据指定值创建新的DOM树，然后用这个DOM树完全替换调用元素下原先的所有子节点。

不支持innerHTML的元素有： col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot、tr。

1
2
3

var text = "<a href=\"#\" onclick=\"alert('hi')\"></a>";
var sanitized = window.toStaticHTML(text); //only IE8
alert(sanitized);

2、 outerHTML属性
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。
在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

3、 insertAdjacentHTML()方法

//作为前一个同辈元素插入
element.insertAdjacentHTML('beforebegin','<p>Hello world!</p>');
//作为第一个子元素插入
element.insertAdjacentHTML('afterbegin','<p>Hello world!</p>');
//作为最后一个子元素插入
element.insertAdjacentHTML('beforeend','<p>Hello world!</p>');
//作为后一个同辈元素插入
element.insertAdjacentHTML('afterend','<p>Hello world!</p>');

4、内存与性能问题

scrollIntoView()方法

scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器，调用元素就可以出现在视口中。如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中，不过顶部不一定平齐。

个人技术分享