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);

  }

}