javascript
原生JS--增删改查
原生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()排序相關：
對象(屬性)的增刪改查
- 增(創建)
三種：
構造函數是專門用來創建對象的函數；
增(屬性)：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.createElement(“div”);
內部指定子節點之前插入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);
總結
以上是生活随笔為你收集整理的原生JS--增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 防火墙对计算机有作用吗,win7自带防火
- 下一篇： PC 版微信多开防撤回软件