Java Web(1)-JavaScript

阿新 • • 發佈：2020-07-22

一、JavaScript 和 html 程式碼的結合方式

1. 第一種方式

只需要在 head 標籤中，或者在 body 標籤中，使用 script 標籤來書寫 JavaScript 程式碼

<!DOCTYPE html> 
<html lang="en"> 
    <head> <meta charset="UTF-8">
	<title>Title</title> 
        <script type="text/javascript"> 
            // alert 是 JavaScript 語 言 提 供 的 一 個 警 告 框 函 數 。 
            // 它 可 以 接 收 任 意 類 型 的 參 數 ， 這 個 參 數 就 是 警 告 框 的 提 示 信 息 alert("hello javaScript!"); 
        </script> 
    </head> 
 <body>
</body>
</html>

2. 第二種方式

使用 script 標籤引入單獨的 JavaScript 程式碼檔案

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <!- 現在需要使用 script 引入外部的 js 檔案來執行 src 屬性專門用來引入 js 檔案路徑（可以是相對路徑，也可以是絕對路徑）

script 標籤可以用來定義 js 程式碼，也可以用來引入 js 檔案 但是，兩個功能二選一使用。不能同時使用兩個功能

--> <script type="text/javascript" src="1.js">
        </script>
    <script type="text/javascript">

		alert("國哥現在可以帥了"); 
     </script> </head> <body>

</body>
</html>

二、變數

什麼是變數？變數是可以存放某些值的記憶體的命名。
JavaScript 的變數型別：

數值型別： number
字串型別： string
物件型別： object
布林型別： boolean
函式型別： function

JavaScript 裡特殊的值： undefined 未定義，所有 js 變數未賦於初始值的時候，預設值都是 undefined. null 空值 NaN 全稱是：NotaNumber。非數字。非數值

JS 中的定義變數格式： var 變數名; var 變數名 = 值;

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript"> 
            var i; 
            // alert(i); 
            // undefined i = 12; 
            // typeof() 是 JavaScript 語 言 提 供 的 一 個 函 數 。 
            // alert( typeof(i) ); // number
			i = "abc"; 
            // 它 可 以 取 變 量 的 數 據 類 型 返 回 // alert( typeof(i) ); 
            // String
			var a = 12; var b = "abc";
		alert( a * b ); // NaN是 非 數 字 ， 非 數 值 。
            
</script>  
</head> 
<body>
</body>
</html>

三、常見運算

1. 關係（比較）運算

等於： == 等於是簡單的做字面值的比較
全等於： === 除了做字面值的比較之外，還會比較兩個變數的資料型別

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript">
		var a = "12"; 
         var b = 12;
		alert( a == b ); // true 
        alert( a === b ); // false
</script> </head> <body>
</body> </html>

2. 邏輯運算

且運算： &&、
或運算：|| 、
取反運算： !

在 JavaScript 語言中，所有的變數，都可以做為一個 boolean 型別的變數去使用。
0 、null、 undefined、””(空串) 都認為是 false；
注意：

&& 且運算。有兩種情況：第一種：當表示式全為真的時候。返回最後一個表示式的值。第二種：當表示式中，有一個為假的時候。返回第一個為假的表示式的值
|| 或運算第一種情況：當表示式全為假時，返回最後一個表示式的值第二種情況：只要有一個表示式為真。就會把回第一個為真的表示式的值
並且 && 與運算和 ||或運算有短路。短路就是說，當這個&&或||運算有結果了之後。後面的表示式不再執行 */

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript">
		 var a = 0; 
             if (a) { 
            	alert(" 零 為 真 "); 
           	 } else {
				alert(" 零 為 假 "); 
             }
		var b = null; 
             if (b) { 
                 alert("null為 真 ");
			 } else { 
             alert("null為 假 ");
			 }
 		var c = undefined;  
            if (c) {  
                alert("undefined為 真 ");
			} else { 
                alert("undefined為 假 ");
			}
		var d = ""; 
            if (d) {  
                alert(" 空 串 為 真 "); 
            } else { 
                alert(" 空 串 為 假 ");  
            }

			var a = "abc"; 
            var b = true; 
            var d = false; 
            var c = null;
			alert( a && b );//true 
            alert( b && a );//true
            alert( a && d ); // false 
            alert( a && c ); // null
            
		   alert( d || c ); // null 
            alert( c|| d ); //false
		   alert( a || c ); //abc 
            alert( b || c ); //true
	</script> 
