第二十一章：JavaScript語言
阿新 • • 發佈：2018-10-31
作者：java_wxid
《JavaScript語言精粹》點選下載，密碼：synu
JavaScript介紹:
1.Javascript語言誕生主要是完成頁面的資料驗證。
2.它執行在客戶端，需要執行瀏覽器來解析執行JavaScript程式碼。
3.JS是Netscape網景公司的產品，最早取名為LiveScript;為了吸引更多java程式設計師。更名為javascript。
4.JS是弱型別，Java是強型別。
JavaScript特點：
1.互動性（它可以做的就是資訊的動態互動）
2.安全性（不允許直接訪問本地硬碟）
3.跨平臺性（只要是可以解釋Js的瀏覽器都可以執行，和平臺無關）
JavaScript和html程式碼的結合方式
第一種方式
只需要在head 標籤中，或者在body標籤中， 使用script 標籤 來書寫JavaScript程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- script 裡面就是js程式碼 --> <script type="text/javascript"> // alert 是 js的警告框函式 // 它可以接收任意型別的引數，你給它傳什麼，它就彈出來什麼 alert("js hello"); </script> </head> <body> </body> </html>
第二種方式
使用Script 標籤引入 單獨的JavaScript程式碼檔案
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- script標籤可以用來定義js程式碼，也可以用來引入單獨的js檔案 src屬性 設定需要引入的js的檔案路徑（相對路徑或絕對路徑） 一個script標籤只能做一件事情 。要麼用來定義js程式碼，要麼用來引入js檔案 --> <script type="text/javascript" src="1.js"></script> <script type="text/javascript"> alert(2222); </script> </head> <body> </body> </html>
變數
什麼是變數？
變數是可以存放某些值的記憶體的命名。
javaScript的變數型別：
數值型別： number int short long float double byte
字串型別： string
物件型別： object
布林型別： boolean
函式型別： function
javascript裡特殊的值：
undefined 未定義 所有未賦初始化的變數，預設值都是undefiend
null 空值
NAN not a number 非數值，非數字（做非法算術運算時，就會返回NAN）
JS中的定義變數格式：
var 變數名;
var 變數名 = 值;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var i ;
// alert(i);// undefiend
i = 12 ;
// typeof是一個函式。可以取變數的資料型別
// alert( typeof(i) );// number
i = "this is good boy!";
alert( typeof(i) );//string
</script>
</head>
<body>
</body>
</html>
關係（比較）運算
等於： ==
全等於： ===
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var a = 12;
var b = "12";
// js中的等於，只是簡單的做字面值的比較
// alert( a == b );// true
// 全等於，除了做字面值的比較之外，還會檢查兩個變數的資料型別
alert( a === b );//false
</script>
</head>
<body>
</body>
</html>
邏輯運算
且運算： &&
或運算： ||
取反運算： !
0 、null、 undefined、””(空串) 都認為是 false；
&& 與運算。
有兩種情況：
第一種：當表示式全為真的時候。返回最後一個表示式的值。
第二種：當表示式中，有一個為假的時候。返回第一個為假的表示式的值
|| 或運算
第一種情況：當表示式全為假時，返回最後一個表示式的值
第二種情況：只要有一個表示式為真。就會把回第一個為真的表示式的值
並且 && 與運算 和 ||或運算 有短路。
短路就是說，當這個&&或||運算有結果了之後 。後面的表示式不再執行
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 0 、null、 undefined、””(空串) 都認為是 false；
// 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( b && a );//abc
// alert( a && b );//true
// 第二種：當表示式中，有一個為假的時候。返回第一個為假的表示式的值
// alert( d && c ); // false
// alert( a && c ); // null
// || 或運算
// 第一種情況：當表示式全為假時，返回最後一個表示式的值
// alert( d || c ); // null
// alert( c || d ); // false
// 第二種情況：只要有一個表示式為真。就會把回第一個為真的表示式的值
// alert( b || c ); // true
// alert( d || a ); // abc
</script>
</head>
陣列
陣列定義方式
Js 中 陣列的定義：
格式：
var 陣列名 = []; // 定義一個空陣列
var 陣列名 = [ 值1，值2，值3 ]; // 定義陣列同時賦初始值
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// Js 中 陣列的定義：
// 格式：
// var 陣列名 = []; // 定義一個空陣列
var arr = [];
// alert( arr.length ); //0
arr[0] = 12; // 通過陣列下標給元素賦值
// alert( arr[0] );//12
// alert( arr.length );//1
// js的陣列在通過下載賦值的時候，會自動的根據最大下標 做擴容操作。
arr[2] = "abc";
// alert( arr.length ); //3
// alert( arr[1] ); //undefined
// 陣列的遍歷
// for (var i = 0; i < arr.length; i++) {
// alert( arr[i] );
// }
// var 陣列名 = [ 值1，值2，值3 ]; // 定義陣列同時賦初始值
var arr2 = [12,"abc",true];
// alert(arr2.length); // 3
arr2[9] = 12;
alert(arr2.length);
</script>
</head>
函式：
函式的二種定義方式
函式的第一種定義方式，使用function關鍵字進行定義函式。
格式如下：
function 函式名（形參列表）{
函式體
}
如何訪問函式：
函式名( 實參列表 );
如何定義帶有返回值的函式?
答：只需要在函式體內直接使用return語句返回值即可。
<script type="text/javascript">
// 格式如下：
// function 函式名（形參列表）{
// 函式體
// }
// 無參函式定義
// function fun(){
// alert("無參函式被呼叫了");
// }
// 有參函式
// function fun2( a , b ){
// alert("有參函式被呼叫 a=>" + a + ",b=>" + b);
// }
// 帶有返回值的函式定義
function sum( num1, num2 ){
return num1 + num2;
}
// 如何訪問函式： 函式名( 實參列表 );
// alert( sum("abc",100) );
</script>
函式的第二種定義方式是：
var 函式名 = function(引數列表){函式體}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var fun = function(num){
alert("函式第二種定義方式 : " + num);
}
fun(123);
</script>
</head>
注：在Java中函式允許過載。但是在Js中函式的過載會直接覆蓋掉上一次的定義
<script type="text/javascript">
function fun(a,b){
alert(a);
alert(b);
alert("有參函式被呼叫");
}
function fun(){
alert("無參函式被呼叫");
}
fun(12,"abc",true);
</script>
函式的 arguments 隱形引數（只在function函式內）
可變長引數：public void fun( int a , Object … args )……
args就是可變長引數
它本身是一個數組。
js中函式自帶有一個隱形引數arguments ，基本上使用跟java的可變長引數一樣。
都是用來接收任意多個引數。它的使用跟陣列一樣。
<script type="text/javascript">
function fun(a,b){
alert(a);
alert(b);
alert("有參函式被呼叫");
}
function fun(pa,pb){
alert( arguments.length );//3
alert( arguments[0] );//12
alert( arguments[1] );//abc
alert( arguments[2] );//true
alert("=====================");
alert( pa );//12
alert( pb );//abc
alert("無參函式被呼叫");
}
// fun(12,"abc",true);
//需求：現在需要有一個方法，可以計算傳遞進來的所有引數（只相加數字）相加的和並返回
function sum(){
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if ( typeof(arguments[i]) == "number" ) {
result += arguments[i];
}
}
return result;
}
alert( sum(100,"abc",100,1000) );
</script>
JS中的自定義物件（擴充套件內容）
Object形式的自定義物件
var 變數名 = new Object(); 建立一個物件例項（空）
變數名.屬性名 = 值; 給物件例項，定義了一個屬性
變數名.函式名 = function(){} 給物件例項，新增一個方法
如何訪問物件： 變數名.屬性名/方法名()
<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>
{}花括號形式的自定義物件
var 變數名 = { //定義一個空物件
屬性名 : 值, //定義了一個屬性
函式名 : function(){} // 定義一個函式
};
如何訪問物件： 變數名.屬性名/方法名()
<script type="text/javascript">
var obj = {
name:"華仔",
age:18,
fun:function(){
alert("姓名：" + this.name + ",年齡：" + this.age);
}
};
alert(obj.name);
obj.fun();
</script>
js中的事件（重要）
什麼是事件？
事件是電腦輸入裝置與頁面進行互動的響應。我們稱之為事件。
常用的事件：
onload載入完成事件 常用於頁面被瀏覽器載入完成之後自動做一些初始化工作。
onclick單擊事件 常用於按鈕被單擊之後的響應工作
onblur失去焦點事件 常用於輸入框失去焦點後，驗證其中的內容是否合法
onchange內容發生改變事件 常用於輸入框或下拉列表內容發生改變後響應
onsubmit表單提交事件 常用於表單提交，在提交之前驗證所有表單項是否合法。只要有一個不合法，就阻止表單提交。
事件的註冊又分為靜態註冊和動態註冊兩種：
註冊事件和繫結事件是一個東西
註冊事件，就是告訴瀏覽器，當事件觸發後，需要執行哪些程式碼。
靜態註冊事件：靜態註冊是指通過事件屬性直接賦於事件響應後的程式碼，這種方式我們稱之為靜態註冊。
動態註冊事件：動態註冊是指，通過先獲取標籤物件。然後再通過標籤物件.事件名 = function(){}的方式賦值，這種操作叫動態註冊。
window.onload = function(){
1 查詢標籤物件
2 通過標籤物件.事件名 = function(){}
}
onload事件示例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
alert("頁面載入完成==動態");
}
</script>
</head>
<!-- 靜態註冊
<body onload="alert('頁面載入完成！');"> -->
<body>
</body>
</html>
onclick事件示例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onclickFun(){
alert("這是單擊事件靜態註冊");
}
//動態註冊單擊事件
window.onload = function(){
// 1 查詢標籤物件
// getElementById 通過id屬性值獲取標籤物件
// get 是獲取
// Element是元素（元素就是標籤）
// by 由..通過
// id id屬性
var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通過標籤物件.事件名 = function(){}
btnObj.onclick = function(){
alert("這是動態註冊的onclick事件");
}
}
</script>
</head>
<body>
<!--
靜態註冊單擊事件：
-->
<input type="button" value="按鈕1" onclick="onclickFun();"/>
<button id="btn01">按鈕2</button>
</body>
</html>
onblur失去焦點事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onblurFun(){
// console這是js中提供的一個專門用於除錯的物件。表示控制檯
// log方法就是輸出內容。可以傳遞任意引數
console.log("這是靜態註冊onblur事件");
}
window.onload = function(){
//1 獲取標籤物件
var passObj = document.getElementById("password");
//2 通過標籤物件.事件名 = function(){}
passObj.onblur = function(){
console.log("這是動態註冊的onblur事件");
}
}
</script>
</head>
<body>
使用者名稱：<input type="text" onblur="onblurFun();"/><br/>
密碼：<input id="password" type="password" /><br/>
</body>
</html>
onchange內容發生改變事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onchangeFun(){
alert("靜態註冊onchange事件");
}
window.onload = function(){
//1 獲取標籤物件
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通過標籤物件.事件名 = function(){}
selObj.onchange = function(){
alert("動態註冊onchange事件");
}
}
</script>
</head>
<body>
請選擇你心中的女神：
<select onchange="onchangeFun();">
<option>--請選擇--</option>
<option>劉奕菲</option>
<option>迪麗熱巴</option>
<option>殺那啦</option>
</select>
<br/>
請選擇你心中的男神：
<select id="sel01">
<option>--請選擇--</option>
<option>國哥</option>
<option>龍哥</option>
<option>華仔</option>
<option>強哥</option>
</select>
</body>
</html>
onsubmit表單提交事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onsubmitFun(){
alert("開始驗證表單項，發現不合法");
return false;
}
//
window.onload = function(){
// 獲取標籤
var formObj = document.getElementById("form01");
// alert(formObj);
// 通過標籤物件.事件名=function(){}
formObj.onsubmit = function(){
alert("動態註冊==開始驗證表單項，發現不合法");
return false;
}
}
</script>
</head>
<body>
<!--
onsubmit事件，return false。就會阻止表單提交
-->
<form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
<input type="submit" value="靜態註冊"/>
</form>
<form action="http://www.baidu.com" id="form01">
<input type="submit" value="動態註冊"/>
</form>
</body>
</html>
DOM 模型
DOM 全稱是Document Object Model 文件物件模型，把文件中的標籤，屬性，文字，轉換成為物件來管理。
Document 物件的理解：
第一點：Document它管理了所有的Html文件內容。
第二點：document它是一種樹結構的文件。有層級關係。
第三點：它讓我們把所有的標籤 都 物件化
第四點：我們可以通過document訪問所有的標籤物件。
什麼是物件化？？
我們基礎班已經學過面向物件。請問什麼是物件化？
舉例：
有一個人有年齡：18歲，性別：女，名字：張某某
我們要把這個人的資訊物件化怎麼辦！
Class Person {
private int age;
private String sex;
private String name;
}
那麼 html 標籤 要 物件化 怎麼辦？
<body>
<div id="div01">div01</div>
</body>
模擬物件化，相當於：
class Dom{
private String id; // id屬性
private String tagName; //表示標籤名
private Dom parentNode; //父親
private List children; // 孩子結點
private String innerHTML; // 起始標籤和結束標籤中間的內容
}
Document物件中的方法介紹（*****重點）
1.document.getElementById(elementId)通過標籤的id屬性查詢標籤dom物件，elementId是標籤的id屬性值
2.document.getElementsByName(elementName)通過標籤的name屬性查詢標籤dom物件，elementName標籤的name屬性值
3.document.getElementsByTagName(tagname)通過標籤名查詢標籤dom物件。tagname是標籤名
4.document.createElement( tagName )方法，通過給定的標籤名，建立一個標籤物件。tagName是要建立的標籤名
如果標籤物件有id屬性，優先使用getElementById查詢標籤物件
如果標籤沒有id屬性，只有name屬性，則使用getElementsByName方法進行查詢
如果標籤即沒有id屬性，也沒有name屬性，最後才使用getElementsByTagName
getElementById和getElementsByName和getElementsByTagName都需要在頁面載入完成之後執行。才能得到標籤物件。
getElementById方法示例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 需求，當用戶點選 【驗證】 按鈕的時候，幫我驗證一下，輸入框中的內容是否合法
// 驗證的規則是：必須由字母，數字，下劃線組成，並且長度是5到12位
// 1、繫結單擊事件
function onclickFun(){
// 2 獲取輸入框中的內容
// 當我們要操作一個標籤物件的時候。一定要先獲取到這個標籤物件。
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
// 獲取用來輸出驗證結果的span標籤物件
var spanObj = document.getElementById("usernameSpan");
// innerHTML表示起始標籤和結束標籤中的內容
// 這個屬性，可讀可寫
// spanObj.innerHTML = "帥哥講的真細";
// 3 使用正則表示式去驗證
var patt = /^\w{5,12}$/;//驗證的規則是：必須由字母，數字，下劃線組成，並且長度是5到12位
// 正則物件有一個test方法。可以用來驗證一個字串是否匹配正則表示式
// 匹配就返回ture，不匹配就返回false
if (patt.test(usernameText)) {
// spanObj.innerHTML = "使用者名稱合法";
spanObj.innerHTML = "<img alt=\"\" src='right.png' width='15' height='15' />";
} else {
// spanObj.innerHTML = "使用者名稱不合法";
spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='15' height='15' />";
}
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="username" value="wzg168"/>
<span style="color: red;" id="usernameSpan"></span>
<button onclick="onclickFun()">驗證</button>
</body>
</html>
getElementsByName方法示例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 全選事件
function checkAll(){
// 當我們要操作一個標籤物件的時候。一定要先獲取到這個標籤物件。
//getElementsByName是根據name屬性查詢返回物件的集合。
//這個集合的操作跟陣列一樣
//這個集合中的元素順序剛好是它們在html頁面中，從上到下的順序
var hobbies = document.getElementsByName("hobby");
// checked屬性表示單選，複選框的選中狀態。
// 這個屬性可讀，可寫
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
// 全不選
function checkNo(){
var hobbies = document.getElementsByName("hobby");
// checked屬性表示單選，複選框的選中狀態。
// 這個屬性可讀，可寫
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
// 反選
function checkReverse(){
var hobbies = document.getElementsByName("hobby");
// checked屬性表示單選，複選框的選中狀態。
// 這個屬性可讀，可寫
for (var i = 0; i < hobbies.length; i++) {
// if (hobbies[i].checked) {
// hobbies[i].checked = false;
// } else {
// hobbies[i].checked = true;
// }
hobbies[i].checked = !hobbies[i].checked;
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
<input type="checkbox" name="hobby" value="cy"/>抽菸
<input type="checkbox" name="hobby" value="tt"/>湯頭
<br/>
<button onclick="checkAll();">全選</button>
<button onclick="checkNo();">全不選</button>
<button onclick="checkReverse();">反選</button>
</body>
</html>
getElementsByTagName方法示例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 全選事件
function checkAll(){
//getElementsByTagName是通過指定的標籤名查詢返回全部的標籤物件集合。
//這個集合的操作跟陣列一樣
//這個集合中的元素順序跟他們在html頁面中，從上到下的順序一致！
var inputObjs = document.getElementsByTagName("input");
for (var i = 0; i < inputObjs.length; i++) {
inputObjs[i].checked = true;
}
}
</script>
</head>
<body>
興趣愛好：
<input type="checkbox" checked="checked" value="hj"/>喝酒
<input type="checkbox" value="cy"/>抽菸
<input type="checkbox" value="tt"/>湯頭
<br/>
<button onclick="checkAll();">全選</button>
</body>
</html>
createElement方法示例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
// 需求：通過程式碼建立標籤：<div>帥哥棒棒噠！</div>,並新增到body標籤中去顯示
var divObj = document.createElement("div"); //<div></div>
// alert( divObj );
//divObj.innerHTML = "帥哥萌萌噠！"; //<div>帥哥萌萌噠！</div>
var textNode = document.createTextNode("帥哥萌萌噠！");
divObj.appendChild( textNode );
//appendChild給body標籤新增子元素
document.body.appendChild( divObj );
}
</script>
</head>
<body>
</body>
</html>
節點的常用屬性和方法
所謂 節點 ，就是前面講的標籤物件。
方法：
通過具體的元素節點呼叫
getElementsByTagName()
方法，獲取當前節點的指定標籤名孩子節點
appendChild( oChildNode )
方法，可以新增一個子節點，oChildNode是要新增的孩子節點
屬性：
childNodes屬性，獲取當前節點的所有子節點
firstChild屬性，獲取當前節點的第一個子節點
lastChild屬性，獲取當前節點的最後一個子節點
parentNode屬性，獲取當前節點的父節點
nextSibling屬性，獲取當前節點的下一個節點
previousSibling屬性，獲取當前節點的上一個節點
className屬性，用於獲取或設定標籤的class屬性值
innerHTML 屬性，表示獲取/設定起始標籤和結束標籤中的內容
innerText屬性，表示獲取/設定起始標籤和結束標籤中的文字
練習：05.DOM查詢練習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查詢</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查詢#bj節點
document.getElementById("btn01").onclick = function(){
alert( document.getElementById("bj").innerHTML );
}
//2.查詢所有li節點
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
alert( document.getElementsByTagName("li").length );
};
//3.查詢name=gender的所有節點
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
alert( document.getElementsByName("gender").length );
};
//4.查詢#city下所有li節點
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1 先查詢id為city的標籤
//2 再查詢city的li子元素
alert( document.getElementById("city").getElementsByTagName("li").length );
};
//5.返回#city的所有子節點
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
//1 先查詢id為city
alert( document.getElementById("city").childNodes.length );
//2 再通過city物件。獲取所有子節點
};
//6.返回#phone的第一個子節點
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
//1 先查詢id為phone的標籤物件
alert( document.getElementById("phone").firstChild.innerHTML );
//2 再根據phone標籤物件，查詢第一個子節點
};
//7.返回#bj的父節點
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1先查詢id為bj的節點
alert( document.getElementById("bj").parentNode.innerHTML );
//2再通過bj節點找到父節點
};
//8.返回#android的前一個兄弟節點
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
alert( document.getElementById("android").previousSibling.innerHTML );
};
//9.讀取#username的value屬性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert( document.getElementById("username").value );
};
//10.設定#username的value屬性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "帥哥帥不要不要的";
};
//11.返回#bj的文字值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
// alert( document.getElementById("bj").innerText );
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>
<br>
<p>
你喜歡哪款單機遊戲?
</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br />
<br />
<p>
你手機的作業系統是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查詢#bj節點</button></div>
<div><button id="btn02">查詢所有li節點</button></div>
<div><button id="btn03">查詢name=gender的所有節點</button></div>
<div><button id="btn04">查詢#city下所有li節點</button></div>
<div><button id="btn05">返回#city的所有子節點</button></div>
<div><button id="btn06">返回#phone的第一個子節點</button></div>
<div><button id="btn07">返回#bj的父節點</button></div>
<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
<div><button id="btn09">返回#username的value屬性值</button></div>
<div><button id="btn10">設定#username的value屬性值</button></div>
<div><button id="btn11">返回#bj的文字值</button></div>
</div>
</body>
</html>
補充：點選常用的正則表示式