2. 程式人生 > 實用技巧 >JavaScript學習系列部落格_39_JavaScript DOM查詢

JavaScript學習系列部落格_39_JavaScript DOM查詢

阿新 • • 發佈：2020-08-23

DOM查詢（獲取物件）

DOM文件物件模型。一個網頁就是一個document(文件),裡面包含了各種標籤，都是物件。面向物件，第一步就是得獲取到這個物件，然後才能做一些操作。模型把裡面的一些物件聯絡起來了，這樣就更加方便獲取和操作這些物件。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content
 
="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
 
 crossorigin="anonymous">
    <title>Dom查詢</title>
</head>

<body>

    <div class="box1">
        <ul class="list-group" id="city">
            <li class="list-group-item" id="shanghai">上海</li>
            <li class="list-group-item">廣州</li>
 

            <li class="list-group-item">深圳</li>
            <li class="list-group-item">杭州</li>
            <li class="list-group-item">成都</li>
        </ul>
    </div>
    <div class="box1">
        gender:
        <input class="hello" type="radio" name="gender" value="male"/>
        Male
        <input class="hello" type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="maoweizhao"/>
    </div>
</body>
<script>
    window.onload = function () {

    //1、獲取id為上海的元素節點
    var sh = document.getElementById("shanghai");
    //innerHTML 通過這個屬性可以獲取到元素內部的html程式碼
    alert(sh.innerHTML);

    //2、獲取li元素節點
    //getElementsByTagName()可以根據標籤名來獲取一組元素節點物件
    //這個方法會給我們返回一個類陣列物件，所有查詢到的元素都會封裝到物件中
    //即使查詢到的元素只有一個，也會封裝到陣列中返回
    var lis = document.getElementsByTagName("li");
    //列印li元素節點的內容
    for (var i = 0; i < lis.length; i++) {
        alert(lis[i].innerHTML);
    }
        
    //3、獲取name=gender的所有元素節點
    var inputs=document.getElementsByName("gender")
    //<input/>是自結束標籤,innerHMTL這個屬性沒有意義，已經獲得了name=gender的元素節點
    //裡面的class、type、value、id這些都是這個節點物件的屬性都可以直接獲取了
    alert(inputs[0].value+inputs[0].id+inputs[0].value);
    //注意的是class這個屬性，不能寫inpust[0].class這樣獲取，要用inputs[0].className
    alert(inputs[0].className);



    //4、返回id為city的元素的所有子節點
    //首先獲取到id為city的元素節點。
     var city = document.getElementById("city");
    //獲取該元素節點的所有子節點，通過childNodes屬性
     alert(city.childNodes.length);
    //childNodes屬性會獲取包括文字節點在呢的所有節點
    //根據DOM標籤標籤間空白也會當成文字節點
    //注意：在IE8及以下的瀏覽器中，不會將空白文本當成子節點，
    //所以該屬性在IE8中會返回5個子元素而其他瀏覽器是11個
     
    //children屬性可以獲取當前元素的所有子元素,就是那五個li，不包括標籤之間那些空白的文字節點
     alert(city.children.length);

    //firstChild可以獲取到當前元素的第一個子節點（包括空白文字節點）
     alert(city.firstChild);//會是一個空白的文件節點

    //firstElementChild獲取當前元素的第一個子元素
     alert(city.firstElementChild);//這裡獲取到的就會說第一個li

    //innerText該屬性可以獲取到元素內部的文字內容
     alert(city.innerText);//會獲取到li裡面的文字：上海、廣州、、、

     var sh = document.getElementById("shanghai");
    //5、獲取sh的父節點
     alert(sh.parentNode);

    //獲取sh的前一個兄弟節點（也可能獲取到空白的文字）
     alert(sh.previousSibling); 

    //previousElementSibling獲取前一個兄弟元素，IE8及以下不支援
     alert(sh.previousElementSibling);

    //6、獲取body標籤
    var body = document.getElementsByTagName("body")[0];//方式1
                
    //在document文件物件中有一個屬性body，它儲存的是body的引用
    var body = document.body;//方式2
     
    //7、獲取html根標籤
    var html = document.documentElement;

    //8、獲取頁面中的所有元素，並且輸出
    var all = document.all;
    for(var i=0 ; i<all.length ; i++){
                    console.log(all[i]);
                }
     
    //9、根據元素的class屬性值查詢一組元素節點物件，
    //getElementsByClassName()可以根據class屬性值獲取一組元素節點物件，但是該方法不支援IE8及以下的瀏覽器
    //document.querySelector()
    //需要一個選擇器的字串作為引數，可以根據一個CSS選擇器來查詢一個元素節點物件
    //雖然IE8中沒有getElementsByClassName()但是可以使用querySelector()代替
    //使用該方法總會返回唯一的一個元素，如果滿足條件的元素有多個，那麼它只會返回第一個
    var box1 = document.querySelector(".box1")


    //document.querySelectorAll()
    //該方法和querySelector()用法類似，不同的是它會將符合條件的元素封裝到一個數組中返回
    //即使符合條件的元素只有一個，它也會返回陣列
    var box1 = document.querySelectorAll(".box1");

    }
</script>

</html>

相關推薦

JavaScript學習系列部落格_39_JavaScript DOM查詢

