JS前端知識點總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支

更新時間：2019年07月04日 12:08:59 作者：Johnny丶me

這篇文章主要介紹了JS前端知識點總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支,結(jié)合實例形式總結(jié)分析了JS頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支所涉及的相關(guān)事件、函數(shù)及操作注意事項,需要的朋友可以參考下

本文實例講述了JS前端知識點總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點操作，循環(huán)和分支。分享給大家供大家參考，具體如下：

頁面加載事件的比較

window.onload
jquery 中的 document.ready

document.ready = function (callback) {
  // 兼容FF,Google
  if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', function () {
      document.removeEventListener('DOMContentLoaded', arguments.callee, false);
      callback();
    }, false)
  }
  // 兼容IE
  else if (document.attachEvent) {
    document.attachEvent('onreadystatechange', function () {
       if (document.readyState == "complete") {
            document.detachEvent("onreadystatechange", arguments.callee);
            callback();
        }
    })
  }
  else if (document.lastChild == document.body) {
    callback();
  }
}
window.onload = function () {
  alert('onload'); // 后執(zhí)行
};
document.ready(function () {
  alert('ready'); // 先執(zhí)行
});

內(nèi)部實現(xiàn)細節(jié)如上

數(shù)組的常用操作方法

push 從后面追加一個或多個，返回新數(shù)組的長度
unshift 從前面追加一個或多個，返回新數(shù)組的長度
pop 刪除最后一個元素，返回被刪除的元素
shift 刪除第一個元素，返回第一個被刪除的元素
concat 連接數(shù)組，返回新的數(shù)組
join 將數(shù)組轉(zhuǎn)字符串，參數(shù)是分隔符，默認是分隔符是逗號”,”
split 將字符串轉(zhuǎn)換為數(shù)組，默認分割符是逗號 stringObject.split(separator,howmany), howmany 參數(shù)可指定返回的數(shù)組的最大長度

js 的構(gòu)成

ECMAScript 描述了js語法和基本對象
DOM (文檔對象模型) 提供了文檔結(jié)構(gòu)化表示，并定義了如何通過腳本來訪問文檔結(jié)構(gòu)
BOM (瀏覽器對象模型) 提供與瀏覽器交互的方法和接口

dom 節(jié)點

標簽節(jié)點
文字節(jié)點
屬性節(jié)點
注釋節(jié)點

獲取節(jié)點的方式

document.getElementById(“id”)
document.getElementByTagName(“div”)
document.getElementsByClassName(“classname”) ie 678 不支持
document.querySelector(); // 返回第一個匹配的dom元素
document.querySelectorAll(); // 返回所有dom元素匹配的集合

獲取瀏覽器是否支持的寫法如下

if(document.querySelector){
 // do your business
}

節(jié)點的訪問

父節(jié)點(唯一):

dom.parentNode

兄弟節(jié)點 (兼容寫法):

// nextSibling 和 previousSibling 是IE的寫法
var next = (dom.nextElementSibling) || (dom.nextSibling);
var pre = (dom.previousElementSibling) || (dom.previousSibling);

孩子節(jié)點 (兼容寫法):

// firstChild, lastChild 是IE的寫法
var first = father.firstElementChild || father.firstChild;
var last = father.lastElementChild || father.lastChild;

孩子們節(jié)點：childNodes 和 children

// childNodes 是w3c推薦使用， 但谷歌等瀏覽器把換行也看成一個節(jié)點
// 用下面的方式實現(xiàn)，比較麻煩
var demo = document.getElementById("demo");
var nodes = demo.childNodes;
for(var i=0;i<nodes.length;i++) {
 if(nodes[i].nodeType == 1) {
  nodes[i].style.display = "none";
 }
}
// children 在ie678里面包含注釋節(jié)點， 注意在編碼時避開使用注釋
var demo = document.getElementById("demo");
var child = demo.children;
child[0].style.backgroundColor = "red";  // 第一個孩子
child[child.length-1].style.backgroundColor = "red";  // 最后一個孩子

dom 節(jié)點操作

創(chuàng)建節(jié)點：

var dom = document.createElement(“div”);

添加節(jié)點：

// appendChild 將dom追加到dom1的最后面
dom1.appendChild(dom) ;
// insertBefore 將newDom 插入到 ReferencedDom 的前面, 返回值為新插入的值, dom1 為父節(jié)點
dom1.insertBefore(newDom, ReferencedDom)

刪除節(jié)點：

removeChild() eg: domA.removeChild(domB); // 刪除domA里面的孩子節(jié)點domB

克隆節(jié)點： cloneNode 復制節(jié)點，接受一個布爾值，true表示深復制(復制節(jié)點及其內(nèi)部所有節(jié)點)， false 表示淺復制

// 深復制
demo.cloneNode(true);
// 淺復制
demo.cloneNode(false);

屬性設定

非兼容ie6,7的寫法
- 獲取：dom.getAttribute(“屬性”);
- 設置：dom.setAttribute(“屬性”,”值”);
- 刪除：dom.removeAttribute(“屬性”);

兼容寫法舉例：
- 獲?。簐ar cn = dom.className
- 設置：dom.className = “dcl”
- 刪除：dom.className = null;

特殊樣式屬性

cssText 用于更改多個樣式屬性設置

dom.style.cssText = "width:30px;height:10px;"

常用的循環(huán)

for
while
do while

switch 多分支語句

var str = "abc";
switch(str) {
 case "a"
  // ...
  break;
 case "b"
  // ...
  break;
 case "c"
  // ...
  break;
 case "abc"
  // ...
  break;
 default:
  // ...
}

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: