重头再学JS（4）— web API

浏览器渲染页面的过程：https://www.cnblogs.com/houfee/articles/9065230.html

1、获取元素

document.getElementById('标签的id值'); 
document.getElementsByTagName('标签名'); 
document.getElementsByClassName('标签的类名');
document.getElementsByName('标签的name值');
document.querySelector('选择器'); // 可以传多种 'ul li.active'
document.querySelectorAll('选择器');

2、操作元素

2.1、操作语法

获取：元素.属性名

设置：元素.属性名 = 值

2.2、操作非表单元素

id　　title　　href　　src　　className

innerHTML　　innerText

2.3、表单元素

value　　checked　　disable　　selected

readOnly　

2.4、操作自定义标签的属性

用户根据需求，自己给标签添加的自己定义的标签属性

<img src='wc.jpg' bigImg='bigWc.jpg' />
<!--bigImg='bigWc.jpg' 就是用户自定义的标签属性-->

操作方式：

节点对象.getAttribute('属性名')

节点对象.setAttribute('属性值'，'值')

节点对象.removeAttribute('属性值'，'值')

注意：自定义标签属性的操作只能够通过元素的getAtrribute、setAttribute、removeAttribute提供的方法操作。不能直接通过元素点的方式直接获取或设置

3、操作元素样式

3.1、通过元素的style属性操作

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';   // css→ background-color     js→ backgroundColor

通过样式属性设置宽高、位置的属性类型是字符串，需要加上px。**

3.2、通过设置元素的className属性操作

var box = document.getElementById('box');
box.className = 'aa bb';//设置
box.className.replace('aa','AA');//替换

注意：元素的style属性适合操作单个样式，而元素className适合操作一组样式

4、节点之间的关系

    元素节点.parentNode

    节点.childNodes （包括文本节点和元素节点）

    节点.children （仅仅是元素节点）

    父节点.firstChild;

    // 获取第一个元素子节点对象，有兼容问题IE9以下不支持：
    父节点.firstElementChild

    父节点.lastChild

    // 获取最后一个元素子节点对象，有兼容问题IE9以下不支持
    父节点.lastElementChild

    节点.previousSibling;
    // 获取上一个同级的元素节点，有兼容问题IE9以下不支持
    节点.previousElementSibling;

    节点.nextSibling;
    // 获取下一个同级的元素节点，有兼容问题IE9以下不支持
    节点.nextElementSibling;

5、动态创建、追加、删除元素

document.write('<h2>我是标题</h2>');
ul.innerHTML = ul.innerHTML  + '<li><a href="#">我是新的li</a></li>';
var a = document.createElement('a');

父节点.appendChild(新的子节点);
父节点.insertBefore(新的节点,旧的子节点)

父节点.removeChild(子节点)
父节点.replaceChild(新的节点,旧的子节点)

6、事件

事件源.事件类型 = 事件处理程序

/*
    功能：给元素注册事件
    参数：
        事件类型  字符串      注意：事件名不加on 如 'click'
        事件处理程序    函数
        是否捕获：可选，默认为false
*/
事件目标.addEventListener(事件类型,事件处理程序,是否捕获);

/*
    功能：移除元素的指定事件程序
    参数：
        事件类型  字符串  注意：事件名不加on 如：'click'
        事件处理程序：函数 注意：这里要把函数名传入过来
*/
事件目标.removeEventListener(事件类型,事件处理程序名称);

事件冒泡和事件捕获

7、事件对象的公共属性和方法

事件对象.type

作用：获取当前的事件名。

事件对象.target

作用：获取事件目标里最先触发事件的元素

事件对象.preventDefault();

作用：阻止事件默认行为的执行。 // e.preventDefault(); // 可以用return false 代替

事件对象.stopPropagation();

作用：停止冒泡

8、鼠标事件对象的属性

事件对象.clientX / 事件对象.clientY

　　鼠标在浏览器可视区域中的坐标

事件对象.offsetX / 事件对象.offsetY

　　获取鼠标在指定的元素的区域中的坐标

事件对象.pageX / 事件对象.pageY

　　获取鼠标在整个文档区域中的坐标

9、键盘事件对象的属性

事件对象.altKey

　　检测是否按下键盘上的 Alt键。按下返回 true

事件对象.ctrlKey

　　检测是否按下键盘上的 Ctrl键。按下返回 true

事件对象.shiftKey

　　检测是否按下键盘上的 Shift键。按下返回 true

事件对象.keyCode

　　返回被敲击的键生成的 Unicode 字符码(ascii码)，返回ascii码表对应的十进制的数字

10、事件委托

事件委托的原理用到的就是 目标元素 和 事件冒泡，把事件注册到父元素或父级以上的元素上，等待 子元素事件冒泡，并且在父元素或父级以上的元素注册的事件中能够 通过事件对象.target判断是哪个子元素，从而做相应处理。 ① 给目标元素的父元素或父级以上的元素注册事件

② 在父元素或父级以上元素注册的事件中通过 事件对象.target判断是哪个子元素

③ 根据判断做出处理。

提高程序性能
可以代理新动态添加的元素的事件。

  <script>
      // 获取div元素
    var divNode = document.getElementById('box');
    divNode.onclick = function(e){
      // 获取最先触发的元素节点
      var node = e.target;
      // 节点对象.tagName  获取节点对象对应的标签名 返回的是大写
      if(node.tagName.toLowerCase()=='p'){
        alert(node.innerHTML);
      }
    }
  </script>