JS 常用方法汇总（二）

Math

Math本身就是一个对象, 不需要在通过构造函数去创建, 该对象中集合了很多关于数学运算的方法

Math.abs() 获取一个对象的绝对值

Math.round() 四舍五入

Math.PI π

Math.max() 求几个数的最大数

Math.min() 求几个数的最小数

Math.ceil() 向上取整

Math.floor() 向下取整

Math.random() 随机数 (随机生成0 ~1之间的数)

//应用例子
var arr = [1,3,5,7,9,2,90,66]
console.log(Math.max.apply(null,arr))//90

JS选取DOM元素的方法

注意：原生JS选取DOM元素比使用jQuery类库选取要快很多

1、通过ID选取元素

document.getElementById('myid');

2、通过class选取元素

document.getElementsByClassName('myclass')[0];

3、通过标签选取元素

document.getElementsByTagName('div')[0];

4、通过name属性选取元素（常用于表单）

document.getElementsByName('myname')[0];

JS修改CSS样式

document.getElementById('myid').style.display = 'none';

JS修改class属性

document.getElementById('myid').className = 'active';

如果有多个CLASS属性，即用空格隔开

document.getElementById('myid').className = 'active div1';

移除该元素上的所有class

document.getElementById('myid').className = '';

注意：使用classList会优于使用className

document.getElementById('myid').classList.item(0); //item为类名的索引

document.getElementById('myid').classList.length; //只读属性

document.getElementById('myid').classList.add('newClass'); //添加class

document.getElementById('myid').classList.remove('newClass'); //移除class

document.getElementById('myid').classList.toggle('newClass'); //切换，有则移除，没有则添加

document.getElementById('myid').classList.contains('newClass'); //判断是否存在该class

补充：add和remove方法不允许链式操作，因为返回的都是undefined，其次，也不允许同时添加或删除多个class，可以自行扩展一下

JS修改文本

document.getElementById('myid').innerHTML = '123';

JS创建元素并向其中追加文本

var newdiv = document.createElement('div');
var newtext = document.createTextNode('123');
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);

同理：removeChild()移除节点，并返回节点

cloneNode() 复制节点
insertBefore() 插入节点（父节点内容的最前面）

注意：insertBefore() 有两个参数，第一个是插入的节点，第二个是插入的位置

追加元素的几种方法：

//1.在父级最前面追加一个子元素：prepend()
$('#page ul').prepend('<li id="prevPage">上一页</li>');

//2.在父级最后面追加一个子元素：append()
$('#page ul').append('<li id="nextPage">下一页</li>');

//3.将子元素追加到父级的最前面：prependTo()
$("<li id="prevPage">上一页</li>").prependTo($("#page ul"));

//4.将子元素追加到父级的最后：appendTo()
$("<li id="nextPage">下一页</li>").appendTo($("#page ul")); 

//5.在当前元素之前追加（是同级关系）：before()
$("#wrap").before("<p class='siblings'>我是同级元素before</p>");

//6.在当前元素之后追加（是同级关系）：after()
$("#wrap").after("<p class='siblings'>我是同级元素after</p>");

//7.将元素追加到指定对象的前面（是同级关系）：insertBefore()
$("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap")); 

//8.将元素追加到指定对象的后面（是同级关系）：insertAfter()
$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));  

//9.在节点的最后追加子元素：appendChild()

// 创建script标签
var script = document.createElement('script');
// 设置src属性
script.src = 'http://localhost:3001/better?callback=fn2';
// 将script标签追加到页面中
document.body.appendChild(script);

// 或者
// 创建p节点            
var para = document.createElement("p");
// 创建文本节点            
var node = document.createTextNode("我是子集appendChild新段落。"); 
// 把文本节点添加到p节点里            
para.appendChild(node);  
// 查找div            
var element = document.getElementById("wrap"); 
// 把p节点添加到div1里            
element.appendChild(para); 

JS返回所有子节点对象 childNodes

firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点对象
nextSibling 返回下一个兄弟节点对象
previousSibling 返回前一个兄弟节点对象
nodeName 返回节点的HTML标记名称

var mylist = document.getElementById('myid');
for(var i=0,i<mylist.childNodes.length;i++){
  console.log(mylist.childNodes[i]);
}

参考文章：https://www.cnblogs.com/joe235/p/13679218.html

对里面的内容进行了一些修改和补充，有问题请联系修正，Thanks♪(･ω･)ﾉ

未完待续~