重看Javascript高级程序设计，第11章:DOM扩展

本章内容

1. 理解selectors API
2. 使用HTML5 DOM扩展
3. 了解专有的DOM扩展

 1.1 querySelector() 方法

//querySelector()选择器
			//会返回匹配的第一个元素.如果没有匹配则返回null
			console.log(document.querySelector('body'))
			console.log(document.querySelector('#mydiv'))
			console.log(document.querySelector('.mydiv'))
			console.log(document.querySelector('img.img'))

1.2 querySelectorAll() 方法

//querySelectorAll()方法返回结果是一个集合
			console.log(document.getElementById('mydiv').querySelectorAll('em'))
			var div = document.querySelectorAll('.div')
			console.log(div)
			
			
			//取得返回结果的每一项
			for(var i = 0;i<div.length;i++){
				div[i].className = 'new'
			}

1.3 matchesSelector() 方法

if(document.body.matchesSelector('body.page1')){
				console.log(1)
			}else{
				console.log(2)
			}

//不常用

2. 元素遍历

•  childElementCount：返回子元素（不包括文本节点和注释）的个数；
• firstElementChild：指向第一个子元素；firstChild的元素版
• lastElementChild：指向最后一个子元素；lastChild的元素版；
• previousElementSibling：指向前一个同辈元素；previousSibling的元素版；
• nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

//遍历元素
var child = element.firstElementChild;
		while(child != element.lastElementChild){
			processChild(child);
			child = child.nextElementSibling
		}

 3.1 与类相关的补充

//根据class获取元素
			//getElementsByClassName
			var div = document.getElementsByClassName('div')
			console.log(div)
			//classList
			//add : 将给定的字符串添加到列表中,如已存在则不添加
			//contains:表示列表是否存在给定的值,存在返回true,否则false
			//remove:从列表中删除给定的字符串
			//toggle 如果列表中已经存在给定的值,删除它,如未存在,添加它.
			//以下是使用办法:
			//添加类
			div.classList.add('aa1')
			//移除类
			div.classList.remove('aa')
			//切换类
			div.classList.toggle('bb')
			//判断是否包含给定的类
			if(div.classList.contains('aa')){
				//true
			}
			

3.2 焦点管理

//获取焦点
			var btn = document.getElementById('mybutton')
			btn.focus()
			console.log(document.avtiveElement === btn)
			
			//是否获取焦点
			console.log(document.hasFocus())

 

//取得head;
			var head = document.head || document.getElementsByTagName('head')[0]
			
			//页面插入带html的内容
			//innerHTML和outerHTML的区别是innerHTML返回的不包括div本身,outerHTML则包括他本身div一起返回
			div.innerHTML = '<b>new contant</b>'
			//div本身会被替换成<b>new contant</b>
			div.outerHTML = '<b>new contant</b>'
			
			//作为前一个同级别元素插入
			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>')
			
			//避免
			for(var i = 0;i<div.length;i++){
				ul.innerHTML += '<li>' + div[i] + '</li>'
			}
			//应该采用下面的方式
			var txt = ''
			for(var i = 0;i<div.length;i++){
				txt += '<li>' + div[i] + '</li>'
			}
			ul.innerHTML = txt

//可以让元素刚进页面的时候进入用户视野
			document.getElementById('div2').scrollIntoView()
			
			//页面采用的文档模式
			console.log(document.documentMode)
			
			//子节点
			var c = element.children.length;
			var a = element.children[0]
			
			//检测某个节点是不是另一个节点的后代
			console.log(document.documentElement.contains(document.body))
			 
			 //完整版函数,作用:确定某个节点是不是另一个节点的后代
			 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.parentNode
					 do {
						 if(node === refNode){
							 return true
						 }else{
							 node = node.parentNode
						 }
					 } while (node !== null)
					 return false
				 }
			 }

4.4 插入文本

//插入文本
			div.innerText = 'new Text'
			//过滤html标签
			div.innerText = div.innerText
			
			div.outerText = 'new Text'
			//区别是outerText会改变调用它的父级别