作者：魔王哪吒

轉發連結：https://juejin.im/post/5e8089dde51d4546d72d2099

前言

小夥伴們，下午好。關於JavaScript學習相關文章，小編我最少發布了十幾篇文章了，具體請見本篇文章底部，有興趣的小夥伴可以看看。

JavaScript基礎語法

var a = [1, 2, 5];
for(var k in a){
    console.log(k);   // k 為當前元素的下標
}
for(var m of a){
    console.log(m);   // m 為當前元素的值
}
VM215:3 0
VM215:3 1
VM215:3 2
VM215:6 1
VM215:6 2
VM215:6 5
複製代碼

變量聲明

var 聲明一個變量，可賦一個初始值。
let 聲明一個塊作用域的局部變量，可賦一個初始值。
const 聲明一個塊作用域的只讀命名的常量。
變量的名字又叫做「標識符」，必須以字母、下劃線（_）或者美元符號（$）開頭，並且區分大小寫。
若沒有為變量賦初始值，則值默認為undefined
若沒有聲明變量而直接使用，拋出ReferenceError錯誤
當變量值為undefined時，布爾值環境當做false
當變量值為null時，布爾值環境當做false

數據類型

Boolean布爾值，true和false
null對大小寫敏感
undefined空類型，變量未定義時候的值
Number數值類型
String字符串類型
Symbol（ES6新增）表示一種唯一且不可變的數據

字面量

字面量是用來表示如何表達這個值
變量賦值時右邊的都是字面量
數組字面量
布爾字面量
浮點數字面量
對象字面量
整數字面量
正則字面量
字符串字面量

全局變量

代碼：

// ES5

var a = 'web';

window.a; // 'web'

// ES6

let b = 'web';

window.b; // undefined
複製代碼

注釋

代碼：

// 單行注釋

/*

多行注釋

*/
複製代碼

變量作用域

全局變量：即聲明在函數之外，當前文檔所有地方都可以訪問
局部遍歷：即聲明在函數內部，僅在當前函數內可以訪問

代碼：

// ES5及之前

console.log(a); // undefined

var a = 1;

console.log(a); // 1

// ES6開始

console.log(b); // Uncaught ReferenceError: b1 is not defined

let b = 2;

console.log(b); // 2
複製代碼

函數聲明有兩種方式

代碼：

// 函數聲明

f(); // 'web'

function(){

console.log('web');

};
複製代碼

// 函數表達式

g(); // Uncaught TypeError: g is not a function

var g = function(){ // 換成 let 聲明也一樣

console.log('web');

}
複製代碼

常量

使用const來聲明一個只讀的常量
const聲明的變量不能直接修改值，但是對於對象和數組，卻是不受保護可以修改的

一個完整的javascript實現由3個部分組成：核心ECMAScript，文檔對象模型DOM,瀏覽器對象模型BOM。
JavaScript是一種直譯式腳本語言，是一種動態類型，弱類型，基於原型的語言，內置支持類型。
JavaScript具有特點：一種解釋性腳本語言，主要用於向HTML頁面添加交互行為，可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離，
跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行。
JavaScript語法區別：區分大小寫，變量是弱類型，結尾的分號可有可無，解釋與java，c和php語言中的註解是相同的，大括號表示代碼塊。

示例{}包含的內容表示一個代碼塊

代碼：

if(test1=="red") {
    test1 = "blue";
    alert(test1);
}
複製代碼

JavaScript關鍵字：

break,else,new,var
case,finally,return,void
catch,for,switch,while
continue,function,this,with
default,if,throw
delete,in,try
do,instanceof,typeof
複製代碼

JavaScript的變量

在javascript中，變量是存儲信息的容器，變量存在兩種類型的值，即為原始值和引用值。

JavaScript的原始類型，即Undefined，Null，Boolean，Number和String型。
字符串String是JavaScript的基本數據類型。
數據類型表示數據的類型，JavaScript語言的每個值都屬於某一種數據類型。
JavaScript的數據類型分兩類：值類型（原始值），引用數據類型（引用值）。
值類型：字符串string，數字number,布爾boolean，對空null，未定義undefined，symbol為es6引入的一鍾新的原始數據類型，表示獨一無二的值。
引用數據類型：對象object，數組array，函數function。
JavaScript提供typeof運算符用於判斷一個值是否在某種類型的範圍內。
Undefined類型只有一個值，即為undefined。
當聲明的變量未初始化時，該變量的默認值是undefined。
Null類型只有一個值為null，值undefined實際上是從值null派生來的，所以JavaScript將他們定義為相等的。
null與undefined表示這兩個值相等，但含義不同。
undefined是聲明了變量但未對其初始化時賦予該變量的值，null表示尚未存在的對象。

代碼：

console.log( null == undefined); // true
複製代碼

Boolean類型的兩個值是true和false。
Number類型，所有數學運算返回的都是十進位的結果。
Number.MAX_VVALUE和Number.MIN_VALUE，它們定義了Number值集合的外邊界。
如果生成的數值結果大於Number.MAX_VALUE時，將被賦予值Number.POSITIVE_INFINITY，表示不再有Number值。生成的數值小於Number.MIN_VALUE，會被賦予值Number.NEGATIVE_INFINITY，表示不再有Number值。
有表示無窮大的值為Infinity。
Number.POSITIVE_INFINITY的值為Infinity，Number.NEGATIVE_INFINITY的值為-Infinity。

使用isFinite()方法判斷參數值是否是有窮的。

特殊的NaN，表示非數。與無窮大一樣，NaN也不能用於算術計算。注意,NaN與自身不相等。

示例：

console.log(NaN == NaN) // false
console.log(isNaN("66")); // false
複製代碼

String類型，是唯一沒有固定大小的原始類型，字符串字面量是用雙引號或者單引號聲明。

類型判斷

typeof操作符，用於獲取一個變量或者表達式的類型。

返回值：

undefined，變量是Undefined類型
boolean，變量是Boolean類型的
number，變量是Number類型的
string，變量是String類型的
object，變量是一種引用類型或者Null類型
複製代碼

示例：

console.log(typeof 12); // number
複製代碼

typeof運算符對null的值返回Object。

instanceof操作符，用於判斷一個引用類型屬於哪種類型。

示例：

<script>
 var a = new Array();
 if(a instanceof Array) {
     console.log('a是一個數組類型');
 }else{
     console.log('a不是一個數組類型');
 }
</script>
複製代碼

類型轉換

Number變量，將變量轉化為數字類型。
String變量，將變量轉化為字符串類型。
Boolean變量，將變量轉化為布爾值類型。
parseFloat變量，將變量轉化為浮點類型。
parseInt變量，將變量轉化為整數類型。

運算符

運算符：賦值運算符，算數運算符，比較運算符，邏輯運算符，一元運算符，二元運算符，三元運算符。

示例：

賦值運算符的符號為=

算數運算符：+，-，*，/，%

比較運算符：>，>=，<，<=，!=，==，===，！==

邏輯運算符： 

&&，邏輯與，表示表達式前後全為true才能返回true

||，邏輯或，表示表達式前後只要有一個true就返回true

!，邏輯取反，表示表達式後若為true，則返回false，否則反之。
複製代碼

++自增長，每執行一次自身加1,--自減，每執行一次自身減1.
i++，值先參與外部表達式的運算，然後再將自身的值加1。
++i，i先自身的值加1，再參與外部表達式的運算。
+=，a+=3等於a=a+3。同理類似。
三元運算符的表達式格式為：條件？正：假
運算符優先級：算數運算符>比較運算符>邏輯運算符>賦值運算符。

算數運算符
比較運算符
邏輯運算符
賦值運算符

分支循環

if-else條件判斷語句
switch-case選擇語句
for循環語句
for-in遍歷語句
while循環語句
do-while循環語句

示例：

if(條件 1) {
    當條件1為true時執行的代碼
}else if(條件 2){
    當條件2為true時執行的代碼
}else{
    當條件1和條件2都不為true時執行的代碼
}
複製代碼

示例：

switch(n){
    case1:
    執行代碼塊1
    break;
    case2:
    執行代碼塊2
    break;
    default:
    ...
}
複製代碼

示例：

for(語句1;語句2;語句3){
    被執行的代碼塊
}
複製代碼

continue表示為越過本次循環，繼續下一次循環
break表示跳出整個循環，循環結束

遍歷

for in語句循環遍歷對象的屬性，多用於對象，數組等複合類型，以遍歷其中的屬性和方法。

