Javascript之DOM3

**

Javascript之DOM3

**

2.6元素的属性值

2.6.1获取元素的属性值

1．element.属性

获取内置属性，元素本身自带的属性如：id class

2．element.getAttribute('属性')

主要获得自定义属性，自己定义的属性

H5新增获取自定义属性：所有自定义属性前+data-，如data-index



element.dataset.index && element.dataset[‘index’]


element.dataset存放了所有以data开头的自定义属性

如果自定义属性中有多个-连接，获取时要用驼峰命名法，
如data-list-name    element.dataset.listName && element.dataset[‘listName’]

2.6.2修改元素的属性值

1．element.属性 = '值'		

//class的属性为className

2．element.setAttribute('属性'，'值')
		
//class的属性就是class

2.6.3移除元素的属性

element.removeAttribute('属性')

3.1节点操作

获取所有的子节点：

1．	node.childNodes 
//包含子节点、元素节点，文本节点

2．	node.children
//只有子元素节点

获取父节点：

node.parentNode;
	//得到的时距离元素最近的节点

返回子元素节点：

node.firstElementChild					//IE9兼容//第一个
node.chrildren[node.children,length - 1]	  //返回最后一个。不用考虑兼容性//最后一个

返回兄弟元素节点：

node.nextElementSibling//上一个
node.previousElementSibling//下一个

创建、添加节点：
页面添加一个新元素分两步：1.先创建一个元素 2.添加元素
如创建一个li

创建：var lili = document.createElement(‘li’)
添加：node.appendChild(lili)	//node为父级，child为子集，后面追加元素
	node,insertBefore(child,指定元素)//指定位置添加元素

删除节点父元素中的子节点：

node,removeChild(child)//node为父亲  child为孩子

复制节点：

node.cloneNode()

4.1事件监听注册事件

1．传统方式：
		btn.onclick = function(){
		}		
		//不用考虑兼容性问题		

2．事件侦察方式
btn.addEventListener(‘事件类型’,function(){})
同一个元素，同一个事件，可以添加多个处理程序（监听器）
事件不需要加on，但有兼容性问题

3．事件侦察方式（只支持ie9以前的版本）
		btn.attachEvent(‘事件+on’，事件处理函数)	

4.2解绑事件

1．传统方式：
		btn.onclick = function(){
			btn.onclick = null;
		}							//不用考虑兼容性问题

2．事件侦察方式
btn.addEventListener(‘事件类型’,绑定的函数名fn)；
function fn(){
	btn.removeEventListener(‘click’,fn)  //移除的事件是点击事件，移除函数fn
}

3．事件侦察方式（只支持ie9以前的版本）
btn. attachEvent (‘on+事件类型’,绑定的函数名fn)；
function fn(){
	btn.detachEvent(‘click’,fn)  //移除的事件是点击事件，移除函数fn
}