第11章 DOM扩展

花落ヽ亦不弃

于 2020-08-18 15:50:01 发布

阅读量99

点赞数

文章标签： js

本文链接：https://blog.csdn.net/ToLastNight/article/details/108077058

版权

DOM扩展包括选择符API和HTML5

选择符API

querySelector() 返回匹配的第一个元素，无则Null
querySelectorAll() 返回nodeList ,无则Null
matchesSelector() 返回boolean 一般不用

元素遍历

var i,len,child=element.firstElementChild;
while(child!=element.lastElementChild){
	processChild(child);
	child=child.nextElementSibling;
}

HTML5

与类相关的扩充
getElementsByClassName()

classList属性，包含方法有：
add()
contains()
remove()
toggle()

焦点
元素获得焦点的方式有：
页面加载
用户输入
focus()

document.activeElement属性获得当前焦点元素
判断是否获得焦点hasFocus()

HTMLDocument的变化

readyStates属性，值有loading complete

IE兼容模式，compatMode属性，值有：
标准模式CSS1Compat
混杂模式BackCompat

字符集属性
document.charset属性(火狐不支持)，默认utf-16
Firefox只支持document.Charactrset

自定义数据属性
为元素添加非标准属性时，在属性前加data-
获取其属性时使用dataset

<div id="myDiv" data-appId="12345"> </div>

var div = document.getElementById("myDiv");
console.log(div.dataset.appId) //123456

插入标记
innerHTML
outerHTML

insertAdjacentHTML(arg1,htmlStr);
第一个参数必须为下列之一
beforebegin 元素之前插入同辈元素
afterend 元素之后插入同辈元素
afterbegin 元素之内最前面插入子元素
beforeend 元素之内最后面插入子元素

内存和性能
innerHTML效率快，创建和销毁会带来性能损失，所以使用次数尽量少。

文档模式
IE的文档模式
IE5默认混杂模式，IE7及以上是标准模式，低版本不能用高版本新增功能。可通过修改HTTP头部信息X-UA-Compatible或标签设置。

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

IEVersion可为
Edge 最新文档模式
EmulateIE9 有文档生命则以IE9，无则IE5
EmulateIE8 有文档生命则以IE8，无则IE5
EmulateIE7 有文档生命则以IE7，无则IE5
9 强制IE9
8 强制IE8
7 强制IE7
5 强制IE5

document.documentMode获取当前文档模式

children属性
IE8及之前包含注释节点，IE9之后版本只返回元素节点，和childNodes相比，除了只包含元素子节点外，其他都一样。

contains()方法
document.documentElement.contains(document.body) true
配合能力检测写出的兼容浏览器的函数

function contains(refNode,otherNode){
	if(typeof refNode.contains =="function" && 		 
	(!client.engine.webkit || client.engine.webkit>=522)){
		return refNode.contains(otherNode);
	}else if(typeof refNode.compareDocumentPosition ==
	 "function"){
		return !!(refNode.compareDocumentPosition(otherNode) & 16);
	}else{
		var node =otherNode.paretNode;
		do{
			if(node==refNode){
				return true;
			}else{
				node=node.parentNode;
			}
		}while(node!=null); //null说明到顶点了
	}
	return false
}