JavaScript之基礎(chǔ)篇

頭號碼甲 2021-10-10

展開全文

JavaScript 介紹

JavaScript語言誕生主要是完成頁面的數(shù)據(jù)驗證。因此它運行在客戶端,，需要運行瀏覽器來解析執(zhí)行JavaScript代碼,。js是Netscape網(wǎng)景公司的產(chǎn)品,，最早取名為LiveScript,，為了吸引更多Java程序員。更名為JavaScript（js是弱類型,、 java是強類型）,。

特點：

交互性（它可以做的就是信息的動態(tài)交互）
安全性（不允許直接訪問本地硬盤）
跨平臺性（只要是可以解釋js的瀏覽器都可以執(zhí)行，和平臺無關(guān)）

JavaScript 和 html 代碼的結(jié)合方式

　　第一種方式：只需要在head標簽中,，或者在body標簽中,，使用script標簽來書寫JavaScript代碼。

示例代碼：

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

　　第二種方式：使用script標簽引入單獨的JavaScript代碼文件,。　

示例代碼：

/*
 * hello.js文件中的內(nèi)容
 */
alert("hello.js");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript和html代碼的結(jié)合方式二</title>
</head>
<body>
<!-- 現(xiàn)在需要使用script引入外部的js文件來執(zhí)行,，src屬性專門用來引入js文件路徑（可以是相對路徑,，也可以是絕對路徑） 
　　script標簽可以用來定義js代碼，也可以用來引入js文件,，但是兩個功能二選一使用,，不能同時使用兩個功能。 -->
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
   alert("hello.html");
</script>
</body>
</html>

變量

什么是變量,？變量是可以存放某些值的內(nèi)存的命名,。

　　JavaScript的變量類型：

　　　　數(shù)值類型：number

　　　　字符串類型：string

　　　　對象類型：object

　　　　布爾類型：boolean

　　　　函數(shù)類型：function

　　JavaScript的特殊值：

　　　　undefined：未定義，所有js變量未賦于初始值的時候,，默認值都是undefined,。

　　　　null：空值

　　　　NaN：全稱是 Not a Number,，非數(shù)字,、非數(shù)值,。

　　Js中定義變量的三種方式：

　　　　const：定義的變量不可以修改，而且必須初始化,。

　　　　var：定義的變量可以修改,，如果不初始化會輸出undefined，不會報錯,。

　　　　let：塊級作用域,，函數(shù)內(nèi)部使用let定義后，對函數(shù)外部無影響,。

示例代碼：

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

    var i;
    alert(i); //undefined
    
    i = 12;
    //typeof()是JavaScript語言提供的一個函數(shù),。
    alert(typeof(i)); //number

    i = "abc";
    //它可以取變量的數(shù)據(jù)類型返回
    alert(typeof(i)); //String

    var a = 12;
    var b = "abc";
    alert(a * b); //NaN是非數(shù)字，非數(shù)值,。

</script>
</body>
</html>

關(guān)系（比較）運算

　　分類：

　　　　等于（==）：等于是簡單的做字面值的比較,。

　　　　全等于（===）：除了做字面值的比較之外，還會比較兩個變量的數(shù)據(jù)類型,。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關(guān)系（比較）運算</title>
</head>
<body>
<script type="text/javascript">
    var a = "12";
    var b = 12;
    alert(a==b);//true
    alert(a===b);//false
</script>
</body>
</html>

邏輯運算

　　分類：

　　　　且運算：&&

　　　　或運算：||

　　　　取反運算：!

提示：

在JavaScript語言中,，所有的變量，都可以做為一個boolean類型的變量去使用（0,、null,、undefined、""(空串)都認為是false）,。

　　&& 且運算：

　　　　第一種：當(dāng)表達式全為真的時候,，返回最后一個表達式的值。

　　　　第二種：當(dāng)表達式中,，有一個為假的時候,，返回第一個為假的表達式的值。

　　|| 或運算：

