Js高级程序设计第三版学习(十一章)
第十一章 DOM扩展
dom主要有两个扩展 选择API 和 HTML5
1.选择符API:
增加了两个选择class的方法 querySelector() 没有返回null, querySelectorAll() 没有返回空nodelist,虽然继承了nodeList所有的属性和方法但其实是一个快照,这样解决了nodeList循环引用的问题, 但querySelector与querySelectorAll的性能都低于getElement这种形式,所以需要根据实际情况 酌情使用.
console.time('querySelector');
for (let index = 0; index < 10000; index++) {
var ppap = document.querySelector('.ppap');
}
console.timeEnd('querySelector'); //5.68798828125ms
console.log(ppap);
console.time('querySelectorAll');
for (let index = 0; index < 10000; index++) {
var ppapList = document.querySelectorAll('.ppap');
}
console.timeEnd('querySelectorAll');
console.log(ppapList); //querySelectorAll: 27.284912109375ms
console.time('id');
for (let index = 0; index < 10000; index++) {
var hehe = document.getElementById('hehe');
}
console.timeEnd('id'); //id: 1.771240234375ms
console.time('liList');
for (let index = 0; index < 10000; index++) {
var liList = document.getElementsByClassName('ppap');
}
console.timeEnd('liList'); //liList: 1.47216796875ms
2.元素遍历:
在获取childNodes时 后代节点可能是文本节点,但我们大多数只需要元素节点, 我们可以使用如下, 使用方法相同
var hehe = document.getElementById('hehe')
//后代元素节点个数
hehe.childElementCount;
//第一个元素节点
hehe.firstElementChild;
//最后一个元素节点
hehe.lastElementChild;
//下一个元素节点
hehe.nextElementSibling;
//上一个元素节点
hehe.previousElementSibling;
3.HTML5:
- 与类相关扩充
getElementsByClassName, 根据class选择元素 返回 HTMLCollection
var hehe = document.getElementsByClassName('ppap apple');
console.log(hehe);//HTMLCollection
classList 用来操作元素的class 使用className 会一次性修改 而使用classList 会更加简单, 他返回DOMTokenList类似dom集合, 也提供了增删改查的方法,需要注意classList ie10以上 才支持, 如果需要兼容ie低版本 还需要使用className
var hehe = document.getElementsByClassName('ppap apple')[0];
console.log(hehe); //HTMLCollection
//添加
hehe.classList.add('asdhjasdhkj');
console.log(hehe.classList.value); //ppap apple asdhjasdhkj
//移除
hehe.classList.remove('asdhjasdhkj');
console.log(hehe.classList.value); //ppap apple
//判断是否包含class
console.log(hehe.classList.contains('asdhjasdhkj')); //false
//没有就添加, 有就移除
hehe.classList.toggle('asdhjasdhkj');
console.log(hehe.classList.value); //ppap apple asdhjasdhkj
- 焦点管理
document.activeElement 这个属性会引用Dom中当前获得焦点的元素,hasFocus() 用来检测文档是否获得了焦点
console.log(document.activeElement)//body
console.log(document.hasFocus())//true
- HTMLDocument的变化
//readyState 判断状态 loading正在加载 complete完成
console.log(document.readyState); //loading
window.onload = function() {
console.log(document.readyState); //complete
};
//compatMode 判断模式 CSS1Compat标准模式 BackCompat混杂模式
console.log(document.compatMode) //CSS1Compat
//获取header元素
console.log(document.head)//<head></head>
- 字符集属性
/*
我们可以使用 charset 获取默认字符集
<meta charset="UTF-8" /> 可以通过meta标签修改
*/
console.log(document.charset)//UTF-8
- 自定义属性
html5 的自定义属性 使用 data-xxx 的形式 , 我们可以使用dataSet 来获取,返回DOMStringMap, 可以用属性的形式获取自定义属性,但是兼容性不好ie11 才支持
var hehe = document.getElementsByClassName('ppap apple')[0];
console.log(hehe.dataset)//DOMStringMap
//没有就设置 有就更改
hehe.dataset.ppap = 'lalal'
console.log(hehe.dataset.ppap)//lalal 没有undefined
- 插入标记
innerHTML 会返回元素所有的子节点的字符串,同样我们可以使用html字符串来更改innerHTML, outerHTML与innerHTML的用法相同 但是他返回的字符串包括元素本身
var hehe = document.getElementsByClassName('ppap apple')[0];
console.log(hehe.innerHTML) //<div>layer1</div> <div>layer1</div>
hehe.innerHTML = '<div class="ppap">jasad</div>'
console.log(hehe.outerHTML)//<li class="ppap apple" id="hehe"><div class="ppap">jasad</div></li>
insertAdjacentHTML在元素的前后或者内部插入元素
var hehe = document.getElementsByClassName('ppap apple')[0];
// 在之前插入
hehe.insertAdjacentHTML("beforebegin",' <li class="ppap">100</li>');
// 在当前元素内的第一个元素前插入
hehe.insertAdjacentHTML("afterbegin",' <li class="ppap">101</li>');
// 在当前元素的最后一个元素之后插入
hehe.insertAdjacentHTML("beforeend",' <li class="ppap">102</li>');
// 在之后插入
hehe.insertAdjacentHTML("afterend",' <li class="ppap">103</li>');
- scrollIntoView()方法
html所有元素都可以调用 传true或不传, 调用时元素会出现在可视窗口的顶部, false为可能的显示完整元素
var hehe = document.getElementsByClassName('ppap apple')[0];
var uu = document.getElementById('hehe');
window.onload = function(){
console.log(0)
hehe.scrollIntoView(true);//chrome 刷新无效
}
uu.onclick = function(){
this.scrollIntoView(false);
}
4.专有扩展:
- 文档模式
强制浏览器以某种模式渲染<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ie=edge保持最新
- children属性
跟childNodes相同 children只包含元素节点
console.log(uu.children)//HTMLCollection
- contains方法
contains用来检测后代节点, 包含返回true 否则返回 false , compareDocumentPosition 用来确定节点间的关系,返回掩码, 0无关 , 2居前, 4居后 8包含 16被包含.
var hehe = document.getElementsByClassName('ppap apple')[0];
var uu = document.getElementById('uu');
console.log(uu.children)//HTMLCollection
/*
之所以是20 是由于 li节点在DOM树中位于ul节点之后,同时ul节点包含li节点
所以两个掩码相加等于20
*/
console.log(uu.compareDocumentPosition(hehe))//20
- 插入文本
innerText用于获取元素节点的全部文本节点, 读取时将子文档的全部文本连接起来,写入时,删除所有子节点,将文本节点插入,textContent与innerText基本相同,用来兼容ff,但ff已经支持innerText
- 滚动
scrollIntoViewIfNeeded 当页面视口显示元素 才滚动至可见, 但只有chrome,opera支持 其他都报错, 所有浏览器都支持scrollIntoView
uu.onclick = function(){
hehe.scrollIntoViewIfNeeded();
}