原生JS--增删改查

字符串的增删改查

(不改变原字符串)

• 增
  连字符“+”/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()排序相关：

对象(属性)的增删改查

• 增(创建)
  三种：

1. 通过new Object()调用内部构造函数constructor；
2. 声明式定义对象，var/let/const= {key,val}；
3. 自定义构建函数，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获取前一个兄弟元素节点

节点的增删改查

• 增(三部曲)：

1. 创建节点：var e= document.createTextNode(“element”);
   或：var e = document.createElement(“div”);
2. 获取目标节点：oDiv
3. 添加节点：内部子节点末尾添加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);