　　　　第一種情況：當(dāng)表達式全為假時,，返回最后一個表達式的值,。

　　　　第二種情況：只要有一個表達式為真。就會返回第一個為真的表達式的值,。

提示：

（ && 與運算）和（ || 或運算）有短路,。短路就是說，當(dāng)這個 && 或 || 運算有結(jié)果了之后 ,，后面的表達式不再執(zhí)行,。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邏輯運算</title>
</head>
<body>
<script type="text/javascript">

    /*
     * 在JavaScript語言中，所有的變量都可以做為一個boolean類型的變量去使用,。 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("空串為假");
    }

    /*
     * && 且運算
     * 第一種：當(dāng)表達式全為真的時候,，返回最后一個表達式的值。
     * 第二種：當(dāng)表達式中,，有一個為假的時候,，返回第一個為假的表達式的值,。
     */

    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

    /*
     * || 或運算
     * 第一種情況：當(dāng)表達式全為假時,，返回最后一個表達式的值。
     * 第二種情況：只要有一個表達式為真,，就會把回第一個為真的表達式的值。
     */
    alert( d || c ); // null
    alert( c|| d ); //false
    alert( a || c ); //abc
    alert( b || c ); //true

</script>
</body>
</html>

數(shù)組

　　js中數(shù)組的定義方式：

　　　　var 數(shù)組名 = []; //空數(shù)組

　　　　var 數(shù)組名 = [1 , 'abc' , true]; //定義數(shù)組同時賦值元素

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數(shù)組</title>
</head>
<body>
<script type="text/javascript">

    var arr = []; //定義一個空數(shù)組

    alert(arr.length); //0
    
    arr[0] = 12;

    alert(arr[0]); //12

    alert(arr.length); //0
    
    //javaScript語言中的數(shù)組,，只要我們通過數(shù)組下標賦值，那么最大的下標值,，就會自動的給數(shù)組做擴容操作。

    arr[2] = "abc";

    alert(arr.length); //3

    alert(arr[1]);//undefined

    //數(shù)組的遍歷
    for (var i = 0; i < arr.length; i++){
        alert(arr[i]);
    }

</script>
</body>
</html>

函數(shù)

　　函數(shù)的兩種定義方式：

　　　　第一種：可以使用function關(guān)鍵字來定義函數(shù),。

　　　　　　function 函數(shù)名(形參列表){

　　　　　　　　函數(shù)體

　　　　　　}

　　　　在JavaScript語言中,，如何定義帶有返回值的函數(shù)？只需要在函數(shù)體內(nèi)直接使用return語句返回值即可,！

示例代碼：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function函數(shù)</title>
</head>
<body>
<script type="text/javascript">

    //定義一個無參函數(shù)
    function fun() {
        alert("無參函數(shù)fun()被調(diào)用了...");
    }
    fun();

    //定義一個有參函數(shù)
    function fun2(a,b) {
        alert("有參函數(shù)fun2()被調(diào)用了==>a="+a +";b="+b);
    }
    fun2(12,"abc");

    //定義帶有返回值的函數(shù)
    function sum(num1, num2) {
        var result = num1 + num2;
        return result;
    }
    alert(sum(100,50));

</script>
</body>
</html>

　第二種：

　　　　　var 函數(shù)名 = function(形參列表) {

　　　　　　　函數(shù)體

　　　　　}

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function函數(shù)</title>
</head>
<body>
<script type="text/javascript">

    var fun = function () {
        alert("無參函數(shù)");
    }
    fun();

    var fun2 = function (a, b) {
        alert("有參函數(shù)==>a="+a+";b="+b);
    }
    fun2(1, 2);

    var fun3 = function (num1, num2) {
        return num1 + num2;
    }
    alert(fun3(100,200));

</script>
</body>
</html>

提示：

在Java中函數(shù)允許重載,。但是在JS中函數(shù)的重載會直接覆蓋掉上一次的定義。

示例代碼：

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

    fun();

