JS-DOM（二）排他思想 获取元素属性 自定义属性 节点操作 创建元素 事件监听器

按钮点击显示按钮颜色（排他思想）

点击时先去掉所有按钮颜色，再给点击的按钮上色。
->首先排除其他人，再单独设置自己的样式——排他思想

鼠标经过事件：

onmouseover：鼠标经过元素
onmouseout：鼠标离开

获取元素属性值（二）

1.element.属性：获取元素内置属性
2.element.getAtrribute(‘属性’)：获取程序猿自己添加的属性（index="1"添加自定义属性）

设置元素属性值

1.element.属性=‘值’：设置内置属性值
2.element.setAttribute(‘属性’,属性值);主要针对自定义属性

移出属性

1.removeAttribute('属性 ')

自定义属性

目的：为了保存并使用数据。
1.只能用getAttribute获取自定义属性。
H5要求：“data-”开头的都是自定义属性，属性名为：data-属性名。
2.如果属性名为多个-连接的单词，获取调用时要用驼峰命名法（用.dataset[]获取）

节点操作

1.目的：获取元素（通过节点的兄弟子孙关系来获取元素）
2.概述：界面中所有内容都是节点（包括空格换行）。
3.三个节点属性：nodeType、nodeName、nodeValue

4.节点层级：

1）父级节点：parentNode，获取离元素最近的的父节点，如果找不到返回null。
2）子节点：childNodes，获取所有子节点（包括文本节点），
（1）children:获取所有的元素子节点（常用）
（2）获取第一个子节点：.firstChild(包括文本节点)，firstElementChild（返回第一个子元素节点，IE9以上支持）
（3）最后一个子节点：lastChild。lastElementChild（返回最后一个子元素节点，IE9支持）
（4）实际开发写法：.children[索引号]；

3）兄弟节点：
（1）nextSibling,得到下一个兄弟节点（包括文本节点）
（2）previousSibling:得到上一个兄弟节点（包括文本节点）
（3）nextElementSibling：得到下一个兄弟元素节点（IE9适用）
（4）previousElementSibling：得到上一个兄弟元素节点（IE9适用）
（5）兼容性函数：

5.创建节点

var li=doucument.createElement('li');

6.添加节点

//node.appendChild(child) node是父级
var ul=oducument.querySelectoe('ul');
ul.appendChild(li);

1）在指定子节点前面添加子节点

node.insetBefore(child,指定元素);

7.删除节点

node.removeChild(child);

8.复制节点

node.cloneNode();
//括号为空/false，为浅拷贝，只复制标签；括号里为true则复制内容

创建元素

1.doucument.write(),页面加载完毕后，再调用会进行页面重绘

事件高级

一、注册事件
1.传统注册方式：利用on开头的事件（唯一性，同一元素的同一事件只有最后一个生效）

2.方法监听注册方式：同一元素同一事件可以添加多个监听器
1）addEventListenner:


二、删除事件（解绑事件）：让事件失效
1.传统方式删除事件：

elment.onclick=function(){
	elment.onclick=null;
}

2.removeEventListener删除事件

var div = document.querySelector('.adv');
        div.addEventListener('click', fn);

        function fn() {
            alert('22');
            div.removeEventListener('click', fn);
        }

detachEvent

div.attachEvent('onclick', fn);
//IE 8
        function fn() {
            alert('22');
            div.detachEvent('onclick', fn);
        }

3.兼容性移出方案