Java Web(1)-JavaScript_ZenDei技術網路在線

一、JavaScript 和 html 代碼的結合方式 1. 第一種方式只需要在 head 標簽中，或者在 body 標簽中，使用 script 標簽來書寫 JavaScript 代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

一、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>