</script>
</body>
</html>

　　函數(shù)的 arguments 隱形參數(shù)（只在 function 函數(shù)內(nèi)）：

　　　　就是在function函數(shù)中不需要定義,，但卻可以直接用來獲取所有參數(shù)的變量,，我們管它叫隱形參數(shù)。　　　　

　　　　隱形參數(shù)特別像java基礎(chǔ)的可變長參數(shù)一樣,。

　　　　public void fun( Object ... args );

　　　　可變長參數(shù)其他是一個數(shù)組,。

　　　　那么js中的隱形參數(shù)也跟java的可變長參數(shù)一樣,操作類似數(shù)組。

示例代碼：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arguments隱形參數(shù)</title>
</head>
<body>
<script type="text/javascript">
    function fun(a) {

        alert(arguments.length);//可看參數(shù)個數(shù)
        alert(arguments[0]);
        alert(arguments[1]);
        alert(arguments[2]);

        alert("a = " + a);

        for (var i=0; i<arguments.length; i++){
            alert(arguments[i]);
        }

        alert("無參函數(shù) fun()");
    }

    fun(1,"ad",true);

    //需求：要求編寫一個函數(shù),，用于計算所有參數(shù)相加的和并返回
    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>
</body>
</html>

JS 中的自定義對象（擴展內(nèi)容）

　　Object形式的自定義對象：

　　　　對象的定義：

　　　　　　var 變量名 = new Object(); //對象實例（空對象）

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

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

　　　　對象的訪問：

　　　　　　變量名.屬性 / 函數(shù)名();

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object形式的自定義對象</title>
</head>
<body>
<script type="text/javascript">

    var obj = new Object();

    obj.name = "華仔";

    obj.age = 18;

    obj.fun = function () {
        alert("姓名：" + this.name + " , 年齡：" + this.age);
    }

    alert(obj.age);

    obj.fun();

</script>
</body>
</html>

　　{}花括號形式的自定義對象：

　　　　對象的定義：

　　　　　　var 變量名 = { //空對象

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

　　　　　　　　函數(shù)名：function(){} //定義一個函數(shù)

　　　　　　　};

　　對象的訪問：

　　　　變量名.屬性 / 函數(shù)名()

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{}花括號形式的自定義對象</title>
</head>
<body>
<script type="text/javascript">

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

    alert(obj.name);

    obj.fun();

</script>
</body>
</html>

Js中的事件

什么是事件,？事件是電腦輸入設(shè)備與頁面進行交互的響應(yīng)，我們稱之為事件,。

　　常用的事件：

onload加載完成事件：頁面加載完成之后,，常用于做頁面js代碼初始化操作,。

onclick單擊事件：常用于按鈕的點擊響應(yīng)操作。

onblur失去焦點事件：常用用于輸入框失去焦點后驗證其輸入內(nèi)容是否合法,。

onchange內(nèi)容發(fā)生改變事件：常用于下拉列表和輸入框內(nèi)容發(fā)生改變后操作,。

onsubmit表單提交事件：常用于表單提交前，驗證所有表單項是否合法,。

事件的注冊又分為靜態(tài)注冊和動態(tài)注冊兩種：

　　什么是事件的注冊（綁定）？

　　其實就是告訴瀏覽器,，當(dāng)事件響應(yīng)后要執(zhí)行哪些操作代碼,，叫事件注冊或事件綁定。

靜態(tài)注冊事件：

　　通過html標簽的事件屬性直接賦于事件響應(yīng)后的代碼,，這種方式我們叫靜態(tài)注冊,。

動態(tài)注冊事件：

　　是指先通過js代碼得到標簽的dom對象，然后再通過dom對象.事件名 = function(){}這種形式賦于事件響應(yīng)后的代碼,，叫動態(tài)注冊,。

　　動態(tài)注冊基本步驟：

獲取標簽對象
標簽對象.事件名 = fucntion(){}