示例：

for(鍵 in 對象) {
    代碼塊
}
複製代碼

while，只有表達式為真，就可以進入循環。

示例：

while(表達式){
    代碼塊
}
複製代碼

do-while

示例：

do {
    代碼
}while(表達式)
複製代碼

數組

數組的屬性和方法：

concat()

連接兩個或更多的數組，並返回一個新數組。

語法:

arr.concat(a1, a2, ..., an)
複製代碼

參數:

arr：目標數組
a1,a2,...,an：需要合併的元素

join()

使用指定分隔符，連接兩個或多個數組的元素，返回一個字符串。

數組定義

使用new關鍵字創建一個array對象，可以在內存中創建一個數組空間，添加元素。
使用new關鍵字創建一個array對象的同時為數組賦予n個初始值。
不用new，直接用[]聲明一個數組，可以直接賦予初始值。

數組操作

添加元素
刪除元素，pop方法，shift方法，splice方法。
遍歷數組
插入元素，unshift方法，splice方法插入。
合併數組
數組轉字符串
數組元素倒序

pop方法，從尾部刪除，刪除後元素從數組上剝離並返回。
shift方法，從頭部刪除元素，並返回。
splice方法，從指定位置刪除指定的元素。
unshift方法，從頭部插入。
splice方法，從指定位置插入指定個數的元素。
concat方法將多個數組連接成一個數組。
join方法將數組中的元素合併成一個用指定分隔符合併起來的字符串。
reverse方法可以將數組中的元素倒序排列，而且直接改變原來的數組，不會創建新的數組。
sort方法可以將數組中的元素按照一定的規則自動排序（默認的是按照字符的ASCII碼順序排序）。

pop()和push()

pop(): 刪除並返回數組最後一個元素，改變原數組。
push(item): 向數組末尾添加一個或多個元素，改變原數組，返回新的數組長度。

shift()和unshift()

shift(): 刪除並返回數組第一個元素，改變原數組。
unshift(item): 向數組頭部添加一個或多個元素，改變原數組，返回新的數組長度。

示例：

let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2);    // [3, 5, 6]
let a2 = arr.slice(2,3);  // [3]

let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "web", "a");
// a =>  [2, 3]
// arr =>  [1, "web", "a", 4]
複製代碼

forEach()

代碼：

let a = [1,3,5,7];
a.forEach(function(val, index, arr){
    arr[index] = val * 2
})
a ; // [2, 6, 10, 14]
複製代碼

代碼：

arr.every(callback)

測試數組的所有元素是否都通過了指定函數的測試。

some()

測試數組中的某些元素是否通過由提供的函數實現的測試。
複製代碼

filter()

示例：

let a = [1, "", "aa", 2, 6];
let res = a.filter(function(val, index, arr){
    return typeof val == "number";
})
res;//[1, 2, 6]
複製代碼

map()

對每個元素執行此方法，並返回一個執行後的數組。

示例：

let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
    return val + 1;
})
b; //[2, 4, 6]
複製代碼

拓展運算符

拓展運算符使用(...)

示例：

console.log(...[1, 2, 3]);   // 1 2 3 
console.log(1, ...[2,3], 4); // 1 2 3 4
複製代碼

// 通常情況 淺拷貝
let a1 = [1, 2];
let a2 = a1; 
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]

// 拓展運算符 深拷貝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 作用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]
複製代碼

let [a, ...b] = [1, 2, 3, 4]; 
// a => 1  b => [2,3,4]

let [a, ...b] = [];
// a => undefined b => []

let [a, ...b] = ["abc"];
// a => "abc"  b => []
複製代碼

fill()

用於用指定值填充一個數組
用來初始化空數組，並抹去數組中已有的元素
fill()的第二個和第三個參數指定填充的起始位置和結束位置

new Array(3).fill('a');   // ['a','a','a']
[1,2,3].fill('a');        // ['a','a','a']
[1,2,3].fill('a',1,2);//  [1, "a", 3]
複製代碼

entries(),keys(),values()

entries()對鍵值對遍歷
keys()對鍵名遍歷
values()對鍵值遍歷。

includes()

includes()用於表示數組是否包含給定的值
第二個參數為起始位置，默認為0，如果負數，則表示倒數的位置，如果大於數組長度，則重置為0開始。