</head> 
	<body>
	</body> 
</html>

四、陣列

1. 陣列定義方式

var 陣列名 =[]; //空陣列
var 陣列名 =[1,’abc’,true]; // 定義陣列同時賦值元素

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript">
		var arr = [true,1]; //定 義 數 組 
         // alert( arr.length ); // 2
		arr[0] = 12; 
         // alert( arr[0] );//12 
        
// javaScript語 言 中 的 數 組 ， 只 要 我 們 通 過 數 組 下 標 賦 值 ， 那 麼 最 大 的 下 標 值 ， 就 會 自 動 的 給 數 組 做 擴 容 操 作 。 
            arr[2] = "abc"; 
            alert(arr.length); //3
			// alert(arr[1]);// undefined 
            // 數 組 的 遍 歷 
            for (var i = 0; i < arr.length; i++){ 
                alert(arr[i]); 
            }
</script> </head>
<body>
</body> </html>

五、函式

函式的二種定義方式

1. 第一種定義方式

可以使用 function 關鍵字來定義函式

function 函式名(形參列表){

函式體

}
在 JavaScript 語言中，如何定義帶有返回值的函式？只需要在函式體內直接使用 return 語句返回值即可！

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript"> 
            // 定 義 一 個 無 參 函 數 
            function fun(){ 
                alert("無參函式 fun()被呼叫了");
            } 
            // 函 數 調 用 === 才 會 執 行
            fun();
            
		   function fun2(a ,b) { 
               alert("有參函式 fun2()被呼叫了 a=>" + a + ",b=>"+b); 
           }
		   fun2(12,"abc");
            
		//定 義 帶 有 返 回 值 的 函 數
		function sum(num1,num2) { 
            var result = num1 + num2; 
            return result; 
        }
		alert( sum(100,50) );
</script> </head> <body>
</body> </html>

2. 第二種定義方式

var 函式名 =function(形參列表){

函式體

}

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript"> 
            var fun = function () { 
                alert("無參函式");
            }  
            fun();

            var fun2 = function (a,b) { 
                alert("有參函式 a=" + a + ",b=" + b); 
            } 
            fun2(1,2);
            
		    var fun3 = function (num1,num2) { 
                return num1 + num2; 
            }
			alert( fun3(100,200) ); 
        </script>
</head> 
    <body>
	</body> 
</html>

注意：在 Java 中函式允許過載。但是在 JS 中函式的過載會直接覆蓋掉上一次的定義

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript">
		function fun() { 
            alert("無參函式 fun()"); 
        }
		function fun(a,b) { 
            alert("有參函式 fun(a,b)"); 
        }
            
		fun();
	</script> 
</head> 
    <body>
	</body> 
</html>

3. 函式的 arguments 隱形引數

只在 function 函式內,就是在 function 函式中不需要定義，但卻可以直接用來獲取所有引數的變數。我們管它叫隱形引數

隱形引數特別像 java 基礎的可變長引數一樣。

public void fun(Object...args); ,可變長引數其他是一個數組

那麼 js 中的隱形引數也跟 java 的可變長引數一樣,操作類似陣列

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript"> 
            function fun(a) { 
                alert( arguments.length );// 可 看 參 數 個 數
			   alert( arguments[0] ); 
                alert( arguments[1] ); 
                alert( arguments[2] );
			   alert("a = " + a);
                
			   for (var i = 0; i < arguments.length; i++){ 
                   alert( arguments[i] ); 
               }
			alert("無參函式 fun()");
		} 
            fun(1,"ad",true);