onload加載完成事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload加載完成事件</title>
</head>
<body>
<script type="text/javascript">
    //onload事件的方法
    function onloadFun() {
        alert('靜態(tài)注冊onload事件，所有代碼');
    }
    //onload事件動態(tài)注冊,。是固定寫法
    window.onload = function () {
        alert("動態(tài)注冊的onload事件");
    }

    <!-- 靜態(tài)注冊onload事件：onload事件是瀏覽器解析完頁面之后就會自動觸發(fā)的事件 <body onload="onloadFun();"> -->
</script>
</body>
</html>

onclick單擊事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick單擊事件</title>
</head>
<body>

    <!-- 靜態(tài)注冊onClick事件-->
    <button onclick="onclickFun();">按鈕1</button>
    <button id="btn_2">按鈕2</button>

<script type="text/javascript">

    function onclickFun() {
        alert("靜態(tài)注冊onclick事件");
    }

    //動態(tài)注冊onclick事件
    window.onload = function () {
        /*
         * 獲取標簽對象
         * document：是JavaScript語言提供的一個對象（文檔）
         * get：獲取
         * Element：元素（就是標簽）
         * By：通過,。。 由,。,。經(jīng)。,。,。
         * Id：id屬性
         * getElementById：通過id屬性獲取標簽對象
         */
        var btnObj = document.getElementById("btn_2");
        alert(btnObj);
        //通過標簽對象.事件名 = function(){}
        btnObj.onclick = function () {
            alert("動態(tài)注冊的onclick事件");
        }
    }
</script>
</body>
</html>

onblur失去焦點事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur失去焦點事件</title>
</head>
<body>

    用戶名：<input type="text" onblur="onblurFun();"><br/>
    密碼：<input id="password" type="text" ><br/>

<script type="text/javascript">

    //靜態(tài)注冊失去焦點事件
    function onblurFun() {
        //console是控制臺對象，是由JavaScript語言提供,，專門用來向瀏覽器的控制器打印輸出,，用于測試使用
        //log()是打印的方法
        console.log("靜態(tài)注冊失去焦點事件");
    }

    //動態(tài)注冊onblur事件
    window.onload = function () {
        //獲取標簽對象
        var passwordObj = document.getElementById("password");
        alert(passwordObj);
        //通過標簽對象.事件名 = function(){};
        passwordObj.onblur = function () {
            console.log("動態(tài)注冊失去焦點事件");
        }
    }
</script>
</body>
</html>

onchange內(nèi)容發(fā)生改變事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange內(nèi)容發(fā)生改變事件</title>
</head>
<body>

請選擇你心中的女神：
    <!-- 靜態(tài)注冊onchange事件 -->
    <select onchange="onchangeFun();">
        <option>--女神--</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>娘娘</option>
    </select>

請選擇你心中的男神：
    <select id="sel01">
        <option>--男神--</option>
        <option>國哥</option>
        <option>華仔</option>
        <option>富城</option>
    </select>

<script type="text/javascript">

    function onchangeFun() {
        alert("女神已經(jīng)改變了");
    }

    window.onload = function () {
        //獲取標簽對象
        var selObj = document.getElementById("sel01");
        alert(selObj);
        //通過標簽對象.事件名 = function(){}
        selObj.onchange = function () {
            alert("男神已經(jīng)改變了");
        }
    }
</script>
</body>
</html>

onsubmit表單提交事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit表單提交事件</title>
</head>
<body>
    <!-- return false 可以阻止表單提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="靜態(tài)注冊"/>
    </form>

    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="動態(tài)注冊"/>
    </form>

<script type="text/javascript">

    //靜態(tài)注冊表單提交事務(wù)
    function onsubmitFun(){
        //要驗證所有表單項是否合法，如果有一個不合法就阻止表單提交
        alert("靜態(tài)注冊表單提交事件----發(fā)現(xiàn)不合法");
        return flase;
    }

    window.onload = function () {
        //獲取標簽對象
        var formObj = document.getElementById("form01");
        //通過標簽對象.事件名 = function(){}
        formObj.onsubmit = function () {
            //要驗證所有表單項是否合法,，如果有一個不合法就阻止表單提交
            alert("動態(tài)注冊表單提交事件----發(fā)現(xiàn)不合法");
            return false;
        }
    }
</script>
</body>
</html>

DOM 模型

DOM全稱是Document Object Model文檔對象模型,。

實際上就是把文檔中的標簽，屬性,，文本,，轉(zhuǎn)換成為對象來管理。

　　Document對象：

　　Document對象的理解：

　　　　第一點：Document它管理了所有的HTML文檔內(nèi)容,。

　　　　第二點：document它是一種樹結(jié)構(gòu)的文檔,，有層級關(guān)系。

　　　　第三點：它讓我們把所有的標簽都對象化,。

　　　　第四點：我們可以通過document訪問所有的標簽對象,。

　　什么是對象化？？

　　　　例子：年齡-->20 歲,，性別-->男,，名字-->張三，請將此人的信息對象化,。

示例代碼：

public class Person {
    
    private int age;
    
    private String sex;
    
    private String name;

}

　　將html標簽對象化：

　　　　<body>

　　　　</body>

模擬對象化示例代碼：

public class Dom {
    
    //id屬性
    private String id;
    
    //表示標簽名
    private String tagName;
    
    //父親
    private Dom parentNode;
    
    //孩子結(jié)點
    private List<Dom> children;
    
    //起始標簽和結(jié)束標簽中間的內(nèi)容
    private String innerHTML;

}

　　Document對象中的方法介紹：

　　　　document.getElementById(elementId);通過標簽的id屬性查找標簽dom對象,，elementId是標簽的id屬性值。

　　　　document.getElementsByName(elementName);通過標簽的name屬性查找標簽dom對象,，elementName標簽的name屬性值,。

　　　　document.getElementsByTagName(tagname);通過標簽名查找標簽dom對象，tagname是標簽名,。

　　　　document.createElement( tagName);通過給定的標簽名,，創(chuàng)建一個標簽對象，tagName是要創(chuàng)建的標簽名,。

提示：

document對象的三個查詢方法,，如果有id屬性，優(yōu)先使用getElementById方法來進行查詢,。

如果沒有id屬性,，則優(yōu)先使用getElementsByName方法來進行查詢。

如果id屬性和name屬性都沒有,，最后再按標簽名getElementsByTagName來進行查詢,。　　

以上三個方法，一定要在頁面加載完成之后執(zhí)行,，才能查詢到標簽對象,。

getElementById方法示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById方法示例代碼</title>
</head>
<body>
    用戶名：<input type="text" id="username" value="黃忠"/>
    <span id="usernameSpan" style="color:red;">1</span>
    <button onclick="onclickFun()">較驗</button>
<script type="text/javascript">

    /*
     * 需求：當(dāng)用戶點擊了較驗按鈕，要獲取輸出框中的內(nèi)容,。然后驗證其是否合法,。
     * 驗證的規(guī)則是：必須由字母，數(shù)字,，下劃線組成,。并且長度是 5 到 12 位。
     */
    function onclickFun() {
        //當(dāng)我們要操作一個標簽的時候,，一定要先獲取這個標簽對象
        var usernameObj = document.getElementById("username");
        //[object HTMLInputElement]它就是dom對象
        var usernameText = usernameObj.value;
        //如何驗證字符串,，符合某個規(guī)則，需要使用正則表達式技術(shù),。
        var patt = /^\w{5,12}$/;

        /*
         * test()方法用于測試某個字符串,，是不是匹配我的規(guī)則，匹配就返回 true,，不匹配就返回 false,。
         */
        var usernameSpanObj = document.getElementById("usernameSpan");
        //innerHTML表示起始標簽和結(jié)束標簽中的內(nèi)容
        //innerHTML這個屬性可讀,，可寫
        usernameSpanObj.innerHTML = "黃忠真可愛！";

        if (patt.test(usernameText)) {
            alert("用戶名合法,！");
            usernameSpanObj.innerHTML = "用戶名合法,！";
            usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
        }else {
            alert("用戶名不合法！");
            usernameSpanObj.innerHTML = "用戶名不合法,！";
            usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
        }
    }
