JavaScript的字串、陣列以及DOM操作總結

DownToEarth發表於2018-12-30
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>

 

相關文章