//需 求 ： 要 求 編 寫 一 個 函 數 。 用 於 計 算 所 有 參 數 相 加 的 和 並 返 回 
            function sum(num1,num2) { 
                var result = 0; 
                for (var i = 0; i < arguments.length; i++) {
                    if (typeof(arguments[i]) == "number") { 
                        result += arguments[i]; } 
                	} 
                	return result; 
            	}
			alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
	</script> 
</head> 
 <body>
</body> 
</html>

六、JS 中的自定義物件

1. Object 形式的自定義物件

物件的定義：

var 變數名 =newObject(); // 物件例項（空物件）

變數名.屬性名 = 值; // 定義一個屬性

變數名.函式名 =function(){} // 定義一個函式

物件的訪問：

變數名.屬性 / 函式名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var obj = new Object();
        obj.name = "馬達";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名：" + this.name + " , 年齡：" + this.age);
        }

        // 物件的訪問
        // alert(obj.name);
        obj.fun();
    </script>
</head>
<body>
</body>
</html>

2. {}花括號形式的自定義物件

物件的定義：

var 變數名 ={ // 空物件

屬性名：值, // 定義一個屬性

函式名：function(){} // 定義一個函式

};

物件的訪問：

變數名.屬性 / 函式名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var obj = {
            name: "馬達",
            age: 18,
            fun: function () {
                alert("姓名：" + this.name + " , 年齡：" + this.age);
            }
        };

        // alert(obj.name);
        obj.fun();
    </script>
</head>
<body>
</body>
</html>

七、JS中的事件

什麼是事件？事件是電腦輸入裝置與頁面進行互動的響應，稱之為事件

1. 常用的事件

onload 載入完成事件：頁面載入完成之後，常用於做頁面 js 程式碼初始化操作
onclick 單擊事件：常用於按鈕的點選響應操作
onblur失去焦點事件：常用用於輸入框失去焦點後驗證其輸入內容是否合法
onchange內容發生改變事件：常用於下拉列表和輸入框內容發生改變後操作
onsubmit 表單提交事件：常用於表單提交前，驗證所有表單項是否合法

事件的註冊又分為靜態註冊和動態註冊兩種

什麼是事件的註冊（繫結）？

其實就是告訴瀏覽器，當事件響應後要執行哪些操作程式碼，叫事件註冊或事件繫結。

2. 靜態註冊事件

通過 html 標籤的事件屬性直接賦於事件響應後的程式碼，這種方式我們叫靜態註冊

3. 動態註冊事件

是指先通過 js 程式碼得到標籤的 dom 物件，然後再通過 dom物件.事件名 =function(){} 這種形式賦於事件
響應後的程式碼，叫動態註冊

動態註冊基本步驟：

獲取標籤物件
標籤物件.事件名 =fucntion(){}

4. onload 載入完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // function onLoadFun() {
        //     alert("靜態註冊onload事件");
        // }

        
        // 這個是動態註冊，固定的寫法
        window.onload = function () {
            alert("動態註冊onload事件");
        }


    </script>
</head>

<!--靜態註冊onload事件，這個事件是在瀏覽器解析完頁面之後自動觸發的事件，裡面自定義的函式
<body onload="onLoadFun()">

-->

</body>
</html>

5. onclick 單擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // function onclickFun() {
        //     alert("靜態註冊onclick事件");
        // }

        // 動態註冊
        window.onload = function () {
            // 1. 獲取標籤物件
            // document是JS語言提供的一個物件
            // 通過屬性的id來獲取標籤物件
            var b = document.getElementById("b01");
            // alert(b);
            
            // 2. 通過標籤物件.事件名 =  function (){}
            b.onclick = function () {
                alert("動態註冊onclick事件");
            }
        }
        
    </script>
</head>
<body>

<!-- 靜態註冊onclick-->
    <button onclick="onclickFun();">按鈕1</button>
    <button id="b01">按鈕2</button>
</body>
</html>

6. onblur失去焦點事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 靜 態 注 冊 失 去 焦 點 事 件
        function onblurFun() {
            // console 是 控 制 臺 對 象 ， 是 由 JavaScript語 言 提 供 ， 專 門 用 來 向 瀏 覽 器 的 控 制 器 打 印 輸 出 ， 用 於 測 試 使 用
            // log()
            console.log("靜態註冊失去焦點事件");
        }


        // 動態註冊
        window.onload = function () {
            //1 獲 取 標 籤 對 象
            var passwordObj = document.getElementById("password");
            // alert(passwordObj);
            // 2 通 過 標 籤 對 象 . 事 件 名 = function(){};
            passwordObj.onblur = function () {
                console.log("動態註冊失去焦點事件");
            }
        }
    </script>
</head>
<body>
    使用者名稱:<input type="text" onblur="onblurFun();"><br/>
    密碼:<input id="password" type="text"><br/>
</body>
</html>

7. onchange內容發生改變事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("電影改變");
        }

        window.onload = function () {
            var sObj = document.getElementById("s01");
            sObj.onchange = function () {
                alert("書籍已經改變");
            }
        }

    </script>
</head>
<body>

    <!--靜態註冊事件-->
    請選擇你喜歡看的電影
    <select onchange="onchangeFun();">
        <option>--電影--</option>
        <option>盜墓筆記</option>
        <option>黑客帝國</option>
        <option>千與千尋</option>
    </select>

    <br>
    請選擇你喜歡看的書籍
    <select id="s01">
        <option>--書籍--</option>
        <option>平凡的世界</option>
        <option>小王子</option>
        <option>解憂雜貨店</option>
    </select>

</body>
</html>

8. onsubmit 表單提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 靜態登錄檔單提交事務
        function onsubmitFun() {
            alert("提交不合法");

            return false;
        }

        // 動態登錄檔單提交事務
        window.onload = function () {
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function () {
                alert("動態註冊提交不合法");
                return false;
            }
        }

    </script>
</head>
<body>
    <!--return false    可 以 阻 止 表 單 提 交-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="靜態註冊"/>
    </form>

    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="動態註冊"/>
    </form>

</body>
</html>

八、DOM模型

DOM 全稱是 DocumentObjectModel 文件物件模型
就是把文件中的標籤，屬性，文字，轉換成為物件來管理。那麼它們是如何實現把標籤，屬性，文字轉換成為物件來管理呢

1. Document 物件

Document 物件的理解：

Document 它管理了所有的 HTML 文件內容
document 它是一種樹結構的文件，有層級關係
它讓我們把所有的標籤都物件化
我們可以通過 document 訪問所有的標籤物件

2. Document 物件中的方法介紹

document.getElementById(elementId) 通過標籤的 id 屬性查詢標籤 dom 物件，elementId 是標籤的 id 屬性值
document.getElementsByName(elementName) 通過標籤的 name 屬性查詢標籤 dom 物件，elementName 標籤的 name 屬性值
document.getElementsByTagName(tagname) 通過標籤名查詢標籤 dom 物件。tagname 是標籤名
document.createElement( tagName) 方法，通過給定的標籤名，建立一個標籤物件。tagName 是要建立的標籤名

注意：

document 物件的三個查詢方法，如果有 id 屬性，

優先使用 getElementById 方法來進行查詢如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢如果 id 屬性和 name 屬性都沒有最後再按標籤名查 getElementsByTagName
以上三個方法，一定要在頁面載入完成之後執行，才能查詢到標籤物件

3. getElementById 方法

需求：當用戶點選了校驗按鈕，要獲取輸出框中的內容。然後驗證其是否合法。

驗證的規則是：必須由字母、數字、下劃線組成。並且長度是 5 到 12 位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        
        function onClick() {
            // 1 當我們要 操 作 一 個 標 籤 的 時 候 ， 一 定 要 先 獲 取 這 個 標 籤 對 象 。
            var usernameObj = document.getElementById("username");
            // [object HTMLInputElement] 就是dom物件
            var usernameText = usernameObj.value;

            //如 何 驗 證 字 符 串 ， 符 合 某 個 規 則 ， 需 要 使 用 正 則 表 達 式 技 術
            var patt =  /^\w{5,12}$/;
            /*
             test() 方 法 用 於 測 試 某 個 字 符 串 ， 是 不 是 匹 配 我 的 規 則 ，
             匹配就返回true，否則返回false
             */

            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML表 示 起 始 標 籤 和 結 束 標 籤 中 的 內 容
            // innerHTML 這個屬性可讀，可寫
            usernameSpanObj.innerHTML = "你好！";

            if (patt.test(usernameText)) {
                alert("使用者名稱合法");
                usernameSpanObj.innerHTML = "使用者名稱合法！";
            }else{
                alert("使用者名稱不合法");
                usernameSpanObj.innerHTML = "使用者名稱不合法！";
            }
        }
    </script>
