不断更新中...

1. 什么是API

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

2. DOM

文档对象模型（Document Object Model，简称DOM），DOM是一套JavaScript操作网页元素的API，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

• Document 文档：一个网页可以称为文档
• Node 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• Element 元素：网页中的标签
• Attribute 属性：标签的属性

3. DOM常用API

3.1 获取页面元素API

根据id获取元素

var div = document.getElementById('main');
// 注意，该方法的参数是大小写敏感的。

根据标签名获取元素

var paras = document.getElementsByTagName('p');

根据name获取元素

var forms = document.getElementsByName('x');

根据类名获取元素

var elements = document.getElementsByClassName('el1 el2');
// 参数可以是多个class，它们之间使用空格分隔。

根据选择器获取元素

var el = document.querySelector('.myClass');


var els = document.querySelectorAll('.myClass');

3.2 创建节点API

创建元素节点

var newDiv = document.createElement('div');
// 参数为元素的标签名

创建文本节点

var newContent = document.createTextNode('Hello');

创建属性节点

var attribute = document.createAttribute(name);

创建注释节点

var CommentNode = document.createComment(data);

3.3 修改页面API

插入节点

var p = document.createElement('p');
document.body.appendChild(p);

克隆节点

var cloneUL = document.querySelector('ul').cloneNode(true);

将某个节点插入父节点内部的指定位置

var insertedNode = parentNode.insertBefore(newNode, referenceNode);
// 第一个参数是所要插入的节点，第二个参数是父节点内部的一个子节点。新将插在这个子节点的前面。返回值是插入的新节点。

删除子节点

var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

替换子节点

var replacedNode = parentNode.replaceChild(newChild, oldChild);
// 第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild。