原生JS--增删改查

字符串的增删改查
数组的增删改查
对象(属性)的增删改查
DOM的增删改查
- 获取元素
- 获取元素位置和大小
- 获取元素CSS属性
- - 元素的类class增删改查：
- 遍历DOM节点树
- 遍历元素节点树
- 节点的增删改查

字符串的增删改查

(不改变原字符串)

增
连字符“+”/Str.concat()
删
Str.substr(startIndex,length)，该方法W3C不建议使用
Str.substring(startIndex,endIndex)，传入非负整数参数
Str.trim(),删除字符串间空格,ES6
Str.trimLeft()/Str.trimRight(),左/右空格

JavaScript字符串“三剑客”

改
replace(RegExp,str),替换
slice(startIndex,endIndex),截取
substr(startIndex,length)
substring(startIndex,endIndex)
split(分隔符，返回的数组中的项个数),分割，返回数组

Arr.join()和Str.split()

查
indexOf()
lastIndexOf()
match()
search()

正则：EX.test(str),返回true/false；
Str.match(EX),返回数组/null,index属性,input属性；Str.search(EX),返回匹配起始下标/-1，只匹配第一个；

简述test、match、replace和search的用法

比较
localeCompare()
转化
toString()
big(),大号字体
small(),小号字体
blod(),粗体
italics(),斜体
toUpperCase(),大写
toLocalUpperCase()
toLowerCase(),小写
toLocalLowerCase()
sup(),上标
sub(),下标
strike(),删除线
blink(),闪动
fixed(),打印机文本
fontsize(),指定字体大小
fontcolor(),指定字体颜色
link(),链接字样

数组的增删改查

增
Array.push()/unshift()，返回数组长度
如:Arr.push(1,2,3)
删除
Array.pop()/shift()，返回被删的元素
改（增、删）
Array.splice(startIndex,length,addArr,…addArr)，剪/接/替换返回被删数组

splice(0,0,addArr),splice(length-1,1),splice(index,0,addArr)

查（不改变原数组）
indexOf(obj,startIndex)从头向尾查,lastIndexOf(obj,startIndex)从尾向头查
找不到时，返回-1
复制数组（不改变原数组）
Array.slice(startIndex,endIndex),剪切返回被切数组，原数组不变
slice(0),concat(arr,…arr)拼接
转化（不改变原数组）
toString(),逗号隔开字符串
join("+"),指定连接符隔开转字符串
排序
reverse(),倒序/反转返回改变数组
sort(),按规则排序

sort()排序相关：

对象(属性)的增删改查

增(创建)
三种：

通过new Object()调用内部构造函数constructor；
声明式定义对象，var/let/const= {key,val}；
自定义构建函数，var/let = fn(obj.att),工厂方法创建对象；

构造函数是专门用来创建对象的函数；
增(属性)：obj.att=val或obj[att]=val；方括号[]内可动态传入属性；

删
delete obj.att
改(重新赋值/引用)
查(读取对象的属性)
att in obj，返回true/false；
obj.hasOwnProperty(att),返回true/false；

DOM的增删改查

获取元素

document.getElementById();通过ID获取
document.getElementsByClassName();通过类名获取
document.getElementsByName();通过name属性获取
document.getElementsByTagName();通过元素标签获取

以下为静态获取，是一个拷贝，无法更新获取元素里的数据：
document.querySelector();通过CSS选择符获取(第一个)
document.querySelectorAll();（所有）

获取元素位置和大小

clientHeight/clientWidth：元素的内尺寸，元素内容+padding；
offsetHeight/offsetWidth：元素的外尺寸，元素内容+padding+border；
offsetLeft/offsetTop：元素的左上角与已定位的父容器左上角的距离；
scrollHeight/scrollWidth：(可见区域或浏览器出现滚动条时)元素内容的总高度/宽度，元素尺寸；
scrollTop/scrollLeft：滚动条位置，可见位置；
El.getBoundingClientRect()：返回元素与页面的左上角(left,top)，右下角(right,bottom)坐标四个值；
screenTop/screenLeft：元素(?)

event.screenX/event.screenY：鼠标点击页面坐标；
event.clientX/event.clientY：鼠标点击浏览器坐标；
event.offsetX/event.offsetY：鼠标点击元素位置；

如果是只读属性，每次访问都需要重新计算；

获取元素CSS属性

document.getComputedStyle(“e”)，获取e所有的计算后的CSS属性，只读属性，IE不支持；
e.style.property= value，设置元素css样式属性；

e.setAttribute(attr,value);设置元素自身属性；

元素的类class增删改查：

e.classList;查看所有类名
e.classList.add(“CLASS1”,“CLASS2”);增加
e.classList.remove(“CLASS1”,“CLASS2”);删除
e.classList.contains(“CLASS”);是否有类名CLASS
e.classList.toggle(“CLASS”,是否强制t/f);切换添加/移除类名，返回true/false

遍历DOM节点树

parentNode获取父节点
childNodes获取子节点
firstChild获取第一子节点
lastChild获取最后子节点
nextSibling获取后一个弟节点
previousSibiling获取前一个兄节点

hasChildNodes()方法，是否子节点
innerText获取节点下文本
textContent获取节点下所有文本

节点类型nodeType属性=>
element类型（元素节点）：1
text类型（文本节点）：3
comment类型（注释节点）：8
document类型（document节点）：9

遍历元素节点树

parentElement获取元素父节点
children获取元素子节点，（除了这，其他IE9以下不兼容）
firstElementChild获取元素第一个子节点
lastElementChild获取元素最后子节点
nextElementSibling获取后一个兄弟元素节点
previousElementSibling获取前一个兄弟元素节点

节点的增删改查

增(三部曲)：

创建节点：var e= document.createTextNode(“element”);
或：var e = document.createElement(“div”);
获取目标节点：oDiv
添加节点：内部子节点末尾添加oDiv.appendChild(e)；
内部指定子节点之前插入oDiv.insertBefore(e，where);

一次创建的节点不会重复增加；多次使用需封装函数，重复创建节点；反向妙用：移动JS新建的节点或HTML原有节点！
移动子节点oDiv.parentNode.appendChild("oDiv"),移动原有oDiv节点到末尾；

oDiv.innerHTML = "<input type="text" placeholder="XXX">";

替换子节点
oldChild.parentNode.replaceChild(newChild,oldChild)
克隆节点
oDiv1 = oDiv.cloneNode(true);
oDiv.appendChild(oDiv1);
删除子节点
oDiv.parentNode.removeChild(oDiv);