JS前端知識點總結之頁面加載事件，數組操作，DOM節點操作，循環和分支

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

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

頁面加載事件的比較

• 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'); // 後執行
};
document.ready(function () {
  alert('ready'); // 先執行
});

• 內部實現細節如上

數組的常用操作方法

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

js 的構成

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

dom 節點

• 標籤節點
• 文字節點
• 屬性節點
• 註釋節點

獲取節點的方式

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

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

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

節點的訪問

父節點(唯一):

dom.parentNode

兄弟節點 (兼容寫法):

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

孩子節點 (兼容寫法):

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

孩子們節點：childNodes 和 children

// childNodes 是w3c推薦使用， 但谷歌等瀏覽器把換行也看成一個節點
// 用下面的方式實現，比較麻煩
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裏面包含註釋節點， 注意在編碼時避開使用註釋
var demo = document.getElementById("demo");
var child = demo.children;
child[0].style.backgroundColor = "red";  // 第一個孩子
child[child.length-1].style.backgroundColor = "red";  // 最後一個孩子

dom 節點操作

創建節點：

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

添加節點：

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

刪除節點：

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

克隆節點： cloneNode 複製節點，接受一個布爾值，true表示深複製(複製節點及其內部所有節點)， false 表示淺複製

// 深複製
demo.cloneNode(true);
// 淺複製
demo.cloneNode(false);

屬性設定

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

兼容寫法舉例：
- 獲取：var cn = dom.className
- 設置：dom.className = “dcl”
- 刪除：dom.className = null;

特殊樣式屬性

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

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

常用的循環

• for
• while
• do while

switch 多分支語句

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

更多關於JavaScript相關內容可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

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