快捷導(dǎo)航

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

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

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

本文實(shí)例講述了JS前端知識點(diǎn)總結(jié)之頁面加載事件，數(shù)組操作，DOM節(jié)點(diǎn)操作，循環(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)部實(shí)現(xiàn)細(xì)節(jié)如上

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

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

js 的構(gòu)成

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

dom 節(jié)點(diǎn)

標(biāo)簽節(jié)點(diǎn)
文字節(jié)點(diǎn)
屬性節(jié)點(diǎn)
注釋節(jié)點(diǎn)

獲取節(jié)點(diǎn)的方式

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

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

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

節(jié)點(diǎn)的訪問

父節(jié)點(diǎn)(唯一):

dom.parentNode

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

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

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

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

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

// childNodes 是w3c推薦使用， 但谷歌等瀏覽器把換行也看成一個(gè)節(jié)點(diǎn)
// 用下面的方式實(shí)現(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é)點(diǎn)， 注意在編碼時(shí)避開使用注釋
var demo = document.getElementById("demo");
var child = demo.children;
child[0].style.backgroundColor = "red";  // 第一個(gè)孩子
child[child.length-1].style.backgroundColor = "red";  // 最后一個(gè)孩子

dom 節(jié)點(diǎn)操作

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

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

添加節(jié)點(diǎn)：

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

刪除節(jié)點(diǎn)：

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

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

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

屬性設(shè)定

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

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

特殊樣式屬性

cssText 用于更改多個(gè)樣式屬性設(shè)置

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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: