【Web API DOM02】如何獲取、操作DOM元素

一:獲取DOM元素

1 根據CSS選擇器獲取

語法格式如下:

(1)選中一個DOM元素

document.querySeletor('CSS選擇器')
<ul><li>1</li><li>2</li><li>3</li>
</ul>
document.querySelector('li')//只能獲取第一個li

該選擇器只能選中第一個DOM元素,因此選擇時,要慎重選擇對應的DOM元素;

選中的元素可以通過對象調用屬性和方法的方式,修改元素的屬性和方法

(2)可以選中多個DOM元素

document.querySelectorAll('CSS選擇器')

?一次可選中HTML文檔中的多個標簽,并且返回該以該標簽組成的偽數組

偽數組的特征:

  1. 有長度和索引值
  2. 沒有pop()、push()等數組方法

二:操作DOM元素內容

1 對象.innerHTML屬性

  1. 將文本內容添加/修改到任意標簽位置
  2. 會解析標簽,但多標簽的情況下,建議使用模板字符串

2 對象.innerText屬性

  1. 可以修改/添加標簽中的文字內容
  2. innerText不會像引號、以及模板字符串中可以解析html的標簽

三:操作DOM元素屬性

1 操作元素常用屬性

例如img的src屬性、a的href屬性

可以通過:對象.屬性 = 值的方式修改

獲取后:img.src = '....'

2 操作元素樣式屬性

  1. 通過style修改元素樣式

    1. 語法格式:對象.style.屬性 = '值'
    2. 對于CSS中background-color、margin-top等有短橫線的,在JS中要修改成小駝峰的形式
    3. 生成的是行內樣式表,權重比較高
  2. 通過className修改元素樣式

    1. 語法格式:元素.classsName = '類名'
    2. 注意:
      1. 如果在原有類名的基礎上添加類名,那么應保留在字符串中保留之前的類名,否則會覆蓋之前的類名
      2. 這種方法常用于修改較多樣式需要修改的情況
  3. 通過classList修改元素樣式(重點)

    1. 為了解決className容易覆蓋以前類名,可以通過classList方式追加和刪除類名
    2. 語法格式
      1. ?添加類名:元素.classList.add('類名')
      2. 刪除類名:元素.classList.remove('類名')
      3. 切換類名:元素.classList.toggle('類名')
        1. 對于“切換類名”含義指,操作的元素“有括號內書寫的類名”就刪除掉該類名;元素上沒有該類名就添加上該類名;

四:操作表單元素屬性

1 常用操作表單元素屬性

  • 利用value獲取表單輸入元素的值
  • 利用type修改表單元素的類型
  • checked(復選框是否被選中)、disabled(是否禁用某一按鈕),checked和disabled都是默認為false

2 自定義元素屬性

  • 在標簽中一律以data-開頭
  • 在DOM對象上一律以dataset對象方式獲取

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/21581.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/21581.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/21581.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Github上一款開源、簡潔、強大的任務管理工具:Condution

Condution 是一款開源任務管理工具&#xff0c;它以簡潔易用、功能強大著稱。它旨在為用戶提供一個簡單高效的平臺&#xff0c;幫助他們管理日常任務、提高工作效率。 1. Condution 的誕生背景 現如今&#xff0c;市面上存在著許多任務管理軟件&#xff0c;但它們往往價格昂貴…

如何不用口吐蓮花,照樣成為社交達人

一、教程描述 每個人的一生&#xff0c;70%的時候都在溝通&#xff0c;與老板溝通、與家人溝通、與朋友溝通、與陌生人溝通&#xff0c;等等&#xff0c;但是你真的會溝通么&#xff1f;不論是工作上跟上司、同事和客戶間的溝通&#xff0c;還是生活中與家人、朋友、伴侶間的溝…

[ICPC2024 Xi‘an I] ICPC2024 邀請賽西安站(7/8/13)

心得 [ICPC2024 Xian I] ICPC2024 邀請賽西安站重現賽 - 比賽詳情 - 洛谷 7表示賽時ac了7個&#xff0c;8表示含補題總共ac數&#xff0c;13表示題目總數 題目 M. Chained Lights 打表&#xff0c;發現只有k1是YES //#include <bits/stdc.h> #include<iostream&…

Mysql 技術實戰篇

命令行 導出 - -h localhost&#xff1a;指定MySQL服務器的主機地址為本地主機。如果MySQL服務器在其他主機上&#xff0c;請將localhost替換為相應的主機地址。 - -u username&#xff1a;指定連接MySQL服務器的用戶名。將username替換為您的有效用戶名。 - -p&#xff1a;提…

Makefile教程(附通用模板)

工程目錄 工程目錄如圖&#xff0c;build文件夾是編譯出來的 . ├── app │ ├── imx6ul.lds │ ├── main.c │ ├── makefile │ └── start.S ├── bsp │ ├── clk │ │ ├── bsp_clk.c │ │ └── bsp_clk.h │ ├── delay │…

軟考 系統架構設計師系列知識點之SOME/IP與DDS(1)

本文內容參考&#xff1a; 車載以太網 - SOME/IP簡介_someip-CSDN博客 https://zhuanlan.zhihu.com/p/369422441 什么是SOME/IP?_someip-CSDN博客 SOME/IP 詳解系列&#xff08;1&#xff09;—— 概述_some ip-CSDN博客 深入淺出SOME/IP協議&#xff1a;基本概念和原理-…

天童教育:停止內耗放松身心

