JavaScript之基礎篇-有解無憂

JavaScript 介紹

JavaScript語言誕生主要是完成頁面的資料驗證，因此它運行在客戶端，需要運行瀏覽器來決議執行JavaScript代碼，js是Netscape網景公司的產品，最早取名為LiveScript，為了吸引更多Java程式員，更名為JavaScript（js是弱型別、 java是強型別），

特點：

互動性（它可以做的就是資訊的動態互動）
安全性（不允許直接訪問本地硬碟）
跨平臺性（只要是可以解釋js的瀏覽器都可以執行，和平臺無關）

JavaScript 和 html 代碼的結合方式

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

示例代碼：

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

　　第二種方式：使用script標簽引入單獨的JavaScript代碼檔案，　

示例代碼：

/*
 * hello.js檔案中的內容
 */
alert("hello.js");

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

變數

什么是變數？變數是可以存放某些值的記憶體的命名，

　　JavaScript的變數型別：

　　　　數值型別：number

　　　　字串型別：string

　　　　物件型別：object

　　　　布爾型別：boolean

　　　　函式型別：function

　　JavaScript的特殊值：

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

　　　　null：空值

　　　　NaN：全稱是 Not a Number，非數字、非數值，

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

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

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

　　　　let：塊級作用域，函式內部使用let定義后，對函式外部無影響，

示例代碼：

<!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語言提供的一個函式，
    alert(typeof(i)); //number

    i = "abc";
    //它可以取變數的資料型別回傳
    alert(typeof(i)); //String

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

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

關系（比較）運算

　　分類：

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

　　　　全等于（===）：除了做字面值的比較之外，還會比較兩個變數的資料型別，

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關系（比較）運算</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），

　　&& 且運算：

　　　　第一種：當運算式全為真的時候，回傳最后一個運算式的值，

　　　　第二種：當運算式中，有一個為假的時候，回傳第一個為假的運算式的值，

　　|| 或運算：

　　　　第一種情況：當運算式全為假時，回傳最后一個運算式的值，

　　　　第二種情況：只要有一個運算式為真，就會回傳第一個為真的運算式的值，

提示：

（ && 與運算）和（ || 或運算）有短路，短路就是說，當這個 && 或 || 運算有結果了之后，后面的運算式不再執行，

示例代碼：

<!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("空串為假");
    }

    /*
     * && 且運算
     * 第一種：當運算式全為真的時候，回傳最后一個運算式的值，
     * 第二種：當運算式中，有一個為假的時候，回傳第一個為假的運算式的值，
     */

    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>
</body>
</html>

陣列

　　js中陣列的定義方式：

　　　　var 陣列名 = []; //空陣列

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

示例代碼：

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

    var arr = []; //定義一個空陣列

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

    alert(arr[0]); //12

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

    arr[2] = "abc";

    alert(arr.length); //3

    alert(arr[1]);//undefined

    //陣列的遍歷
    for (var i = 0; i < arr.length; i++){
        alert(arr[i]);
    }

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

函式

　　函式的兩種定義方式：

　　　　第一種：可以使用function關鍵字來定義函式，

　　　　　　function 函式名(形參串列){

　　　　　　　　函式體　　　　　　}

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

示例代碼：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function函式</title>
</head>
<body>
<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>
</body>
</html>

　第二種：

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

　　　　　　　函式體

　　　　　}

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function函式</title>
</head>
<body>
<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>
</body>
</html>

提示：

在Java中函式允許多載，但是在JS中函式的多載會直接覆寫掉上一次的定義，

示例代碼：

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

    fun();

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

　　函式的 arguments 隱形引數（只在 function 函式內）：

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

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

　　　　public void fun( Object ... args );

　　　　可變長引數其他是一個陣列，

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

示例代碼：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arguments隱形引數</title>
</head>
<body>
<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>
</body>
</html>

JS 中的自定義物件（擴展內容）

　　Object形式的自定義物件：

　　　　物件的定義：

　　　　　　var 變數名 = new Object(); //物件實體（空物件）

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

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

　　　　物件的訪問：

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

示例代碼：

<!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 變數名 = { //空物件

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

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

　　　　　　　};

　　物件的訪問：

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

示例代碼：

<!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中的事件

什么是事件？事件是電腦輸入設備與頁面進行互動的回應，我們稱之為事件，

　　常用的事件：

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

onclick單擊事件：常用于按鈕的點擊回應操作，

onblur失去焦點事件：常用用于輸入框失去焦點后驗證其輸入內容是否合法，

onchange內容發生改變事件：常用于下拉串列和輸入框內容發生改變后操作，

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

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

　　什么是事件的注冊（系結）？

　　其實就是告訴瀏覽器，當事件回應后要執行哪些操作代碼，叫事件注冊或事件系結，

靜態注冊事件：

　　通過html標簽的事件屬性直接賦于事件回應后的代碼，這種方式我們叫靜態注冊，

動態注冊事件：

　　是指先通過js代碼得到標簽的dom物件，然后再通過dom物件.事件名 = function(){}這種形式賦于事件回應后的代碼，叫動態注冊，

　　動態注冊基本步驟：

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

onload加載完成事件：

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

    <!-- 靜態注冊onload事件：onload事件是瀏覽器決議完頁面之后就會自動觸發的事件 <body onl oad="onloadFun();"> -->
</script>
</body>
</html>

onclick單擊事件：

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

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

<script type="text/javascript">

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

    //動態注冊onclick事件
    window.onload = function () {
        /*
         * 獲取標簽物件
         * document：是JavaScript語言提供的一個物件（檔案）
         * get：獲取
         * Element：元素（就是標簽）
         * By：通過，， 由，，經，，，
         * Id：id屬性
         * getElementById：通過id屬性獲取標簽物件
         */
        var btnObj = document.getElementById("btn_2");
        alert(btnObj);
        //通過標簽物件.事件名 = function(){}
        btnObj.onclick = function () {
            alert("動態注冊的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">

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

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

onchange內容發生改變事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange內容發生改變事件</title>
</head>
<body>

請選擇你心中的女神：
    <!-- 靜態注冊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("女神已經改變了");
    }

    window.onload = function () {
        //獲取標簽物件
        var selObj = document.getElementById("sel01");
        alert(selObj);
        //通過標簽物件.事件名 = function(){}
        selObj.onchange = function () {
            alert("男神已經改變了");
        }
    }
</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="靜態注冊"/>
    </form>

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

<script type="text/javascript">

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

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

DOM 模型

DOM全稱是Document Object Model檔案物件模型，

實際上就是把檔案中的標簽，屬性，文本，轉換成為物件來管理，

　　Document物件：

　　Document物件的理解：

　　　　第一點：Document它管理了所有的HTML檔案內容，

　　　　第二點：document它是一種樹結構的檔案，有層級關系，

　　　　第三點：它讓我們把所有的標簽都物件化，

　　　　第四點：我們可以通過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;
    
    //孩子結點
    private List<Dom> children;
    
    //起始標簽和結束標簽中間的內容
    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);通過給定的標簽名，創建一個標簽物件，tagName是要創建的標簽名，

提示：

document物件的三個查詢方法，如果有id屬性，優先使用getElementById方法來進行查詢，

如果沒有id屬性，則優先使用getElementsByName方法來進行查詢，

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

以上三個方法，一定要在頁面加載完成之后執行，才能查詢到標簽物件，

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">

    /*
     * 需求：當用戶點擊了較驗按鈕，要獲取輸出框中的內容，然后驗證其是否合法，
     * 驗證的規則是：必須由字母，數字，下劃線組成，并且長度是 5 到 12 位，
     */
    function onclickFun() {
        //當我們要操作一個標簽的時候，一定要先獲取這個標簽物件
        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 = "用戶名合法！";
            usernameSpanObj.innerHTML = "<img src=https://www.cnblogs.com/"right.png\" width=\"18\" height=\"18\">";
        }else {
            alert("用戶名不合法！");
            usernameSpanObj.innerHTML = "用戶名不合法！";
            usernameSpanObj.innerHTML = "<img src=https://www.cnblogs.com/"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() {
        /*
         * 讓所有復選框都選中
         * document.getElementsByName();是根據指定的name屬性查詢回傳多個標簽物件集合
         * 這個集合的操作跟陣列一樣
         * 集合中每個元素都是 dom 物件
         * 這個集合中的元素順序是他們在 html 頁面中從上到下的順序
         */
        var hobbies = document.getElementsByName("hobby");
        //checked表示復選框的選中狀態，如果選中是true，不選中是false，
        //checked這個屬性可讀，可寫，
        for (var i = 0; i < hobbies.length; i++){
            hobbies[i].checked = true;
        }
    }

    //全不選
    function checkNo() {
        var hobbies = document.getElementsByName("hobby");
        //checked表示復選框的選中狀態，如果選中是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");
         * 是按照指定標簽名來進行查詢并回傳集合
         * 這個集合的操作跟陣列一樣
         * 集合中都是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"); //在記憶體中<div></div>

    var textNodeObj = document.createTextNode("取我戟來！"); //有一個文本節點物件 #取我戟來！

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

    //divObj.innerHTML = "取我戟來！";
    
    //<div>取我戟來！</div>， 但還只是在記憶體中

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

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

　　節點的常用屬性和方法：

　　　　節點就是標簽物件，

　　　　方法：

　　　　　　通過具體的元素節點呼叫getElementsByTagName()方法，獲取當前節點的指定標簽名孩子節點，

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

　　　　屬性：

　　　　　　childNodes屬性：獲取當前節點的所有子節點，

　　　　　　firstChild屬性：獲取當前節點的第一個子節點，

　　　　　　lastChild屬性：獲取當前節點的最后一個子節點，

　　　　　　parentNode屬性：獲取當前節點的父節點，

　　　　　　nextSibling屬性：獲取當前節點的下一個節點，

　　　　　　previousSibling屬性：獲取當前節點的上一個節點，

　　　　　　className：用于獲取或設定標簽的class屬性值，

　　　　　　innerHTML屬性：表示獲取/設定起始標簽和結束標簽中的內容，

　　　　　　innerText屬性：表示獲取/設定起始，

DOM查詢練習：

<!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>
            你手機的作業系統是?
        </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>
<script type="text/javascript">
    window.onload = function(){
        //1.查找#bj節點
        document.getElementById("btn01").onclick = function () {
            var bjObj = document.getElementById("bj");
            alert(bjObj.innerHTML);
        }
        //2.查找所有li節點
        var btn02Ele = document.getElementById("btn02");
        btn02Ele.onclick = function(){
            var lis = document.getElementsByTagName("li");
            alert(lis.length)
        };
        //3.查找name=gender的所有節點
        var btn03Ele = document.getElementById("btn03");
        btn03Ele.onclick = function(){
            var genders = document.getElementsByName("gender");
            alert(genders.length)
        };
        //4.查找#city下所有li節點
        var btn04Ele = document.getElementById("btn04");
        btn04Ele.onclick = function(){
            //1 獲取id為city的節點
            //2 通過city節點.getElementsByTagName按標簽名查子節點
            var lis = document.getElementById("city").getElementsByTagName("li");
            alert(lis.length)
        };
        //5.回傳#city的所有子節點
        var btn05Ele = document.getElementById("btn05");
        btn05Ele.onclick = function(){
            //1 獲取id為city的節點
            //2 通過city獲取所有子節點
            alert(document.getElementById("city").childNodes.length);
        };
        //6.回傳#phone的第一個子節點
        var btn06Ele = document.getElementById("btn06");
        btn06Ele.onclick = function(){
            // 查詢id為phone的節點
            alert( document.getElementById("phone").firstChild.innerHTML );
        };
        //7.回傳#bj的父節點
        var btn07Ele = document.getElementById("btn07");
        btn07Ele.onclick = function(){
            //1 查詢id為bj的節點
            var bjObj = document.getElementById("bj");
            //2 bj節點獲取父節點
            alert( bjObj.parentNode.innerHTML );
        };
        //8.回傳#android的前一個兄弟節點
        var btn08Ele = document.getElementById("btn08");
        btn08Ele.onclick = function(){
            // 獲取id為android的節點
            // 通過android節點獲取前面兄弟節點
            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("city").innerHTML);
            // alert(document.getElementById("city").innerText);
        };
    };
</script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/57396.html

標籤：JavaScript

上一篇：蒲公英 · JELLY技術周刊 Vol.12 尤雨溪新作 Vite, 你會支持么？

下一篇：js判斷變數是否定義