JavaScript的字串、陣列以及DOM操作總結
（一）JavaScript字串操作
JavaScript的字串就是用' '或" "括起來的字元表示，日常的學習中有時候需要對字串進行相關的操作。例如要獲取字串某個指定位置的字元，須使用類似Array陣列的下標操作，索引號從0開始：
var str='Hello World!' alert(str[0] ) //'H' alert(str[6] ) //'W' alert(str[12] ) //索引超出字串的範圍，但不會報錯，一律返回undefined
JavaScript為字串提供了一些常用方法，呼叫這些方法不會改變原有字串的內容，但是會返回一個新的字串。以下為字串操作常用的四種方法：
toUpperCase() 把一個字串全部變為大寫：
var str='Hello World!'; str.toUpperCase() //返回hello world!
toLowerCase() 把一個字串全部變為小寫：
var str='Hello World!'； str.toLowerCase() //返回hello world！
indexOf() 會搜尋指定字串出現的位置：
var str='Hello World！'; str.indexOf('ello'); //返回1 str.indexOf(' '); //返回5 str.indexOf('World'); //返回6 str.indexOf('world'); //沒有找到指定字串，返回-1
substring() 會返回指定索引區間的子串：
var str='Hello World！'; str.substring(0, 5); //返回"Hello" str.substring(2, 8); //返回"llo Wo" str.substring(-1); //返回"Hello World！" str.substring(-6); //返回"Hello World！"
（二）JavaScript陣列操作
JavaScript的陣列Array可以包含任何資料型別，並通過索引來訪問每個元素。例如要獲得陣列Array的長度，可以直接訪問陣列Array的length屬性：
var arr=[1,'true',3,4,'false']; arr.length; //返回5
若直接給陣列Array的length賦予一個新的值會導致陣列Array大小的變化：
var arr=[1,'true',3,4,'false']; arr.length=7; alert(arr); //返回[1,true,3,4,false,,] arr.length=3; alert(arr); //返回[1,true,3]
若陣列Array通過索引把對應的元素修改成新的值（包括索引超過了範圍），陣列Array也會發生變化：
var arr=[1,'true',3,4,'false']; arr[1] = 99; alert(arr); //arr變為[1, 99, 3,4, 'false'] arr[4] = true; alert(arr); //arr變為[1,'true',3,4,'true']
與字串一樣，JavaScript也為陣列操作提供了一些函式方法。
indexOf() 與String的類似，搜尋一個指定的元素的位置：
var arr = [1, 6, 'hello', null]; arr.indexOf(null); //返回3 arr.indexOf(6); //返回1 arr.indexOf('6'); //沒有找到元素'6'，返回-1
slice() 對應String的substring() ，擷取陣列Array部分元素，返回一個新的陣列Array：
var arr = [1, 6, 'hello', null]; arr.slice(0, 2); //返回[1, 6] arr.slice(3); //返回[null] arr.slice(); //返回[1, 6, 'hello', null]
push() 往陣列Array的末尾新增若干元素，pop() 則把陣列Array的最後一個元素刪除掉：
var arr = [1, 6, 'hello', null]; arr.push(99, 'A'); arr; //arr變為[1, 6, 'hello, null, 99, 'A'] arr.pop(); arr; //arr變為[1, 6, 'hello, null, 99]
unshift() 往陣列Array的頭部新增若干元素，shift() 則把陣列Array的第一個元素刪掉：
var arr = [1, 6, 'hello', null]; arr.unshift(99, 'A'); arr; //arr變為[99, 'A', 1, 6, 'hello, null] arr.shift(); arr; //arr變為['A', 1, 6, 'hello, null]
sort() 是對陣列Array的當前元素進行排序，而reverse() 則是顛倒陣列Array中元素的順序：
var arr=[1, 'C', 'A', 9]； arr.sort(); //返回[1, 9, "A", "C"] arr.reverse(); //返回["C", "A", 9, 1]
splice() 方法是修改陣列Array的“萬能方法”，它可以從指定的索引開始刪除若干元素，然後再從該位置新增若干元素：
var arr = [1, 6, 'hello', null]; //從索引1開始刪除2個元素，然後再新增2個元素 arr.splice(1, 2, 'A', 99); //返回刪除的2個元素[6, 'hello'] arr; //arr變為[1, 'A', 99, null] arr.splice(2, 1); //返回從索引2開始刪除的1個元素[99] arr; //arr變為[1, 'A', null]
（三）JavaScript Dom基本操作
DOM（Document Object Model），即文件物件模型，是針對HTML和XML文件的一個API（應用程式程式設計介面）。DOM描繪了一個層次化的節點樹，它允許開發人員新增、移除和修改頁面的某一部分。當我們建立了一個網頁並把它載入到Web瀏覽器上，DOM就在幕後悄然而生，因為它把你所編寫的網頁文件轉換為一個文件物件。
我們可以這麼理解DOM，把DOM看做一棵節點樹，主要由元素節點、屬性節點、文字節點三種節點構成。例如下方的一行HTML程式碼，
<p title="reminder">Hello JavaScript</p>
其中 p 為元素節點，title="reminder" 為屬性節點，Hello JavaScript 為文字節點。
HTML文件中每一個元素節點都是一個物件，其中3個獲取特定元素的方法分別是： getElementById、getElementsByTagName 和 getElementsByClassName 方法。當我們得到需要的元素後，就可以獲取它的各個屬性，getAttribute 方法就是用來做這件事的，而 setAttribute 方法則用來更改屬性節點的值。
例如下方的HTML文件，對其進行JavaScript的 DOM 的5種基本方法操作，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mobile phone</title>
<style type="text/css">
body {
color: white;
background-color: black;
}
p {
color: yellow;
font-family: "arial", sans-serif;
font-size: 1.2em;
}
#purchases {
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}
#purchase li {
font-weight: bold;
}
</style>
</head>
<body>
<h1>What to buy</h1>
<p title="reminder">Never Settle !!!</p>
<ul id="purchases">
<li>HUAWEI</li>
<li class="sale">OPPO & vivo</li>
<li class="sale important">mi</li>
</ul>
</body>
</html>
getElementById 方法，返回那個給定 id 屬性值的元素節點對應的物件：
1 <script> 2 alert(typeof document.getElementById("purchases")); //彈出的對話方塊顯示object 3 </script>
getElementsByTagName 方法，返回一個物件陣列，每個物件對應著文件裡給定標籤的一個元素：
1 <script> 2 var items = document.getElementsByTagName("li"); 3 for(var i = 0; i<items.length; i++){ 4 alert(typeof items[i]); //彈出的對話方塊顯示object，重複3次 5 } 6 </script>
getElementsByClassName 方法，返回一個物件陣列，每個物件對應著文件裡給定類名的一個元素：
1 <script> 2 var shopping = document.getElementById("purchases"); 3 var sales = shopping.getElementsByClassName("sale"); 4 alert(sales.length); //彈出的對話方塊顯示2 5 </script>
getAttribute 方法，獲取元素節點的各個屬性：
1 <script> 2 var paras = document.getElementsByTagName("p") 3 for(var i = 0; i<paras.length; i++){ 4 alert(paras[i].getAttribute("title")); //彈出的對話方塊顯示reminder 5 } 6 </script>
setAttribute 方法，對屬性節點的值做出修改：
1 <script> 2 var shopping = document.getElementById("purchases"); 3 alert(shopping.getAttribute("title")); //彈出的對話方塊顯示null(空的值) 4 shopping.setAttribute("title", "a list of goods"); 5 alert(shopping.getAttribute("title")); //彈出的對話方塊顯示a list of goods 6 </script>