JS知识

一、类型转换：
Number()->toFixed(2); //保留小数点后两位数;
String(); Array.from(对象名);对象转为数组

Math对象：round()四舍五入；
ceil()向上取整；
floor()向下取整；
sqrt()平方；
abs()取绝对值；
min()、max()最小值 最大值；
random()随机数

二、获取多个元素对象
1、（1）document.getElementsByClassName(‘元素’);
（2）严谨获取document.querySelector(‘父级元素’).getElementsByClassName(‘子元素’);
2、document.getElementsByTagName(‘元素’); //html数组转化为数组Array.from(对象名)
3、document.querySelectorAll(‘元素’);

三、获取节点

let val;
const list = document.querySelector('ul.collection');
const listItem = document.querySelector('li.collection-item:first-child');
val = list;
// 获取子节点
val = list.childNodes; //能看到的 和 看不到的（指元素之间的换行或空格） 子节点都获取到
val = list.childNodes[0];
val = list.childNodes[0].nodeName;
val = list.childNodes[0].nodeType; //1-Element  2-Attribute  3-Text Node  8-Comment  9-Document Self  10-Doctype
// 获取子元素节点
val = list.children;
val = list.children[0];
list.children[1].textContent = 'hello';
// 获取子元素的子元素
val = list.children[3].children[0];
val = list.children[3].children[0].id;
val = list.children[3].children[0].className;
// 获取第一个元素节点
val = list.firstChild;
val = list.firstElementChild;
// 获取最后一个元素节点
val = list.lastChild;
val = list.lastElementChild;
// 计算节点个数
val = list.childElementCount; //可见的节点个数
// 获取父级节点
val = listItem;
val = listItem.parentNode;
val = listItem.parentElement;
val = listItem.parentElement.parentElement;
// 获取下一个兄弟节点
val = listItem.nextSibling;
val = listItem.nextElementSibling.nextElementSibling.previousElementSibling;
// 获取上一个兄弟节点
val = listItem.previousSibling;
val = listItem.previousElementSibling;
console.log(val);

四、添加元素

// 创建元素
const li = document.createElement('li');
// 添加类
li.className = 'collection-item';
// 添加id
li.id = 'new-item';
// 添加自定义属性
li.setAttribute('title', 'New Item');
// 添加文本
li.appendChild(document.createTextNode('任务6'));
// 创建a标签
const link = document.createElement('a');
link.className = 'delete-item secondary-content';
// 插入i标签
link.innerHTML = "<i class='fa fa-remove'></i>";
// 将link放入li
li.appendChild(link);
// 将li放入ul
document.querySelector('ul.collection').appendChild(li);
console.log(li);

五、替换和删除元素

获取父级元素.replaceChild(新的元素， 要替换的旧元素); //替换
// 删除元素
const lis = document.querySelectorAll('li');
const list = document.querySelector('ul');
lis[0].remove(); //第一种删除方法
list.removeChild(lis[4]); //第二种删除方法