Web API---DOM---總結獲取元素的方式

来源:https://www.cnblogs.com/jane-panyiyun/archive/2019/12/05/11989500.html
-Advertisement-
Play Games

總結獲取元素的方式 1. 根據id屬性的值獲取元素,返回來的是一個元素對象 document.getElementById("id屬性的值"); document.getElementById("btn"); 2. 根據標簽名字獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 docume ...


總結獲取元素的方式

1. 根據id屬性的值獲取元素,返回來的是一個元素對象 document.getElementById("id屬性的值"); 
document.getElementById("btn");

 

2. 根據標簽名字獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 document.getElementsByTagName("標簽名字"); 
document.getElementsByTagName("li");

 

下麵的幾個,有的瀏覽器不支持   3. 根據name屬性的值獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 document.getElementsByName("name屬性的值") 
document.getElementsByName("name1")

 

4. 根據類樣式的名字來獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 document.getElementsByClassName("類樣式的名字") 
document.getElementsByClassName("cls")

 

5. 根據選擇器獲取元素,返回來的是一個元素對象 document.querySelector("選擇器的名字"); 
document.querySelector("#btn"); //id，類，標簽等選擇器用的比較多

 

6. 根據選擇器獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 document.querySelectorAll("選擇器的名字")    
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Bootstrap4 本地編譯運行
    Step1. 獲取Bootstrap源代碼 1 https://github.com/twbs/bootstrap Step2. 進入目錄並切換npm源 1 npm --registry https://registry.npm.taobao.org // 淘寶鏡像 2 npm config get ...
  • Web API---DOM---自定義屬性引入和移除
    總結：在html標簽中添加的自定義屬性, 如果想要獲取這個屬性的值, 需要使用getAttribute("自定義屬性的名字")才能獲取這個屬性的值 html標簽中有沒有什麼自帶的屬性可以存儲成績的 沒有 本身html標簽沒有這個屬性, 自己(程式員)添加的 自定義屬性 為了存儲一些數據 <!DOCT ...
  • vue中計算屬性的get與set方法
    計算屬性get set方法 在vue的計算屬性中，所定義的都是屬性，可以直接調用 正常情況下，計算屬性中的每一個屬性對應的都是一個對象，對象中包括了set方法與get方法 而絕大多數情況下，計算屬性沒有set方法，是一個只讀屬性 此時計算屬性可以簡寫 ...
  • 手寫Promise A+ 規範
    基於ES6語法手寫promise A+ 規範，源碼實現 class Promise { constructor(excutorCallBack) { this.status = 'pending'; this.value = undefined; this.fulfilledAry = []; th ...
  • Web API---DOM---設置和獲取---標簽內容和文本內容
    設置和獲取 標簽內容和文本內容 總結 設置： 使用innerText主要是設置文本的, 設置標簽內容, 是沒有標簽的效果的 innerHTML是可以設置文本內容 innerHTML主要的作用是在標簽中設置新的html標簽內容, 是有標簽效果的 想要設置標簽內容, 使用innerHTML 想要設置文本 ...
  • HTML基礎——基礎標簽
    一、HTML概述 htyper text markup language 即超文本標記語言。 超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。 標記語言: 標記（標簽）構成的語言。 1、網頁的組成 一個網頁一般由兩部分組成即： HTML（Hypertext Markup Lan ...
  • 瀏覽器中的 Event Loop
    當我們執行 JS 代碼的時候其實就是往執行棧中放入函數，那麼遇到非同步代碼的時候該怎麼辦？其實當遇到非同步的代碼時，會被掛起併在需要執行的時候加入到 Task（有多種 Task） 隊列中。一旦執行棧為空，Event Loop 就會從 Task 隊列中拿出需要執行的代碼並放入執行棧中執行，所以本質上來說 ...
  • 【Puppeteer】puppeteer安裝/常用的方法以及一個小慄子
    這裡介紹的是Win平臺的安裝方法，其他平臺請至Github>Puppeteer. 首先要安裝node.js 可以看我這篇的開頭>【Angular】學習筆記-環境部署、項目建立相關 1.新建項目目錄 2.打開gitbush（常用的Terminal都可以） 3.鍵入 npm i puppeteer 4. ...
一周排行
    -Advertisement-
    Play Games
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類