JavaScrip 五 webapi 节点 事件高级

获取元素

根据id获取元素对象  document.getElementById('id值');

通过标签名获取指定元素  得到的是多个元素
document.getElementsByTagName('标签名 例：li');

根据类名获取元素  document.getElementsByClassName('类名');

返回指定选择器的第一个元素 #id  .class  lidocument.querySelector('选择器'); 

返回指定选择器的所有元素  document.querySelectorAll('选择器');

获取特殊元素body html
document.body 获取body对象document.documentElement 获取html对象

事件三要素

1.事件是由三部分组成：   事件源    事件类型    事件处理程序   我们也称为事件三要素
（1）事件源    事件被触发的对象    谁被触发

（2）事件类型  如何触发  什么事件  比如鼠标点击（onclick），鼠标经过，键盘按下

（3）事件处理程序    通过 一个函数赋值的方式 完成

执行事件步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采用函数赋值形式）

操作元素

element.innerText：
从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉，不识别html标签

element.innerHTML：从起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行，识别html

标签常用元素的属性操作
1.src href

2.id  alt  title
操作表单元素type  value 

操作元素样式 大小 颜色
1.this.style.width  采用驼峰命名
2.先在css写好类属性样式  然后使用this.className＝'类名'

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法思想

1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下自己)
3.顺序不能颠倒 先排除其他人(清除所有元素样式) 再留下自己

获取属性值

element.属性  (获取内置属性的值)
element.getAttribute("属性”) (获取自定义属性的值)

设置属性值
element.属性 = 值
element.setAttribute("属性”，‘值’)

移除属性
element.removeAttribute(‘属性’)

设置自定义属性以data-自定义属性  来区别

节点操作

1.node.parentNode 获取父元素节点
1.parentNode 属性可返回某节点的父节点,注意是最近的一个父节点;

2.如果指定节点没有父节点则返回null;


2.获取子元素节点
parentNode.children

parentNode.children 是一个只读属性,返回所有的子元素节点,只返回子元素节点,其余节点不返回;

3.第一个子元素节点
parentNode.firstElementChild;

firstElementChild返回第一个子元素节点,找不到则返回null;

也可以使用parentNode.children[0](没有兼容性问题);

4.第一个子元素节点
parentNode.firstElementChild;

firstElementChild返回第一个子元素节点,找不到则返回null;

也可以使用parentNode.children[0](没有兼容性问题);

5.下一个兄弟元素节点(有兼容性)
node.nextElementSibling;

nextElementSibling 返回当前元素的下一个兄弟节点,找不到返回null;

6.上一个兄弟元素节点(有兼容性)
node.reviousElementSIbling;

previousElementSibling 返回当前元素的上一个兄弟节点,找不到则返回null;


7.创建节点
document.creatElement('tagName');

document.creatElement() 方法有tagName 指定的HTML元素,由于这些元素原来并不存在,根据我们的需求动态生成的,因此也被称为动态创建元素节点;

8.添加节点
1.node.appendChild(child);

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾;

2.node.insertBefore() ;

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面;

9.删除节点
node.removeChild(child);

node.removeChild() 方法从node节点中删除一个子节点,返回删除的节点;

10 删除节点
node.removeChild(child);

node.removeChild() 方法从node节点中删除一个子节点,返回删除的节点;

11 复制节点
node.cloneNode();

node.cloneNode() 方法返回调用该方法的节点的一个副本,也称为克隆节点/拷贝节点;

注意:

1.如果括号里边参数为空或者为false,则是浅拷贝,只克隆节点本身,不克隆里面的子节点;

2.如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点;

事件高级

注册事件两种方式

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式 和 方法监听 注册方式。

传统注册方式
利用 on 开头的事件 onclick

特点：

1、注册事件的唯一性
2、同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数



2 方法监听注册方式

1、w3c 标准 推荐方式
2、addEventListener() 是一个方法
3、IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替

4、特点：

（1）同一个元素同一个事件可以注册多个监听器
（2）按注册顺序依次执行


eventTarget.addEventListener(type, listener[, useCapture]) 
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收3个参数：

type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。

删除事件（解绑事件）

<script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }

        // 2. removeEventListener 删除事件
        // 里面的fn 不需要调用加小括号 【经测试，可以把整个fn函数写进来。】
        divs[1].addEventListener('click', fn)

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

        // 另外一种写法
        divs[1].addEventListener('click', function fn() {
            alert(22)
            this.removeEventListener('click', fn)
        })


        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。

DOM 事件流会经历3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段 

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

事件对象

什么是事件对象
 事件对象是系统自动创建的，我们只需接收就好
 
  div.onclick = function(e){  
 //里面e就是事件对象 我们直接使用就可以了 前提是必须有事件
}

2、事件对象的type属性

type 返回要触发的事件类型，比如:触发的是点击事件就返回onclick

但是注意事件类型不加 on
比如 ： click mouseover …

3、e.target 与this 差别

1、target: 是触发事件的对象(元素) 例如:给ul 绑定点击事件 我们点击里面的li 就返回所点击的li

2、this返回的是绑定事件的对象 而this 返回的就是事件绑定本身 ul

4、阻止默认行为e.preventDefault()

一、什么是默认行为
默认行为是指html标签自带的默认行为，比如a标签的默认跳转，button标签的默认提交

阻止默认行为就是让链接不跳转 让button标签不提交等

阻止默认行为两种方式
e.preventDefault()
return false 用于传统事件注册方式

阻止事件冒泡

1、e.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

2.return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

事件委托

原理:不要单独给子元素设置事件，而是给父元素设置事件 利用冒泡点击子元素事件会传给父元素
然后e.target 获取点击的元素 就可以不用for循环给每个子元素都添加事件 提高了性能

鼠标事件

mouseover和mouseout

当鼠标进入元素区域内触发和离开元素区域内触发

这两个事件是冒泡的,就是当前事件会冒泡给父元素,一层一层冒泡

mouseenter和mouseleave

与mouseover和mouseout效果一致,但是这两个事件不冒泡

2.鼠标坐标
e.clientX 可视化窗口x坐标
e.clientY 可视化窗口y坐标
e.pageX 相对整个页面的x坐标
e.pageY 相对整个页面的y坐标

键盘事件

2.键盘事件对象