Javascript：WebAPI

獲取網頁元素

queryselector

queryselector是 JavaScript 中用于選擇 DOM 元素的重要方法，它允許使用 CSS 選擇器語法來查找頁面中的元素。

一般queryselector獲取的元素都是html中第一個選擇器的元素?

支持選擇器類型：類選擇器(.class) ，id選擇器(#class)，屬性選擇器[attribute]，偽類選擇器(father:child)

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>英雄聯盟</div><br><div id="LOL">英雄聯盟</div><br><div class="CF">穿越火線</div><br><div><div>我的世界</div></div><br></body>
<script>let NAME1=document.querySelector('div')let NAME2=document.querySelector('#LOL')let NAME3=document.querySelector('.CF')let NAME4=document.querySelector('div div')console.log(NAME1)console.log(NAME2)console.log(NAME3)console.log(NAME4)
</script>
</html>

演示結果

?querySelectorAll

?querySelector只能獲取html中一個選擇器標簽，但是querySelectorAll可以獲取全部的選擇器標簽

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>英雄聯盟</div><br><div>洛克王國</div><br><div>穿越火線</div><br><div>我的世界</div><br></body>
<script>let NAME1=document.querySelectorAll('div')console.log(NAME1)
</script>
</html>

演示結果

?

事件的認識

我們學習完了獲取網頁標簽元素是為了更好的認識事件，當我們在操作網頁的時候就是一種事件的發生，事件的元素有：事件源，事件的類型，事件的處理方式

事件源：是那個標簽發生了事件

事件的類型：發生了什么類型的事件

事件的處理方式：發生這個事件之后我們的網頁需要怎么處理

我們來看一段代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="點我發生事件" class="gan">
</body>
<script>let NAME1=document.querySelector('.gan')NAME1.onclick=function(){alert("Hello,World")}
</script>
</html>

演示結果

?當我們點擊這個按鈕的時候就會發生一個點擊類型的事件，而這個事件的事件源就是這個按鈕，事件的處理方式就是接下來會彈出一個窗口

獲取/修改元素的內容

在修改網頁元素的內容時我們一樣需要獲取選擇器標簽，當我們獲取選擇器標簽后有兩個接口可以修改標簽的內容，一個是修改標簽文本，一個是直接修改標簽html的結構

innerText?

當我們的標簽是一個文本內容時，選擇它并且使用這個接口可以直接修改文本

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="gan">HELLO,WORLD</div><div class="gan">HELLO,WORLD</div><div class="gan">HELLO,WORLD</div>
</body>
<script>let NAME1=document.querySelector('.gan')console.log(NAME1.innerText)NAME1.innerText='<div>Hello,World</div>'console.log(NAME1.innerText)
</script>
</html>

演示結果

?

innerHTML

innerHTML用于獲取或設置標簽的HTML的內容

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="gan">HELLO,WORLD</div><div class="gan">HELLO,WORLD</div><div class="gan">HELLO,WORLD</div>
</body>
<script>let NAME1=document.querySelector('.gan')console.log(NAME1.innerHTML)NAME1.innerHTML='<div>Hello,World</div>'console.log(NAME1.innerHTML)
</script>
</html>

演示結果

?修改img屬性

我們先定義一個img圖像，并獲取他和他的屬性信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.type{height: 150px;width: 300px;}</style>
</head>
<body><img src="./微信圖片_20250516111746.jpg" alt="這是vue的log" title="Vue3" class="type">
</body>
<script>let tim=document.querySelector('.type')console.dir(tim)
</script>
</html>

這里的dir使用來獲取tim對象的屬性的

演示結果

我們可以看到我們為img的添加的屬性都可以使用，console.dir來查看

我們可以結合上面的點擊事件來修改img的屬性使他更靈活起來

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.type{height: 150px;width: 300px;}</style>
</head>
<body><img src="a20250516111746.jpg" alt="這是vue的log" title="Vue3" class="type" >
</body>
<script>let tim=document.querySelector('.type')tim.onclick=function(){if(tim.src.lastIndexOf('a20250516111746.jpg')!==-1){tim.src='./a74A6416B588.jpg'}else{tim.src='./a20250516111746.jpg'}}
</script>
</html>

演示結果

?

?

我們每點擊一次圖片，圖片都換進行切換

獲取/修改樣式屬性?

行內樣式操作格式

        text1.style.fontSize="20px"text1.style.cssText="font-size:20px"

這里一共有兩種模板可選

元素.style.屬性=屬性值，第一種命名方式需要去掉中間的-號，第二個單詞的第一個字母大寫

元素.style.cssText=“屬性文本”?

類名樣式操作

類名樣式操作格式

對象名.className="新的類名"

當我們要更改標簽的類時，我們可以通過這種方式更改

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.TEXT1{background-color: aqua;color: red;width: 100%;height: 100%;}.TEXT2{background-color: aquamarine;color: khaki;width: 100%;height: 100%;}html body{background-color: black;}</style>
</head>
<body><div style="font-size: 50px;" class="TEXT1">HELLO,WORLD</div>
</body>
<script>let text1=document.querySelector('.TEXT1')text1.onclick=function(){if(text1.className=="TEXT1"){text1.className="TEXT2"}else{text1.className="TEXT1"}}
</script>
</html>

這里我們實現了一個點擊就會切換類樣式的程序

?

?

節點操作?

插入到容器的最后

DOM數節點的創建和存放

創建DOM節點

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><span></span><div class="contaign"></div>
</body>
<script>let text1=document.createElement('span')text1.className="CLASSNAME"text1.id="IDNAME"text1.innerText="HELLO,WORLD"console.log(text1)</script>
</html>

演示結果

?

這就是我們創建的節點

?但是網頁并不會輸出什么

將節點存放在一個容器中再輸出到網頁

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><span></span><div class="contaign"></div>
</body>
<script>let text1=document.createElement('span')text1.className="CLASSNAME"text1.id="IDNAME"text1.innerText="HELLO,WORLD"console.log(text1)let conta=document.querySelector('.contaign')conta.appendChild(text1)console.log(conta)
</script>
</html>

演示結果

?網頁輸出結果

?這里只輸出了一句，說明創建的DOM節點不單獨生效，只放在容器里生效

插入到指定容器節點之前

?演示容器的節點

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><div class="contaign"><div></div><div></div><div></div></div>
</body>
<script>let conta=document.querySelector('.contaign')console.log(conta.children)
</script>
</html>

演示結果

?這里的children相當于一個容器，

使用insertBefore進行節點插入

使用格式

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

其中newNode是需要被插入的節點，referenceNode是選擇在那個節點位置之前插入

?insertedNode是返回的被插入節點

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><span></span><div class="contaign"><div></div><div></div><div></div></div>
</body>
<script>let TEXT1=document.createElement("span")TEXT1.innerText="HELLO,WORLD"let conta=document.querySelector('.contaign')conta.insertBefore(TEXT1,conta.children[1])console.log(conta.children)
</script>
</html>

演示結果

?當我們插入兩次DOM樹會按最后一次的算

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><span></span><div class="contaign"><div></div><div></div><div></div></div>
</body>
<script>let TEXT1=document.createElement("span")TEXT1.innerText="HELLO,WORLD"let conta=document.querySelector('.contaign')conta.insertBefore(TEXT1,conta.children[1])conta.insertBefore(TEXT1,conta.children[1])console.log(conta.children)
</script>
</html>

演示結果

?

這里只有一個span

當我們單獨修改節點的數據后，DOM樹對應該節點的數據也會被修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.TEXT0{background-color: aqua;color: red;}</style>
</head>
<body><span></span><div class="contaign"><div></div><div></div><div></div></div>
</body>
<script>let TEXT1=document.createElement("span")TEXT1.innerText="HELLO,WORLD"let conta=document.querySelector('.contaign')conta.insertBefore(TEXT1,conta.children[1])TEXT1.className="TEXT0"console.log(conta.children)
</script>
</html>

演示結果

?刪除容器中的指定節點

使用removeChild刪除節點

使用格式

oldChild = element.removeChild(child);

child為被刪除的節點，element為容器，oldChild為返回的被刪除節點

演示代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.TEXT0{background-color: aqua;color: red;}</style>
</head>
<body><span></span><div class="contaign"><div></div><div></div><div></div></div>
</body>
<script>let TEXT1=document.createElement("span")TEXT1.innerText="HELLO,WORLD"let conta=document.querySelector('.contaign')conta.insertBefore(TEXT1,conta.children[1])TEXT1.className="TEXT0"conta.removeChild(TEXT1)console.log(conta.children)
</script>
</html>

演示結果

?雖然節點被刪除了，但是節點仍然存在于Web內存中

?

?

?

?

?

?

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

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

相關文章

十二、Hive 函數

十二、Hive 函數

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月1日 專欄&#xff1a;Hive教程 在數據處理的廣闊天地中&#xff0c;我們常常需要對數據進行轉換、計算、清洗或提取特定信息。Hive 提供了強大的內置運算符和豐富的內置函數庫&#xff0c;它們就像魔法師手中的魔法棒&…
閱讀更多...
Linux之Nginx安裝及配置原理篇（一）

Linux之Nginx安裝及配置原理篇（一）

Nginx安裝及配置 前情回顧 首先針對Nginx進程模型&#xff0c;我們回顧一下它的原理機制&#xff0c;我們知道它是通過Master通過fork分發任務節點給予work節點&#xff0c;然后work節點觸發了event事件&#xff0c;之后通過一個access_muttex互斥鎖&#xff0c;來單線程調用我…
閱讀更多...
嵌入式培訓之數據結構學習（五）棧與隊列

嵌入式培訓之數據結構學習（五）棧與隊列

一、棧 &#xff08;一&#xff09;棧的基本概念 1、棧的定義&#xff1a; 注&#xff1a;線性表中的棧在堆區&#xff08;因為是malloc來的&#xff09;&#xff1b;系統中的棧區存儲局部變量、函數形參、函數返回值地址。 2、棧頂和棧底&#xff1a; 允許插入和刪除的一端…
閱讀更多...
深度學習---知識蒸餾（Knowledge Distillation, KD）

深度學習---知識蒸餾（Knowledge Distillation, KD）

一、知識蒸餾的本質與起源 定義&#xff1a; 知識蒸餾是一種模型壓縮與遷移技術&#xff0c;通過將復雜高性能的教師模型&#xff08;Teacher Model&#xff09;所學的“知識”遷移到輕量級的學生模型&#xff08;Student Model&#xff09;&#xff0c;使學生模型在參數量和計…
閱讀更多...
ARP Detection MAC-Address Static

ARP Detection MAC-Address Static

一、ARP Detection&#xff08;ARP檢測&#xff09; ? 定義&#xff1a; ARP檢測是一種防止ARP欺騙攻擊的安全機制。它通過監控或驗證網絡中的ARP報文&#xff0c;來判斷是否存在偽造的ARP信息。 &#x1f50d; 工作原理&#xff1a; 網絡設備&#xff08;如交換機&#xf…
閱讀更多...
基于 Python 的界面程序復現：標準干涉槽型設計計算及仿真

基于 Python 的界面程序復現：標準干涉槽型設計計算及仿真

基于 Python 的界面程序復現&#xff1a;標準干涉槽型設計計算及仿真 在工業設計與制造領域&#xff0c;刀具的設計與優化是提高生產效率和產品質量的關鍵環節之一。本文將介紹如何使用 Python 復現一個用于標準干涉槽型設計計算及仿真的界面程序&#xff0c;旨在幫助工程師和…
閱讀更多...
Python繪制南丁格爾玫瑰圖：從入門到實戰

Python繪制南丁格爾玫瑰圖：從入門到實戰

Python繪制南丁格爾玫瑰圖&#xff1a;從入門到實戰 引言 南丁格爾玫瑰圖&#xff08;Nightingale Rose Chart&#xff09;&#xff0c;也被稱為極區圖&#xff08;Polar Area Chart&#xff09;&#xff0c;是一種獨特的數據可視化方式。這種圖表由弗洛倫斯南丁格爾&#xff…
閱讀更多...
計算機操作系統概要

計算機操作系統概要

不謀萬世者&#xff0c;不?謀?時。不謀全局者 &#xff0c;足謀?域 。 ——陳澹然《寤?》《遷都建藩議》 操作系統 一.對文件簡單操作的常用基礎指令 ls ls 選項 目錄或?件名:羅列當前?錄下的?件 -l&#xff1a;以長格式顯示?件和?錄的詳細信息 -a 或 --all&…
閱讀更多...
＜PLC＞＜視覺＞＜機器人＞基于海康威視視覺檢測和UR機械臂，如何實現N點標定？

＜PLC＞＜視覺＞＜機器人＞基于海康威視視覺檢測和UR機械臂，如何實現N點標定？

前言 本系列是關于PLC相關的博文，包括PLC編程、PLC與上位機通訊、PLC與下位驅動、儀器儀表等通訊、PLC指令解析等相關內容。 PLC品牌包括但不限于西門子、三菱等國外品牌，匯川、信捷等國內品牌。 除了PLC為主要內容外，相關設備如觸摸屏（HMI）、交換機等工控產品，如果有…
閱讀更多...
從專家編碼到神經網絡學習：DTM 的符號操作新范式

從專家編碼到神經網絡學習：DTM 的符號操作新范式

1st author: Paul Soulos paper: Differentiable Tree Operations Promote Compositional Generalization ICML 2023 code: psoulos/dtm: Differentiable Tree Machine 1. 問題與思路 現代深度學習在連續向量空間中取得了巨大成功&#xff0c;然而在處理具有顯式結構&#x…
閱讀更多...
微信小程序第三方代開發模式技術調研與實踐總結

微信小程序第三方代開發模式技術調研與實踐總結

?? 微信小程序第三方代開發模式技術調研與實踐總結 ?? 前言 隨著企業對私有化品牌運營訴求的增加，許多大型客戶希望將原本由 SaaS 平臺統一提供的小程序遷移至自有主體（AppID）下運行，同時又希望繼續沿用 SaaS 平臺的業務服務與數據托管方式。微信開放平臺提供的“小程…
閱讀更多...
開啟智能未來：DeepSeek賦能行業變革之路

開啟智能未來：DeepSeek賦能行業變革之路

前言 在人工智能重構生產關系的2025年&#xff0c;DeepSeek以其革命性的推理能力和Python生態的技術延展性&#xff0c;正在重塑內容創作與數據智能的邊界。本書以"工具迭代思維升維"為雙輪驅動&#xff0c;構建從認知突破到商業落地的完整知識圖譜。 DeepSeek的崛…
閱讀更多...
常見三維引擎坐標軸 webgl threejs cesium blender unity ue 左手坐標系、右手坐標系、坐標軸方向

常見三維引擎坐標軸 webgl threejs cesium blender unity ue 左手坐標系、右手坐標系、坐標軸方向

平臺 / 引擎坐標系類型Up&#xff08;上&#xff09;方向Forward&#xff08;前進&#xff09;方向前進方向依據說明Unity左手坐標系YZtransform.forward 是 Z 軸正方向&#xff0c;默認攝像機朝 Z 看。Unreal Engine左手坐標系ZXUE 的角色面朝 X&#xff0c;默認使用 GetActor…
閱讀更多...
Cold Diffusion: Inverting Arbitrary Image Transforms Without Noise論文閱讀

Cold Diffusion: Inverting Arbitrary Image Transforms Without Noise論文閱讀

冷擴散&#xff1a;無需噪聲的任意圖像變換反轉 摘要 標準擴散模型通常涉及兩個核心步驟&#xff1a;圖像降質 &#xff08;添加高斯噪聲&#xff09;和圖像恢復 &#xff08;去噪操作&#xff09;。本文發現&#xff0c;擴散模型的生成能力并不強烈依賴于噪聲的選擇&#xf…
閱讀更多...
Java并發編程核心組件簡單了解

Java并發編程核心組件簡單了解

一、Lock體系 1. ReentrantLock&#xff08;可重入鎖&#xff09; Lock lock new ReentrantLock(); lock.lock(); try {// 臨界區代碼 } finally {lock.unlock(); }特點&#xff1a;可重入、支持公平/非公平策略優勢&#xff1a;可中斷鎖獲取、定時鎖等待使用場景&#xff1…
閱讀更多...
第二個五年計劃！

第二個五年計劃！

下一階段&#xff01;5年后&#xff01;33歲&#xff01;體重維持在125斤內&#xff01;腰圍74&#xff01; 健康目標&#xff1a; 體檢指標正常&#xff0c;結節保持較小甚至變小&#xff01; 工作目標&#xff1a; 每年至少在一次考評里拿A&#xff08;最高S&#xff0c;A我理…
閱讀更多...
Redis（三） - 使用Java操作Redis詳解

Redis（三） - 使用Java操作Redis詳解

文章目錄 前言一、創建項目二、導入依賴三、鍵操作四、字符串操作五、列表操作六、集合操作七、哈希表操作八、有序集合操作九、完整代碼1. 完整代碼2. 項目下載 前言 本文主要介紹如何使用 Java 操作 Redis 數據庫&#xff0c;涵蓋項目創建、依賴導入及 Redis 各數據類型&…
閱讀更多...
【Folium】使用離線地圖

【Folium】使用離線地圖

文章目錄 相關文獻離線地圖下載Folium 使用離線地圖 相關文獻 Folium — Folium 0.19.5 documentationOffline Map Maker 離線地圖下載 我們使用 Offline Map Maker 進行地圖下載。 特別注意&#xff1a;Folium 默認支持 WGS84 坐標系&#xff0c;建議下載 WGS84 坐標系的地…
閱讀更多...
DeepSearch：字節新一代 DeerFlow 框架

DeepSearch：字節新一代 DeerFlow 框架

項目地址&#xff1a;https://github.com/bytedance/deer-flow/ 【全新的 Multi-Agent 架構設計】獨家設計的 Research Team 機制&#xff0c;支持多輪對話、多輪決策和多輪任務執行。與 LangChain 原版 Supervisor 相比&#xff0c;顯著減少 Tokens 消耗和 API 調用次數&#…
閱讀更多...
Qt—用SQLite實現簡單的注冊登錄界面

Qt—用SQLite實現簡單的注冊登錄界面

1.實現目標 本次實現通過SQLite制作一個簡易的登錄窗口&#xff0c;當點擊注冊按鈕時&#xff0c;登錄窗口會消失&#xff0c;會出現一個新的注冊界面&#xff1b;完成注冊或退出注冊時&#xff0c;注冊窗口會消失&#xff0c;重新出現登錄窗口。注冊過的用戶信息會出現在SQLi…
閱讀更多...
最新文章

Copyright @ 2022~2023