JavaScript 之 web API

1、获取元素

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

2、操作元素

操作非表单元素

id　title　href　src　className   innerHTML　innerText

表单元素

value　checked　disable　selected   readOnly　

操作自定义标签的属性

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

<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() -- 阻止事件默认行为的执行

事件对象.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判断是哪个子元素

③ 根据判断做出处理。

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

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