代碼：

[1,2,3].includes(3,3);    // false
[1,2,3].includes(3,4);    // false
[1,2,3].includes(3,-1);   // true
[1,2,3].includes(3,-4);   // true
複製代碼

flat(),flatMap()

示例：

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
複製代碼

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
複製代碼

語法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])
複製代碼

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
複製代碼

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
複製代碼

Array.prototype.reduce()

reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和為 6

var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);
複製代碼

語法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

initialValue可選

作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。
複製代碼

字符串對象屬性

字符串對象方法

字符串搜索

indexOf()，lastIndexOf()，search()和match()。

indexOf()，indexOf(搜索詞，起始索引位置)，第2個參數不寫則默認從0開始搜索。indexOf()用於檢索指定的字符串值在字符串中首次出現的位置。
lastIndexOf()，lastIndexOf(搜索詞，起始索引位置)，從後向前檢索，返回的是一個指定的子字符串值最後出現的位置。
search()，語法為字符串，search(搜索詞)或者字符串search(正則表達式)。
match()，語法為字符串。match()可在字符串內檢索指定的值，或者找到一個或者多個正則表達式的匹配。沒有匹配到結果，就返回null。有匹配到，會返回一個數組，數組的第0個元素存放的是匹配文本。

字符串截取

3種字符串截取方法：substring(),slice(),substr()

substring()，語法為字符串，substring(截取開始位置，截取結束位置)，substring()是常用的字符串截取方法，接收兩個參數，不能為負值，將返回一個新的字符串。
slice()，語法為字符串,slice(截取開始位置，截取結束位置)，slice()中的參數可以為負值，如果參數是負值，則該參數從字符串的尾部開始算起的位置。-1是指字符串的最後一個字符。
substr()，substr(截取開始位置，length)，在字符串中抽取從截取開始位置下標開始的指定數目的字符。返回一個字符串如果截取的開始位置為負數，則表示從字符串尾部開始算起。

字符串替換

replace()，replace(正則表達式/要被替換的字符串，要替換成為的子字符串)。

字符串切割

split()用於將一個字符串分割成字符串數組，語法為字符串。split(用於分割的子字符串，返回數組的最大長度)，返回數組的最大長度一般情況下不設置。

JS事件三個階段

事件流：

事件冒泡流
事件捕獲流

事件的處理過程主要有三個階段：捕獲階段，目標階段，冒泡階段事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。

捕獲，事件由頁面元素接收，逐級向下，到具體的元素
目標，具體的元素本身
冒泡，元素本身，逐級向上，到頁面元素

事件捕獲，當使用事件捕獲時，父級元素先觸發，子元素後觸發。
事件冒泡，當使用事件冒泡時，子級元素先觸發，父元素後觸發。

事件冒泡和事件捕獲

事件發生會產生事件流
DOM事件流：DOM結構是一個樹形結構，當一個HTML元素產生一個事件時，該事件會在元素節點與根節點之間按特定的順序傳播，路徑所經過的節點都會收到該事件。
事件流順序有兩種類型：事件冒泡和事件捕獲。

事件觸發方式

代碼：

addEventListener("click","doSomething","true")
複製代碼

第三個參數為true，表示採用事件捕獲，若false，表示採用事件冒泡。

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
    width:100%;
    height:100%;
}
</style>
<script>
 window.onload=function(){
     d1 = document.getElementById("d1");
     d2 = document.getElementById("d2");
     d3 = document.getElementById("d3");
     // true 表示在捕獲階段響應
     // false 表示在冒泡階段響應

     d1.addEventListener("click",function(event){
         console.log("d1")
     },"true");

     d2.addEventListener("click",function(event){
         console.log("d2")
     },"true")

     d3.addEventListener("click",function(event){
         console.log("d3")
     },"true")
 }
</script>
</head>
<body>
<div id="d1" style="background: #0000ff; width: 500px; height: 500px">
<div id="d2" style="background: #00ff00; width: 400px; height: 400px">
<div id="d3" style="background: #ff0000; width: 200px; height: 200px">
</div>
</div>
</div>
</body>
</html>
複製代碼

addEventListener網頁，點擊跳轉：addEventListener.html

事件委託

一個響應事件委託到另一個元素。

