JS学习笔记8

DOM

含义：文档对象模型
获取元素节点的方法
1.document.getElementById(id)
2.node.getElementsByTagName(标签名)
3.node.getElementsByClassName(class名字)
4.document.getElementByName(name属性的值)
5.document.querySelector()
6.document.querySelectorAll()

3,5,6,IE8以下不支持

兼容IE8以下通过class名字获取节点的方法
这里需要我们自己去自定义方法

function elementsByClassName(node,classStr){
	var nodes=node.getElementsByTagName("*");
	var arr=[];
	for(var i=0;i<nodes.length;i++){
		if(nodes[i].ClassName==classStr){
			arr.push(nodes[i]);
		}
	}
	return arr;
}

获取当前有效样式
通过.style.xxx的方式只能访问内联的css样式。
如何获取当前的有效样式呢？
下面提供方两个方法
1…currentStyle[]//IE兼容
2.getComputedStyle ()[]//火狐，谷歌

跨浏览器兼容

function getStyle(node,cssStyle){
	return node.currentStyle ? node.currentStyle[cssStyle]:getComputedStyle(node)[cssStyle];
}

attribute方法操作元素节点属性
1.getAttribute()
2.setAttribute()
3.removeAttribute()

attribute系列方法和.操作调用行间属性的区别：attribute系列方法支持自定义属性，class的访问可以直接用class。不需要使用ClassName。

元素节点的其他属性
1.innerHTML 获取标签间内容，会解析标签
2.innerText 纯文本
3.outerHTML

访问当前节点的子节点
1.childNodes
2.fiestChild
3.lastChild
4.nextSibling
5.previousSilbling
上面这些属性都包含文本节点
下面这些属性只能获取子节点中的元素节点（ie8以下不兼容）
1.children
2.fiestElementChild
3.lastElementChild
4.nextElementSibling
5.previousElementSilbling

属性节点attributes
获取当前元素节点上的所有属性节点