</head>
<body>
    使用者名稱：<input type="text" id="username" value="md">
    <span id="usernameSpan" style="color: red;">
        
    </span>

    <button onclick="onClick()">校驗</button>
</body>
</html>

4. getElementsByName 方法

讓所有復選框都選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

        function checkAll() {
            // document.getElementsByName("hobby"),是根據指定的name來查詢返回多個標籤物件集合
            // 這個集合的操作和陣列一樣，集合中每個元素都是dom物件
            // 這個集合中元素的順序是按照html頁面的上下順序
            var hobbies = document.getElementsByName("hobby");
            // checked表示複選框的選中狀態，選中是true
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }
        }

        // 全不選
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }

        // 反選
        // 這裡用的取反操作
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>

    興趣愛好：
    <input type="checkbox" name="hobby" value="c" checked="checked"> C
    <input type="checkbox" name="hobby" value="java"> Java
    <input type="checkbox" name="hobby" value="python"> Python

    <br>

    <button onclick="checkAll()">全選</button>
    <button onclick="checkNo()">全部選</button>
    <button onclick="checkReverse()">反選</button>

</body>
</html>

5. getElementsByTagName 方法

也是全選操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

        function checkAll() {
            // document.getElementsByTagName("input"),
            // 是根據指定標籤名來查詢返回多個標籤物件集合
            // 這個集合的操作和陣列一樣，集合中每個元素都是dom物件
            // 這個集合中元素的順序是按照html頁面的上下順序
            var hobbies = document.getElementsByTagName("input");

            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }
        }


    </script>
</head>
<body>

    興趣愛好：
    <input type="checkbox" name="hobby" value="c" checked="checked"> C
    <input type="checkbox" name="hobby" value="java"> Java
    <input type="checkbox" name="hobby" value="python"> Python

    <br>

    <button onclick="checkAll()">全選</button>


</body>
</html>

6. createElement 方法

使用js程式碼來建立html標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        window.onload = function () {
            // 在記憶體中有<div> </div>
            var divObj = document.createElement("div");

            // 有一個文字節點物件 你好，山丘
            var textNodeObj = document.createTextNode("你好，山丘");

            // <div>你好，山丘 </div>
            divObj.appendChild(textNodeObj);

            // 新增子元素，在body裡
            document.body.appendChild(divObj);
        }

    </script>
</head>
<body>

</body>
</html>

7. 節點常用的屬性和方法

方法：

通過具體的元素節點呼叫 getElementsByTagName() 方法，獲取當前節點的指定標籤名孩子節點
appendChild(ChildNode) 方法，可以新增一個子節點，ChildNode 是要新增的孩子節點

屬性：

childNodes 屬性，獲取當前節點的所有子節點
firstChild 屬性，獲取當前節點的第一個子節點，會匹配換行和空格資訊，使用firstElementChild 則不會匹配換行和空格資訊，其他的類似
lastChild 屬性，獲取當前節點的最後一個子節點
parentNode 屬性，獲取當前節點的父節點
nextSibling 屬性，獲取當前節點的下一個節點
previousSibling 屬性，獲取當前節點的上一個節點，previousElementSibling這個不包括換行和空格
className 用於獲取或設定標籤的 class 屬性值
innerHTML 屬性，表示獲取/設定起始標籤和結束標籤中的內容
innerText 屬性，表示獲取/設定起始標籤和結束標籤中的文字