DOM查詢（獲取物件） DOM文件物件模型。一個網頁就是一個document(文件),裡面包含了各種標籤，都是物件。面向物件，第一步就是得獲取到這個物件，然後才能做一些操作。模型把裡面的一些物件聯絡起來了，這樣就更加方

JavaScript學習系列部落格_28_JavaScript 陣列去重

陣列去重 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除陣列中重複的數字 //獲取陣列中的每一個元素

JavaScript學習系列部落格_35_JavaScript 正則表示式的使用

正則表示式的使用 先說RegExp物件的一個方法 test（） - 使用這個方法可以用來檢查一個字串是否符合正則表示式的規則，如果符合則返回true，否則返回false。

Skywalking系列部落格6-手把手教你編寫Skywalking外掛

前置知識 在正式進入編寫環節之前，建議先花一點時間瞭解下javaagent（這是JDK 5引入的一個玩意兒，最好了解下其工作原理）；另外，Skywalking用到了byte-buddy（一個動態操作二進位制碼的庫），所以最好也熟悉下。

DOM系列（一）新手小白的第一篇部落格

這是我的第一篇部落格，由於有一個月沒有學習JS了，DOM的很多東西都忘了，這就算是一種複習吧

個人部落格學習備忘錄（連載之：使用Hexo+GitHub搭建）

我為什麼要搭建屬於自己的部落格呢？原因很簡單，想把自己當天學到的知識及解決問題的思路，整理記錄下來，方便自己用到的時候能夠翻翻，快速的找到

Java原始碼詳解系列(十)--全面分析mybatis的使用、原始碼和程式碼生成器(總計5篇部落格)

簡介 Mybatis 是一個持久層框架，它對 JDBC 進行了高階封裝，使我們的程式碼中不會出現任何的 JDBC 程式碼，另外，它還通過 xml 或註解的方式將 sql 從 DAO/Repository 層中解耦出來，除了這些基本功能外，它還提供了

通過建立部落格學習Django-1

本篇文章主要對追夢人物的部落格：使用 django 開發一個個人部落格進行總結

通過建立部落格學習Django-3

本篇文章主要對追夢人物的部落格《使用 django 開發一個個人部落格》進行總結

個人部落格 Django 評論模組開發總結【四】JavaScript邏輯，請求渲染校驗資料

JavaScript邏輯，請求渲染校驗資料 個人網站開通評論了 https://www.charmcode.cn/article/2020-07-09_Comment

部落格園bug破解：不申請部落格後臺js許可權,直接用上JavaScript-myblogplus 第四期 慕舲原創部落格園破解：不申請部落格後臺js許可權,直接用上JavaScript-myblogplus 第四期 慕舲原創

前言 上期我就說過要寫這篇文章了,這不來了嘛. javascript 可以動態修改部落格網頁,幹一堆好事

51CTO部落格搜尋升級，支援模糊查詢 2017.6.13

各位博友，過去搜索部落格文章，搜尋準度很差，頁面也很老氣，現在針對文章的搜尋已經升級了，在部落格首頁搜尋文章，跳轉到整站統一的搜尋平臺so.51cto.com，支援模糊搜尋，搜尋準度提升。目前暫時支援文

國外技術網站，技術部落格推薦（外語棧）國外很火的程式設計師學習網站收藏

https://www.javatpoint.com/ 涵蓋基本所有教程 個人再上邊看過一些資料結構和java相關教程，適合學習基礎，理解基本原理

電子公文傳輸系統後端mybatis-plus學習部落格

目錄電子公文傳輸系統後端人員mybatis-plus學習部落格1、什麼是mybatis-plus2、使用 SpringBoot 快速使用 MyBatis-Plus3、Mybatis-Plus 常用操作1、配置日誌2、簡單認識一下常用註解3、程式碼生成器4、自動填充資料功

java學習部落格2

七、陣列操作 1、遍歷陣列 我們在Java程式基礎裡介紹了陣列這種資料型別。有了陣列，我們還需要來操作它。而陣列最常見的一個操作就是遍歷。

logging模組(部落格園有完整的學習分享)

技術標籤：python 更詳細轉入https://www.cnblogs.com/songhaixing/ 一.什麼是 logging 模組 logging 模組是 Python 自帶的標準模組

MarkDown學習篇 之 寫部落格

技術標籤：從0開始接觸軟體程式設計markdown Markdown學習 標題： +標題名字 三級標題

Flask框架從0到1實現部落格網站（請以學習的目的觀看，博主也是以學習為主）

一，專案中用到的技術（知識點） GitHub地址：https://github.com/fantongxue666/Python-Projects

js學習（十一）-- DOM的簡介、事件簡單介紹、文件載入、DOM查詢

目錄DOM簡介(P91)節點事件文件的載入DOM的查詢獲取元素節點獲取元素節點的子節點獲取父節點和兄弟節點節點的屬性DOM查詢補充根據元素的class屬性查詢一組元素的結點物件querySelector和querySelectorAll練習

flask訪問404_FLASK部落格系列3——路由

技術標籤：flask訪問404 ​ 斷更了幾天，我又回來了。 今天我們來講講路由。這個路由可不是我們家裡用的路由，Flask路由規則都是基於Werkzeug的路由模組的，它還提供了很多強大的功能。現代 web 應用都使