</script>
</body>
</html>

getElementsByName方法示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName方法示例代碼</title>
</head>
<body>

    興趣愛好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全選</button>
    <button onclick="checkNo()">全不選</button>
    <button onclick="checkReverse()">反選</button>
    
<script type="text/javascript">

    //全選
    function checkAll() {
        /*
         * 讓所有復(fù)選框都選中
         * document.getElementsByName();是根據(jù)指定的name屬性查詢返回多個標簽對象集合
         * 這個集合的操作跟數(shù)組一樣
         * 集合中每個元素都是 dom 對象
         * 這個集合中的元素順序是他們在 html 頁面中從上到下的順序
         */
        var hobbies = document.getElementsByName("hobby");
        //checked表示復(fù)選框的選中狀態(tài),，如果選中是true,，不選中是false,。
        //checked這個屬性可讀，可寫,。
        for (var i = 0; i < hobbies.length; i++){
            hobbies[i].checked = true;
        }
    }

    //全不選
    function checkNo() {
        var hobbies = document.getElementsByName("hobby");
        //checked表示復(fù)選框的選中狀態(tài),。如果選中是true,，不選中是false,。
        //checked這個屬性可讀,，可寫。
        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;
            // if (hobbies[i].checked) {
            //     hobbies[i].checked = false;
            // }else {
            //     hobbies[i].checked = true;
            // }
        }
    }
</script>
</body>
</html>

getElementsByTagName方法示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName方法示例代碼</title>
</head>
<body>

    興趣愛好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全選</button>

<script type="text/javascript">
    
    //全選
    function checkAll() {
        /*
         * document.getElementsByTagName("input");
         * 是按照指定標簽名來進行查詢并返回集合
         * 這個集合的操作跟數(shù)組一樣
         * 集合中都是dom對象
         * 集合中元素順序是他們在html頁面中從上到下的順序
         */
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++){
            inputs[i].checked = true;
        }
    }
    
</script>
</body>
</html>

createElement方法示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement方法示例代碼</title>
</head>
<body>

<script type="text/javascript">

    var divObj = document.createElement("div"); //在內(nèi)存中<div></div>

    var textNodeObj = document.createTextNode("取我戟來,！"); //有一個文本節(jié)點對象 #取我戟來,！

    divObj.appendChild(textNodeObj); //<div>取我戟來！</div>

    //divObj.innerHTML = "取我戟來,！";
    
    //<div>取我戟來,！</div>， 但還只是在內(nèi)存中

    //添加子元素
    document.body.appendChild(divObj);

</script>
</body>
</html>

　　節(jié)點的常用屬性和方法：

　　　　節(jié)點就是標簽對象,。

　　　　方法：

　　　　　　通過具體的元素節(jié)點調(diào)用getElementsByTagName()方法,，獲取當(dāng)前節(jié)點的指定標簽名孩子節(jié)點。

　　　　　　appendChild(oChildNode)方法：可以添加一個子節(jié)點,，oChildNode是要添加的孩子節(jié)點,。

　　　　屬性：

　　　　　　childNodes屬性：獲取當(dāng)前節(jié)點的所有子節(jié)點。

　　　　　　firstChild屬性：獲取當(dāng)前節(jié)點的第一個子節(jié)點,。

　　　　　　lastChild屬性：獲取當(dāng)前節(jié)點的最后一個子節(jié)點,。

　　　　　　parentNode屬性：獲取當(dāng)前節(jié)點的父節(jié)點。

　　　　　　nextSibling屬性：獲取當(dāng)前節(jié)點的下一個節(jié)點,。

