前言
首先，什么是原生JS？之前听过很多入门新手都乱不清这个说法。所谓的“原生JS”，只是国人对JavaScript基础（遵循ECMAscript标准）的一种叫法，原生态JavaScript，不依赖任何类库，不适用任何框架，纯粹是原原本本的JavaScript代码。从本质上讲，JavaScript本身就存在一些自己的类库，并且非常强大！
我们常用的“jqurey”就是原生JavaScript的集成框架或插件之一，它对原生js支持比较友好。使用框架编写的JavaScript代码，其实并不是你写的，你只是用了别人集成的工具函数进行总结整理出来的，哈哈！
原生JS由三部分组成：ECMAscript标准（核心）、文档对象模型(DOM)、浏览器对象模型(BOM)，本文就JavaScript常用基础做了简单总结：
Document 文档对象模型(DOM)
1、获取DOM元素
// 通过Id属性获取
console.log(document.getElementById('id'));
// 通过ClassName（类名）属性获取
console.log(document.getElementsByClassName('class'));
// 通过TagName（标签）属性获取
console.log(document.getElementsByTagName('div'));
// 通过Name属性获取
console.log(document.getElementsByName('name'));
2、类名操作（Class）
className属性操作
document.getElementById('id').className，该属性内容会直接改变dom元素上class的值;
console.log(document.getElementById('id').className);
// 设置类名
document.getElementById('id').className='myclass';
// 设置多个类名，中间用空格隔开
document.getElementById('id').className='myclass1 myclass2';
// 清空类名，设置为空
document.getElementById('id').className='';
classList属性操作
document.getElementById('id').classList，使用classList会优于使用className，但是classList中的add()和remove()均只能进行单一操作，也就是说不能同时新增或者删除多个类名；
// 获取类名返回一个数组
console.log(document.getElementById('id').classList);
// 获取类名数组长度（类名的个数）
console.log(document.getElementById('id').classList.length);
// 判断是否存在该class
document.getElementById('id').classList.contains('oldClass');
// 添加class，在class属性新增，并不是直接替换
document.getElementById('id').classList.add('newClass');
// 移除class
document.getElementById('id').classList.remove('oldClass');
// 切换class，有则移除，没有则添加
document.getElementById('id').classList.toggle('newClass');
3、节点操作（Node）
// (1)、获取节点列表（查找）querySelectorAll
var myNodeList = document.querySelectorAll("div");
console.log(myNodeList); // 返回一个节点数组（body下面所有的div元素）
// (2)、修改样式：所有的div元素背景颜色设置为红色
var myNodelist = document.querySelectorAll("div");
for (var i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.backgroundColor = "red";
}
// (3)、修改节点文本 innerHTML
document.getElementById('id').innerHTML = 'Hello world!';
// (4)、修改节点元素样式 style
document.getElementById('id').style.display = 'none';
// (5)、在body中创建节点并在其中添加文本 appendChild 尾部添加
var newdiv = document.createElement('div'); // 创建元素节点
var newtext = document.createTextNode('Hello world!'); // 创建文本节点
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);
// (6)、插入节点：将新元素添加到开始位置 insertBefore 起始位置添加
var node = document.getElementById("id");
var child = document.getElementById("p1");
node.insertBefore(child);
// (7)、获取子节点列表 childNodes
var element = document.getElementById('id');
var childNodes = element.childNodes;
// (8)、删除子节点（只能是父级删子级）removeChild
element.removeChild(childNodes[0]);
// (9)、替换子节点 replaceChild
var para = document.createElement("p");
var text = document.createTextNode("新建文本");
para.appendChild(text);
var parent = document.getElementById("id");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
提示： 对于本章节想具体深入详情了解、学习可参考菜鸟教程[DOM 教程]
ECMAscript 语法基础
1、JavaScript 数据类型
基本类型（值类型）
字符串（String）；
数字(Number)；
布尔(Boolean)；
为空（Null）；
未定义（Undefined）
// 字符串
var str = "string";
console.log(str); // string
// 数字
var num = 123;
console.log(num); // 123
console.log(Number(str)); // NaN
console.log(String(str)); // 123
// 布尔值
var x = true;
var y = false;
console.log(x); // true 真值
console.log(y); // false 假值
// 空值：null 是js中的关键字，表示空值
var data = null;
console.log(data);
// 未定义：undefined不是js中的关键字，它是一个全局变量，undefined是从null中派生出来的，它类似于NaN、Infinity一样，一般定为只读（es5修正），在初始赋值是不推荐此类型赋值。
var data = undefined;
var obj = {};
console.log(data); // undefined
console.log(obj.item); // undefined
注： ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。
引用数据类型
对象(Object)；
var obj = new Object();
数组(Array)；
var obj = new Array();
函数(Function)；
var obj = function(){};
2、实例对象
Object对象
// Object实例对象
var obj = new Object();
console.log(typeof(obj)); // object
console.log(Object.prototype); // 返回 Object 原型对象
obj.x='123';
obj['y']='123';
console.log(obj.valueOf()); // {x: '123', y: '123'} 返回对象本身
console.log(obj.toString()); // [object Object] 字符串形式
console.log(obj.hasOwnProperty('x')); // true 判断当前对象是否存在某个属性
console.log(obj.propertyIsEnumerable('x')); // true 判断当前对象的某个属性是否可枚举
Array对象
// Array实例对象（数组）
var arr = new Array();
console.log(typeof(arr)); // object
console.log(Array.isArray(arr)); // true 判断实例对象是否为数组
console.log(arr.length); // 0 判断数组长度
arr.push('123'); // 在数组末端添加一个元素
arr.push('aa','abc'); // 在数组末端添加多个元素
arr.unshift('567'); // 在数组首位添加一个元素
arr.unshift('890','efg'); // 在数组首位添加多个元素
console.log(arr.valueOf()); // ['890', 'efg', '567', '123', 'aa', 'abc'] 返回数组本身
arr.shift(); // 从删除数组的第一个一个元素，并返回该元素
console.log(arr.valueOf()); // ['efg', '567', '123', 'aa', 'abc']
arr.pop(); // 从数组末尾删除一个元素，并返回该元素
console.log(arr.valueOf()); // ['efg', '567', '123', 'aa']
console.log(arr.join()); // efg,567,123,aa 将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔
console.log(arr.join('-')); // efg-567-123-aa
var arr1 = ['a','b','c'];
console.log(arr.concat(arr1)); // ['efg', '567', '123', 'aa', 'a', 'b', 'c'] 数组合并：在原数组的末尾添加新数组，然后返回一个新的数组
console.log(arr.reverse()); // ['aa', '123', '567', 'efg'] 反转排序：颠倒数组中元素的顺序，然后返回一个新的数组
console.log(arr.slice(1,3)); // ['123', '567']
arr = ['abc','efg','cbd','ppg']
console.log(arr.sort()); // ['abc', 'cbd', 'efg', 'ppg']
arr= ['1','4','5','2','6','3'];
console.log(arr.sort()); // ['1', '2', '3', '4', '5', '6']
console.log(arr.sort(function(a,b){return b-a})); // ['6', '5', '4', '3', '2', '1']
arr.map(function); // 数组遍历（依次执行每个元素 fun）
arr.forEach(function); // 数组遍历（依次执行每个元素 fun）
arr.filter(function); // 数组遍历（依次执行每个元素 fun）
console.log(arr.some()); // 依次执行每个元素，判断数组成员是否符合某种条件
console.log(arr.every()); // 依次执行每个元素，判断数组成员是否符合某种条件
console.log(arr.reduce()); // 依次处理数组的每个成员，最终累计为一个值，左->右
console.log(arr.reduceRight()); // 依次处理数组的每个成员，最终累计为一个值，右->左
console.log(arr.indexOf()); // 元素首次出现的位置，可用来查找数组元素是否存在，存在则返回当前的位置下标，不存在则返回-1
console.log(arr.lastIndexOf()); // 元素最后出现的位置，，可用来查找数组元素是否存在，存在则返回当前的位置下标，不存在则返回-1
Number对象
var num = new Number(10);
console.log(typeof(num)); // object
// toString() 转成字符串：如果带一个数字参数，则转成该参数的进制，再转成字符串，不带参数则默认转成十进制
console.log(num.toString()); // 10
console.log(num.toString(2)); // 1010
// toFixed() 保留指定位数的小数，例如参数为3则保留两位小数，转成字符串
console.log(num.toFixed(3)); // 10.000
// toExponential() 科学计数法：带一个参数（0-20），表示小数的有效位数，超出范围侧报错RangeError
console.log(num.toExponential(3)); // 0e+1
// toPrecision() 转为指定位数的有效数字
console.log(num.toPrecision(3)); // 10.0
String对象
var str = new String('string');
console.log(typeof(str)); // object
// 字符串的长度
console.log(str.length); // 6
// charAt(index) 获取指定位置的字符，index表示位置下标
console.log(str.charAt(2)); // r
// fromCharCode() 转成Unicode码对应的字符串
var code = String.fromCharCode(65);
console.log(code); // A
// charCodeAt(index) 转成指定位置字符的Unicode码
console.log(str.charCodeAt(3)); // 105 'i'对应的Unicode码是105
console.log(str.charCodeAt(25)); // NaN str中不存在第25个字符，所以无法转换
// concat(new str) 连接两个字符串，返回一个新的字符串
var str1 = 'sasd';
console.log(str.concat(str1)); // stringsasd
str = str.concat(str1);
// slice(start,end) 字符串截取
console.log(str.slice(1,3)); // tr
console.log(str.slice(str.length-3,str.length)); // asd 截取字符串最后三个字符
// substring(start,end) 字符串截取
console.log(str.substring(1,3)); // tr
// substr(start,length) 字符串截取
console.log(str.substr(1,3)); // tri
// indexOf(s) 查找字符串位置 不存在则返回-1
console.log(str.indexOf('r')); // 2
// lastIndexOf(s) 查找字符串位置 不存在则返回-1
console.log(str.indexOf('r')); // 2
// trim() 去除字符串两端的空格
var newStr = ' newStr ';
console.log(newStr.trim()); // newStr
// toLowerCase() 字符串全部转为小写，不改变源字符串，返回新的字符串
console.log(newStr.toLowerCase()); // newstr
// toUpperCase() 字符串全部转为大写，不改变源字符串，返回新的字符串
console.log(newStr.toUpperCase()); // NEWSTR
// localeCompare(str2) 比较两个字符串：返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串
var str2 = 'str2';
console.log(newStr.localeCompare(str2)); // -1
newStr=newStr.trim();
console.log(newStr.localeCompare('newStr')); // 0
console.log(newStr.localeCompare('newSt')); // 1
// match(regexp) 字符串匹配（查找） regexp可以为正则表达式，将匹配处理的字符组成一个数组，然后返回来
console.log(newStr.match(/e/g)); // ['e']
str = 'lonely agin exit lege';
console.log(str.match(/e/g)); // ['e', 'e', 'e', 'e']
// search(str) 字符串查找 返回字符串出现的第一次位置，没有则返回-1
console.log(str.search('e')); // 3
// replace(oldValue,newValue) 字符串替换
console.log(str.replace('e','ab')); // lonably agin exit lege 默认只会替换第一个
console.log(str.replace(/e/g,'ab')); // lonably agin abxit labgab 全部替换
// split() 字符串分割 返回分割后的数组
console.log(str.split('e')); // ['lon', 'ly agin ', 'xit l', 'g', '']
Math对象
Math对象?没印象？哈哈
Math对象常用于数学计算（数学方法、三角函数）；它并不是一个对象的类，它也没有构造函数。
三角函数
// Math.sin()：返回参数的正弦
console.log(Math.sin(60)); // -0.3048106211022167
// Math.cos()：返回参数的余弦
console.log(Math.cos(60)); // -0.9524129804151563
// Math.tan()：返回参数的正切
console.log(Math.tan(60)); // 0.320040389379563
// Math.asin()：返回参数的反正弦（弧度值）
console.log(Math.asin(60)); // NaN
// Math.acos()：返回参数的反余弦（弧度值）
console.log(Math.acos(60)); // NaN
// Math.atan()：返回参数的反正切（弧度值）
console.log(Math.atan(60)); // 1.554131203080956
数学任务方法
var num = -123.456
var num1 = 456.789
// Math.abs()：返回参数的绝对值
console.log(Math.abs(num)); // 123.456
// Math.ceil()：向上取整，接受一个参数，返回大于该参数的最小整数。
console.log(Math.ceil(num)); // -123
// Math.floor()：向下取整
console.log(Math.floor(num)); // -124
// Math.max(n,n1,...)：取最大值，可接受多个参数，返回最大值
console.log(Math.max(1,2,3,4,4,5,2,8,1)); // 8
// Math.min(n,n1,..)：去最小值，可接受多个参数，返回最小值
console.log(Math.min(1,2,3,4,4,5,2,8,1)); // 1
// Math.pow(n,e)：指数运算, 返回以第一个参数为底数、第二个参数为幂的指数值
console.log(Math.pow(2,3)); // 8 ——> 2^3=8
// Math.sqrt()：开平方：返回参数值的平方根。如果参数是一个负值，则返回NaN。
console.log(Math.sqrt(4)); // 2
console.log(Math.sqrt(16)); // 4
// Math.log()：返回以e为底的自然对数值。
console.log(Math.log(13)); // 2.5649493574615367
// Math.exp()：返回e的指数，也就是常数e的参数次方。
// Math.round()：四舍五入
console.log(Math.round(num)); // -123
// Math.random()：返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。
console.log(Math.random()); 0.46221618250258945
JSON对象
JSON.stringify(); 用于将一个值转为字符串，该字符串应该符合JSON格式
JSON.parse(); 用于将JSON字符串转化成对象
RegExp对象（正则表达式）
什么是 RegExp？正则表达式描述了字符的模式对象，当您检索某个文本时，可以使用一种模式来描述要检索的内容。简单的模式可以是一个单独的字符，更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等，您可以规定字符串中的检索位置，以及要检索的字符类型；RegExp 就是这种模式。
// reg和reg1的表示方法是等价的，都可以做出相同的匹配
var reg = new RegExp("\\w+");
var reg1 = /\w+/;
// 汉字匹配
/[^\u4E00-\u9FA5]/g
// 数字匹配
/\D/g 或者 /[0-9]/g
// 字母匹配
/[a-z]/g 或者 /[A-Z]/g
详情请参考菜鸟教程[JavaScript RegExp对象]
浏览器对象模型(BOM)
浏览器对象模型：Window 对象、Navigator 对象、Screen 对象、History 对象、Location 对象
Window对象：表示浏览器中打开的窗口
Navigator对象：包含有关浏览器的信息
Screen对象：包含有关客户端显示屏幕的信息
History对象：包含用户（在浏览器窗口中）访问过的 URL， 它是window对象的一部分，可通过 window.history 属性对其进行访问
Location对象：包含有关当前 URL 的信息，它是window对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问
存储对象：Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作
提示：想要深入了解本章节详情可参考菜鸟教程[Browser对象]