1. 程式人生 > >JavaScript的字串、陣列以及DOM操作總結

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>