8. DOM練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

        window.onload = function () {
            // 1. 查詢#bj節點
            document.getElementById("b01").onclick = function () {
                var bjObj = document.getElementById("bj");
                alert(bjObj.innerHTML);
            };

            // 2. 查詢所有 li 節點
            var but02Ele = document.getElementById("b02");
            but02Ele.onclick = function () {
                var lis = document.getElementsByTagName("li");
                alert(lis.length);
            };
            // 3. 查詢 name=gender 的所有節點
            var but03Ele = document.getElementById("b03");
            but03Ele.onclick = function () {
                var genders = document.getElementsByName("gender");
                alert(genders.length);
            };



            // 4. 查詢#city 下所有 li 節點
            var but04Ele = document.getElementById("b04");
            but04Ele.onclick = function () {
               var lis = document.getElementById("city").getElementsByTagName("li");
               alert(lis.length);
            };

            // 5. 返回#city 的所有子節點
            var but05Ele = document.getElementById("b05");
            but05Ele.onclick = function () {
               var obj = document.getElementById("city").childNodes;
               console.log(obj.length);
               for (var i = 0; i < obj.length; i++){
                   console.log(obj[i]);
               }
            };

            // 6. 返回#phone 的第一個子節點
            var but06Ele = document.getElementById("b06");
            but06Ele.onclick = function () {
                var objphone = document.getElementById("phone").firstElementChild;
                alert(objphone.innerHTML);

            };

            // 7. 返回#bj 的父節點
            var but07Ele = document.getElementById("b07");
            but07Ele.onclick = function () {
                var objbj = document.getElementById("bj").parentNode;
                alert(objbj.innerHTML);
            };

            // 8. 返回#ML 的前一個兄弟節點
            var but08Ele = document.getElementById("b08");
            but08Ele.onclick = function () {
                alert(document.getElementById("ML").previousElementSibling.innerHTML);
            };

            // 9. 返回#username 的 value 屬性值
            var but09Ele = document.getElementById("b09");
            but09Ele.onclick = function () {
                alert(document.getElementById("username").value);
            };

            // 10. 設定#username 的 value 屬性值
            var but10Ele = document.getElementById("b10");
            but10Ele.onclick = function () {
                document.getElementById("username").value = "山丘";
            };

            // 11. 返回#city 的文字值
            var but11Ele = document.getElementById("b11");
            but11Ele.onclick = function () {
                alert(document.getElementById("city").innerText);
            };
        };

    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜歡那個城市？
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>南京</li>
                <li>東京</li>
                <li>上海</li>
            </ul>

            <br>

            <p>
                你喜歡那款遊戲？
            </p>

            <ul id="game">
                <li id="wz">王者榮耀</li>
                <li>飛車</li>
                <li>聯盟</li>
                <li>DNF</li>
            </ul>

            <br>

            <p>
                你的手機是什麼品牌?
            </p>

            <ul id="phone">
                <li>華為</li>
                <li id="ML">小米</li>
                <li>oppo</li>
                <li>一加</li>
            </ul>
        </div>


        <div class="inner">
            gender:
            <input type="radio" name="gender" value="male">
            Male
            <input type="radio" name="gender" value="female">
            Female

            <br>
            name:
            <input type="text" name="name" id="username" value="md">
        </div>
    </div>

    <div id="btuList">
        <div><button id="b01">查詢#bj節點</button></div>
        <div><button id="b02">查詢所有 li 節點</button></div>
        <div><button id="b03">查詢 name=gender 的所有節點</button></div>
        <div><button id="b04">查詢#city 下所有 li 節點</button></div>
        <div><button id="b05">返回#city 的所有子節點</button></div>
        <div><button id="b06">返回#phone 的第一個子節點</button></div>
        <div><button id="b07">返回#bj 的父節點</button></div>
        <div><button id="b08">返回#android 的前一個兄弟節點</button></div>
        <div><button id="b09">返回#username 的 value 屬性值</button></div>
        <div><button id="b10">設定#username 的 value 屬性值</button></div>
        <div><button id="b11">返回#city 的文字值</button></div>
    </div>
</body>
</html>