　　　　　　previousSibling屬性：獲取當(dāng)前節(jié)點的上一個節(jié)點,。

　　　　　　className：用于獲取或設(shè)置標簽的class屬性值。

　　　　　　innerHTML屬性：表示獲取/設(shè)置起始標簽和結(jié)束標簽中的內(nèi)容,。

　　　　　　innerText屬性：表示獲取/設(shè)置起始,。

DOM查詢練習(xí)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查詢</title>
</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>
            你手機的操作系統(tǒng)是?
        </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節(jié)點</button></div>
    <div><button id="btn02">查找所有l(wèi)i節(jié)點</button></div>
    <div><button id="btn03">查找name=gender的所有節(jié)點</button></div>
    <div><button id="btn04">查找#city下所有l(wèi)i節(jié)點</button></div>
    <div><button id="btn05">返回#city的所有子節(jié)點</button></div>
    <div><button id="btn06">返回#phone的第一個子節(jié)點</button></div>
    <div><button id="btn07">返回#bj的父節(jié)點</button></div>
    <div><button id="btn08">返回#android的前一個兄弟節(jié)點</button></div>
    <div><button id="btn09">返回#username的value屬性值</button></div>
    <div><button id="btn10">設(shè)置#username的value屬性值</button></div>
    <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
<script type="text/javascript">
    window.onload = function(){
        //1.查找#bj節(jié)點
        document.getElementById("btn01").onclick = function () {
            var bjObj = document.getElementById("bj");
            alert(bjObj.innerHTML);
        }
        //2.查找所有l(wèi)i節(jié)點
        var btn02Ele = document.getElementById("btn02");
        btn02Ele.onclick = function(){
            var lis = document.getElementsByTagName("li");
            alert(lis.length)
        };
        //3.查找name=gender的所有節(jié)點
        var btn03Ele = document.getElementById("btn03");
        btn03Ele.onclick = function(){
            var genders = document.getElementsByName("gender");
            alert(genders.length)
        };
        //4.查找#city下所有l(wèi)i節(jié)點
        var btn04Ele = document.getElementById("btn04");
        btn04Ele.onclick = function(){
            //1 獲取id為city的節(jié)點
            //2 通過city節(jié)點.getElementsByTagName按標簽名查子節(jié)點
            var lis = document.getElementById("city").getElementsByTagName("li");
            alert(lis.length)
        };
        //5.返回#city的所有子節(jié)點
        var btn05Ele = document.getElementById("btn05");
        btn05Ele.onclick = function(){
            //1 獲取id為city的節(jié)點
            //2 通過city獲取所有子節(jié)點
            alert(document.getElementById("city").childNodes.length);
        };
        //6.返回#phone的第一個子節(jié)點
        var btn06Ele = document.getElementById("btn06");
        btn06Ele.onclick = function(){
            // 查詢id為phone的節(jié)點
            alert( document.getElementById("phone").firstChild.innerHTML );
        };
        //7.返回#bj的父節(jié)點
        var btn07Ele = document.getElementById("btn07");
        btn07Ele.onclick = function(){
            //1 查詢id為bj的節(jié)點
            var bjObj = document.getElementById("bj");
            //2 bj節(jié)點獲取父節(jié)點
            alert( bjObj.parentNode.innerHTML );
        };
        //8.返回#android的前一個兄弟節(jié)點
        var btn08Ele = document.getElementById("btn08");
        btn08Ele.onclick = function(){
            // 獲取id為android的節(jié)點
            // 通過android節(jié)點獲取前面兄弟節(jié)點
            alert( document.getElementById("android").previousSibling.innerHTML );
        };
        //9.讀取#username的value屬性值
        var btn09Ele = document.getElementById("btn09");
        btn09Ele.onclick = function(){
            alert(document.getElementById("username").value);
        };
        //10.設(shè)置#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("city").innerHTML);
            // alert(document.getElementById("city").innerText);
        };
    };
</script>
</body>
</html>