如果一個人經常從自己身上找原因&#xff0c;經常攬下他人的過錯的責任&#xff0c;總是自我懷疑自我否定&#xff0c;認為自己不值得被愛。當被人誤解時會在心里悄悄附和&#xff0c;責怪自己。缺乏自信&#xff0c;沒辦法和他人有正常的交往&#xff0c;長期處于身心疲憊的狀…

Python與Python3的區別:深度剖析與全面解讀

Python與Python3的區別&#xff1a;深度剖析與全面解讀 在編程領域&#xff0c;Python和Python3是兩個常被提及的版本&#xff0c;它們之間既存在相似之處&#xff0c;又有著顯著的區別。本文將從四個方面、五個方面、六個方面和七個方面&#xff0c;深入剖析Python與Python3之…

OJ3376無盡的石頭問題

答案&#xff1a; #include<bits/stdc.h> using namespace std; const int N10e7; int fx(int n) {int sum0;while(n){sum(n%10);n/10;}return sum; } int main() {int t,n,x;cin>>t;while(t--){cin>>n;int count0;for(int i1;i<N;){if(in){cout<<…

在github上創建(上傳、關聯)自已的項目

目錄 創建一個github項目并進行開發。 1.github創建空項目 2. git clone 項目 3. 將項目關聯 創建一個github項目并進行開發。 1.github創建空項目 右邊的New 然后按步創建就行 2. git clone 項目 復制這個連接 然后在終端&#xff1a;git clone [剛才復制的連接] 3. 將…

解讀 Explainable Image Similarity Integrating Siamese Networks and Grad-CAM

給出論文&#xff08;Explainable Image Similarity Integrating Siamese Networks and Grad-CAM&#xff09;的內容解讀、代碼運行說明 論文鏈接&#xff1a;J. Imaging | Free Full-Text | Explainable Image Similarity: Integrating Siamese Networks and Grad-CAM (mdpi.c…

純網絡的系統能否定級備案?

很多單位想把網絡基礎設施進行定級備案和測評&#xff0c;但是不知道這樣可否&#xff1f; 目前湖北省是可以的。因為根據《定級指南》的術語解釋3.2對等級保護對象的定義是包括通信基礎設施的&#xff0c;也就是網絡基礎設施。其他地區目前有的地方可以有的地方不行&#xff…

2024年武漢東湖高新中級職稱報名時間是什么時候?

2024年武漢市東湖高新中級職稱上半年批次報名已經截止了&#xff0c;下半年東湖高新至少還有一次報名機會&#xff0c;所以各位東湖高新區評職稱的朋友們&#xff0c;不要錯過這次了。 2024年武漢東湖高新區中級職稱報名條件&#xff1a; 1.東湖高新區社保滿足1年&#xff0c;近…

進口不銹鋼氣動輸送泵-美國品牌

進口不銹鋼氣動輸送泵是一種利用壓縮空氣為動力&#xff0c;通過氣閥控制進行往復運動&#xff0c;將能量轉換為泵的動能&#xff0c;從而實現對液體或固體物料輸送的設備。以下是關于進口不銹鋼氣動輸送泵的詳細介紹&#xff1a; 一、產品特點 材質優良&#xff1a;主體部分…

seata源碼分析(03)_創建代理的過程

seata提供了ProxyUtil工具類為事務組件創建代理對象&#xff0c;在spring環境中&#xff0c;seata提供了GlobalTransactionScanner類和SeataAutoDataSourceProxyCreator為組件創建AOP代理&#xff0c;本文重點分析這兩個類。 ProxyUtil io.seata.integration.tx.api.util.Pro…

【中年危機】程序猿自救指南

中年危機&#xff0c;一個聽起來就充滿挑戰的詞匯&#xff0c;它不僅僅是一個年齡的標記&#xff0c;更是一個個人成長和職業發展的轉折點。 構架個人品牌&#xff1a; 學會打造IP個人品牌是職業生涯中的重要資產。在中年時期&#xff0c;你已經積累了豐富的經驗和知識&#x…

golang的http客戶端封裝

簡介 net/http 是 Go 語言標準庫的一部分&#xff0c;它提供了創建 HTTP 客戶端和服務器的能力。這個包通過簡化與 HTTP 協議的交互&#xff0c;讓開發者能夠方便地構建 HTTP 請求和響應&#xff0c;以及處理路由等任務。 本文以 net/http 包作為底層&#xff0c;封裝一個包含…

HTCC電路板是什么,有哪些主要應用領域

HTCC英文名稱是High-Temperature Co-Fired Ceramic&#xff0c;又稱高溫共燒多層陶瓷基板。因其具有導熱系數高、耐熱性好、熱膨脹系數小、機械強度高、絕緣性好、耐腐蝕等優勢&#xff0c;是保持高速增加的PCB線路板之一。 SPEA作為專業電路板測試設備方案服務商&#xff0c;公…

FY-SA-20237·8-WhyWeSpin

Translated from the Scientific American, July/August 2023 issue. Why We Spin (我們為什么旋轉) Primates may play with reality by twirling around 翻譯&#xff1a;靈長類動物有能力通過旋轉或旋轉運動來操縱或扭曲他們對現實的感知。 解釋&#xff1a; “Primates”…

Java生成指定長度驗證碼

生成指定長度驗證碼的簡單思路在Java中通常涉及以下幾個步驟&#xff1a; 1、定義字符池&#xff1a; 首先&#xff0c;需要定義一個包含所有可能字符的字符串&#xff0c;這個字符池通常包括數字(0-9)、大寫字母(A-Z)、小寫字母(a-z)。 例如&#xff1a; String chars "…