<ul id="btn">
    <li id="btn1">按鈕1</li>
    <li id="btn2">按鈕2</li>
    <li id="btn3">按鈕3</li>
</ul>

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

webbtn.myAddFun(btn1, 'click', function(event){
    alert('1點擊');
});

webbtn.myAddFun(btn2, 'click', function(event){
    alert('2點擊');
});

webbtn.myAddFun(btn3, 'click', function(event){
    alert('3點擊');
});
複製代碼

添加一個事件處理函數，來做事件委託

var btn = document.getElementById('btn');
webbtn.myAddFun(btn, 'click', function(event){
    event = webbtn.getMyEvent(event);
    var target = webbtn.getMyTarget(event);
    switch(target.id){
        case "btn1":
            alert('1點擊');
            break;
        case "btn2":
            alert('2點擊');
            break;
        case "btn3":
            alert('3點擊');
            break;
    }
});
複製代碼

鍵盤事件

鍵盤事件就是有關鍵盤操作所觸發的世界。

鍵盤事件：

滑鼠拖拽效果

滑鼠綁定onmousedown()，onmousemove()，onmouseup()事件。

mouse網頁，點擊跳轉：mouse.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouse</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #dd {
            width: 120px;
            height: 120px;
            background: #00ff00;
            position: absolute;
        }
    </style>
    <script>
        var dd;
        var mflag = false;
        function ondown() {
            dd = document.getElementById('dd');
            mflag = true;
        }
        function onmove(e){
            if(mflag) {
                dd.style.left = e.clientX - 60 + "px";
                dd.style.top = e.clientY - 60 + "px";
            }
        }
        function onup() {
            mflag = false;
        }
    </script>

</head>
    <body onmousemove="onmove(event)">
        <div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;"
    </body>
</html>
複製代碼

滑鼠事件

滑鼠事件：

示例：

function web(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    console.log("x:"+mouseX + "," + "y:"+mouseY)
}

<body onclick="web(event)">
複製代碼

滑鼠懸停是onmouseover
滑鼠離開是onmouseout

窗口事件

窗口事件：

load
unload
abort
error
select
resize
scroll

load事件，表示當頁面完全加載完之後，就會觸發window上面的load事件。包含所有的圖像，js文件，css文件等外部資源。

示例：

window.onload=function(){}
複製代碼

當頁面完全加載完之後執行其中的函數。

示例：

<script>
 window.onload = function() {
     var mydiv = document.getElementById("mydiv");
     console.log(mydiv.innerText);
 }
</script>

<body>
 <div id="mydiv"></div>
</body>
複製代碼

示例：

function imgLoad() {
    myimg = document.getElementById("myimg");
    // 圖片加載完成後，給圖片加載框
    myimg.style.border = "9px solid $00ff00";
}

<img id="myimg src="" onload="imgLoad()">
複製代碼

resize事件

當調整瀏覽器的窗口到一個新的寬度或者高度時，會觸發resize事件。

示例：

document.body.clientWidth和document.body.clientHeight獲得窗口的寬和高。

html,body {
    width: 100%;
    height: 100%;
}

<script>
 function winChange() {
     winWidth = document.body.clientWidth;
     winHeight = document.body.clientHeight;
 }
</script>

<body onresize="winChange()">
</body>
複製代碼

scrol事件，文檔或者瀏覽器窗口被滾動時觸發scroll事件

示例：

<script>
 function scrollChange() {
     srpos = document.getElementById("srpos");
     srpos.innerText = document.documentElement.scrollTop;
     srpos.style.top = docuemnt.documentElement.scrollTop+"px";
 }
</script>

<body onscroll="scrollChange()">
 <div style="height:300%;">
 <br/>
 <font id="srpos" style="position: relative;top: 0px">滾動條滾動到0px</font>
 </div>
</body>
複製代碼

焦點事件

示例：

<script>
var note;
function myfocus(fname,notename) {
    note = document.getElementById(notename);
    note.innerText = fname+'獲得焦點';
}

function myblur(fname,notename) {
    note = document.getElementById(notename);
    note.innerText = fname + '失去焦點';
}
</script>

<body>

<form name="myform">

<input type="text" name="uname" onfocus="myfocus('uname','unote')" onblur="myblur('uname','unote')"/><font id="unote"></font>

<br/>

