DOM

DOM继承关系图

1.document对象的常用属性

---

//只读
document.URL
//可更改，获取当前html的title的文字内容
document.title

其他不常用属性见文档document属性

2.document常用访问DOM树节点方法

---

//返回Element对象
document.getElementById('')
//根据CSS选择器选取满足条件的第一个元素，返回Element对象
document.querySelector('')
//返回满足条件的所有元素，，参数是多个则以逗号隔开，返回NodeList类型的对象
document.querySelectorAll('')
//获取element集合，返回NodeList类型的对象
document.getElementsByName('')
//获取所有同名标签对象，返回HTMLCollection(动态集合，可根据变化自动更新)
document.getElementsByTagName('')

2.1 Element对象?

是所有标签元素的基础对象，封装了所有标签元素的公共方法和属性。
常用属性：
.attributes .className .id .innerHTML .tagName(只读)
常用方法：
.getAttribute('') .removeAttribute('') .setAttribute('','') .hasAttribute('') .getElementsByClassName('') .getElementsByTagName('')

2.2 HTMLSelectElement接口

常用属性：
selectedIndex：读取设置选中的option索引
type：select-one select-multiple两个值
options：获取所有对象
常用方法：
remove(index)：删除
add(option,option || index || null )：增加
HTMLOptionElement接口常用属性：
defaultSelected：判断设置是否默认选中
selected: 是否被选中
text：选项文本
value：选项value属性值
IE8设置select标签的innerHTML不能用

3、事件捕获、事件冒泡

事件捕获从上到下，事件冒泡从下到上。
DOM0的事件绑定方式（onclick属性绑定）缺点：1.只能绑定一个事件处理；2.只能在冒泡阶段执行事件。DOM2的绑定方式（addEventListener()方法绑定）能解决以上问题。
事件执行顺序：1.DOM0方式和DOM2方式按注册绑定顺序执行； 2.IE8的attachEvent方法，且其同方式下执行顺序不确定。

3.1 事件绑定兼容处理？

var btn=document.querySelector('.btn3d');
if(btn.addEventListener){
	btn.addEventListener('click',function () {  })
}else{
	btn.attachEvent('onlick',function () {  })
}

3.2 阻止事件冒泡或捕获？

btn.addEventListener('click',function(e){
	e.stopPropagation();
})

3.3 封装一个当document加载完调用的事件函数？

document.ready=function (callback) {  
	if(document.addEventListener){ //标准浏览器
		document.addEventListener('DOMcontentLoaded',callback);
	}else if(document.attachEvent){  //兼容IE8及以下
		document.attachEvent('onreadystatechange',function(){
			//当文档状态变为interactive时，DOM对象可以访问
			if(document.readyState=='interactive'){
				callback(window.event);
			}
		})
	} else{
		window.onload=callback;
	}
}

3.4 document的文档高度、可视高度、滚动高度?

document.body.clientHeight   //文档高度
document.documentElement.clientHeight   //可视高度
document.documentElement.scrollTop     //滚动高度

3.5 元素拖拽移动?

<!--html-->
 <div id="move"></div>   

#move{
     position: absolute;
     height: 50px;
     width: 50px;
     border-radius: 10px;
     background-color: red;
 }

var move=document.getElementById('move');
move.addEventListener('mousedown',start);
move.addEventListener('mouseup',stop);
function start(e){
    console.log(e.clientX);
    document.addEventListener('mousemove',onMove);
}
function  onMove(eve){
    move.style.left=eve.pageX-move.offsetWidth/2+'px';
    move.style.top=eve.pageY-move.offsetHeight/2+'px';
} 
function stop(){
    document.removeEventListener('mousemove',onMove);
}

3.6 事件委托?

事件委托就是将目标元素事件绑定到其父元素上，利用冒泡机制处理，也就是把子元素的事件委托给父元素执行。

• 减少子元素注册事件，节省内存
• 能够对动态添加的子元素进行操作

var ulList=document.querySelector('.ulList');
var item=ulList.querySelectorAll('li');
ulList.addEventListener('click',function (e) {
	if(e.target==ulList){
		return;
	}else{
		console.log(e.target.innerHTML);
	}	
});

4. Node接口

Node接口是对节点的封装。

4.1 Node常用属性

• nodeType 表示节点的类型（1=标签；2=属性；3=文本；8=注释；9=文档）
• nodeName
• nodeValue表示内容（文本节点-文本值；属性节点-属性内容；注释节点-注释内容；其它-null）
• textContent 属性表示一个节点及其后代的文本内容

4.2 Node接口常用方法

• appendChild() 添加子节点
• insertBefore(newChild,child) 在当前节点的某个子节点插入新子节点
• removeChild(child) 返回删除的节点
• replaceChild(new,old) 替换，返回old