（一）JavaScript字元串操作 JavaScript的字元串就是用' '或" "括起來的字元表示，日常的學習中有時候需要對字元串進行相關的操作。例如要獲取字元串某個指定位置的字元，須使用類似Array數組的下標操作，索引號從0開始： JavaScript為字元串提供了一些常用方法，調用這些方法 ...
（一）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>