<input type="text" name="pwd" onfocus="myfocus('pwd','pnot')" onblur="myblur('pwd','pnote')"/><font id="pnote"></font>

</form>

</body>
複製代碼

事件介紹

事件方法

窗口事件

load事件
resize事件
scroll事件
焦點事件

滑鼠事件

獲取滑鼠單擊位置
滑鼠懸停和離開
滑鼠拖拽

鍵盤事件與事件冒泡，獲取

JavaScript內置對象

window對象
document對象
location對象
navigator對象
screen對象
history對象

JavaScript的DOM操作，包含獲取節點，獲取，設置元素的屬性值，創建，添加節點，刪除節點，屬性操作。

DOM對象

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型，Document Object Model，文檔對象模型屬於BOM的一部分，用於對BOM中的核心對象document進行操作。
html dom模型被構造為對象的樹。

DOM操作

獲取節點的方法：

標籤id獲取：

document.getElementById(idName)
複製代碼

標籤name屬性獲取：返回元素數組

document.getElementsByName(name)
複製代碼

類別名稱獲取：返回元素數組

document.getElementsByClassName(className)
複製代碼

標籤名稱獲取：返回元素數組

document.getElementsByTagName(tagName)
複製代碼

獲取，設置元素的屬性值

getAttribute(attributeName)方法，//括號出入輸入名，返回對應屬性的屬性值
setAttribute(attributeName,attributeValue)方法，//傳入屬性名以及設置的值

示例：

<script>
window.onload=function(){
    mytable = document.getElementById('mytable');
    // 獲取mytable中標籤名為tr的字節點
    trs = mytable.getElementsByTagName("tr");
    len = trs.length;
    flag = true;
    for(i=0;i<len;i++){
        if(flag){
            trs[i].setAttribute('bgcolor','#cccccc');
            flag = false;
        }else{
            flag = true;
        }
    }
    ww = mytable.getAttribute('width');
}
</script>

<body>
<table id="mytable' align='center' width="80%" border="1">
<tr bgcolor = "#cccccc">
 <td>aaa</td>
 <td>bbb</td>
 <td>ccc</td>
</tr>
</table>
</body>
複製代碼

創建，添加節點

創建節點：

代碼：

// 創建節點：

document.createElement("h1");
document.createTextNode(String);
document.createAttribute("class");
複製代碼

添加節點：

代碼：

element.appendChild(Node);

element.insertBefore(newNode, existingNode);
複製代碼

刪除節點

代碼：

element.removeChild(Node)
複製代碼

屬性操作：獲取當前元素的父節點，獲取當前元素的子節點，獲取當前元素的同級元素，獲取當前元素的文本，獲取當前節點的節點類型，設置樣式。

獲取當前元素的父節點

代碼：

element.parentNode
複製代碼

獲取當前元素的子節點

代碼：

element.chlidren
複製代碼

獲取當前元素的同級元素

代碼：

element.nextElementSibling

element.previousElementSibling
複製代碼

獲取當前元素的文本

代碼：

element.innerHTML

element.innerText
複製代碼

獲取當前節點的節點類型

代碼：

node.nodeType
複製代碼

BOM對象

BOM對象，稱為內置對象，是瀏覽器對象模型，也是JavaScript的重要組成部分。
window-》document,location,navigator,screen,history
window對象表示瀏覽器窗口
window.innerHeight獲取瀏覽器窗口的內部高度,window.innerWidth獲取瀏覽器窗口的內部寬度。
document.documentElement.clientHeight，document.documentElement.clientWidth

手把手教你深入鞏固JavaScript知識體系【思維導圖】

前言

JavaScript基礎語法

變量聲明

數據類型

字面量

全局變量

注釋

變量作用域

函數聲明有兩種方式

常量

JavaScript的變量

類型判斷

類型轉換

運算符

分支循環

遍歷

數組

數組定義

數組操作

forEach()

filter()

map()

拓展運算符

fill()

entries(),keys(),values()

includes()

flat(),flatMap()

Array.prototype.reduce()

字符串對象屬性

字符串對象方法

字符串搜索

字符串截取

JS事件三個階段

事件委託

鍵盤事件

滑鼠拖拽效果

滑鼠事件

窗口事件

事件介紹

JavaScript內置對象

DOM對象

DOM操作

BOM對象