聊聊原生JS的那些事儿（常用JavaScript基础简单总结）

前言

       首先，什么是原生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对象]