querySelector與getElementBy等的區別

来源:https://www.cnblogs.com/Joe-and-Joan/archive/2018/12/15/10123918.html
-Advertisement-
Play Games

獲取元素DOM對象有很多種方法,以前一直在用getElementById和getElementsByTagName等,現在對這些方法和querySelector做一個總結. 常見的獲取元素的方法有3種,分別是通過元素ID、通過標簽名字和通過類名字來獲取。 DOM提供了一個名為getElementBy ...


獲取元素DOM對象有很多種方法,以前一直在用getElementById和getElementsByTagName等,現在對這些方法和querySelector做一個總結.
常見的獲取元素的方法有3種,分別是通過元素ID、通過標簽名字和通過類名字來獲取。
DOM提供了一個名為getElementById的方法,這個方法將返回一個與之對應id屬性的節點對象,它是document對象特有的函數,只能通過其來調用該方法,使用方法如下:document.getElementById('idName');

getElementsByTagName方法返回一個對象數組(準確的說是HTMLCollection集合),返回元素的順序是它們在文檔中的順序,傳遞給 getElementsByTagName() 方法的字元串可以不區分大小寫,使用方法如下:document.getElementsByTagName(tagName);

DOM還提供了getElementsByClassName方法來獲取指定class名的元素,該方法返迴文檔中所有指定類名的元素集合,作為 NodeList 對象。NodeList 對象代表一個有順序的節點列表。NodeList 對象 我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始), 所以有時使用時要指定下標,使用方法如下:document.getElementsByClassName('className');

querySelector() 方法返回匹配指定 CSS 選擇器元素的第一個子元素 。 該方法只返回匹配指定選擇器的第一個元素。如果要返回所有匹配元素,需要使用 querySelectorAll() 方法替代.

由於querySelector是按css規範來實現的,所以它傳入的字元串中第一個字元不能是數字.

最後再根據查詢的資料總結一下:
query選擇符選出來的元素及元素數組是靜態的,而getElement這種方法選出的元素是動態的。靜態的就是說選出的所有元素的數組,不會隨著文檔操作而改變.
在使用的時候getElement這種方法性能比較好,query選擇符則比較方便.

 

參考於:https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一. Hbase 的 region 我們先簡單介紹下 Hbase 的 架構和 region : 從物理集群的角度看,Hbase 集群中,由一個 Hmaster 管理多個 HRegionServer,其中每個 HRegionServer 都對應一臺物理機器,一臺 HRegionServer 伺服器上又 ...
  • 1 小時 SQL 極速入門 前面兩篇我們從 SQL 的最基礎語法講起,到表聯結多表查詢。 大家可以點擊鏈接查看 "1 小時 SQL 極速入門(一)" "1 小時 SQL 極速入門(二)" 今天我們講一些在做報表和複雜計算時非常實用的分析函數。由於各個資料庫函數的實現不太一樣,本文基於 Oracle ...
  • 簡介 之前的工作一直使用的SQL SERVER, 用過的都知道,SQL SERVER有配套的SQL跟蹤工具SQL Profiler,開發或者定位BUG過程中,可以在操作頁面的時候,實時查看資料庫執行的SQL語句,十分方便。最近的項目使用MySQL,沒有類似的功能,感覺到十分的不爽,網上也沒有找到合適 ...
  • 1.下載flutter_sdk壓縮包,解壓到指定目錄,把sdk的bin目錄添加到系統環境變數Path 設置中國臨時鏡像:添加兩個系統變數 FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn PUB_HOSTED_URL=https://pub... ...
  • 第一種:使用ION: 第二種,使用OpenCL API: 第三種,使用CL_MEM_USE_HOST_PTR 然後用這三個cl_mem去執行相同的kernel(用255減去像素值,圖像大小為1440x1080),然後把結果 到host指針,然後再使用memcpy複製到另外一塊host記憶體,測量時間如 ...
  • 1. 請用至少3中方式實現數組去重? 2. HTTP狀態碼及其含義? 3. html5有哪些新特性、移除了那些元素? 4. display: none;與visibility: hidden;的區別? 5. 如何解決跨域問題? 6. XML和JSON的區別? ...
  • jquery DOM 分為元素操作、屬性操作、樣式操作。 一、元素操作 1、查找 ①工具:jQuery選擇器 2、創建和添加 ①代碼格式:變數 = $('要創建的元素'); 註意點: 1 要使用標準的XHTML格式。 2 不能使用$("<p>")或者$("<P/>")。 3 可以在標簽內添加文本當做 ...
  • 1JS簡介特點:跨平臺 弱類型 基於對象 函數式編程 跨平臺:可以再不同的系統上運行 弱類型:Java是強類型 給什麼數據就是什麼類型 基於對象:面向對象 函數式編程 腳本語言:js運行依賴於一個網頁,不能獨立運行 2JS輸出方式 alert();console.log();document.wri ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...