JS擷取DOM元素的方法(8種)
通過ID擷取(getElementById)
通過name屬性(getElementsByName)
通過标簽名(getElementsByTagName)
通過類名(getElementsByClassName)
通過選擇器擷取一個元素(querySelector)
通過選擇器擷取一組元素(querySelectorAll)
擷取html的方法(document.documentElement)
document.documentElement是專門擷取html這個标簽的
擷取body的方法(document.body)
document.body是專門擷取body這個标簽的。
1.通過ID擷取(getElementById)
document.getElementById('id')
上下文必須是document。
必須傳參數，參數是string類型，是擷取元素的id。
傳回值隻擷取到一個元素，沒有找到傳回null。
2.通過name屬性(getElementsByName)
document.getElementsByName('name')
上下文必須是document。内容
必須傳參數，參數是是擷取元素的name屬性。
傳回值是一個類數組，沒有找到傳回空數組。
3.通過标簽名(getElementsByTagName)
var obj = document.getElementsByTagName('div');
for(let i = 0; i
obj[i].onclick = function(e){
console.log(i)
}
}
上下文可以是document，也可以是一個元素，注意這個元素一定要存在。
參數是是擷取元素的标簽名屬性，不區分大小寫。
傳回值是一個類數組，沒有找到傳回空數組
4.通過類名(getElementsByClassName
var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated
上下文可以是document，也可以是一個元素。
參數是元素的類名。
傳回值是一個類數組，沒有找到傳回空數組。
5.通過選擇器擷取一個元素(querySelector)
document.querySelector('.animated')
上下文可以是document，也可以是一個元素。
參數是選擇器，如：”div .className”。
傳回值隻擷取到第一個元素。
6.通過選擇器擷取一組元素(querySelectorAll)
document.querySelector('.animated')
上下文可以是document，也可以是一個元素。
參數是選擇器，如：”div .className”。
傳回值是一個類數組。
JS擷取HTML DOM元素的8種方法
什麼是HTML DOM 文檔對象模型(Document Object Model),是W3C組織推薦的處理可擴充置智語言的标準程式設計接口.簡單了解就是HTML DOM 是關于如何擷取.修改.添加或删除 ...
原生js擷取 一個dom元素距離頁面可視區域的位置值 -- getBoundingClientRect
getBoundingClientRect() 這個方法傳回一個矩形對象,包含四個屬性:left.top.right和bottom.分别表示元素各邊與頁面上邊和左邊的距離. var box=docum ...
JS擷取HTML DOM元素的方法
JS擷取HTML DOM元素有八種方法: 1.根據id擷取标簽元素: document.getElementById("id名"); 2.根據标簽名擷取标簽清單: document ...
原生JS—實作圖檔循環切換的兩種方法
今天我們主要講講如何使用原生JS實作圖檔的循環切換的方法.多餘的話我們就不多說了,我們一個一個開始講吧. 1 原生JS實作圖檔循環切換 -- 方法一 在上栗子之前我們先簡單介紹一下所用的一些知識點. ...
js中常用追加元素的幾種方法
...
JS擷取URL中參數值的4種方法
方法一:正則法 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(& ...
【JS新手教程】JS擷取目前星期幾的幾種方法
該文通過擷取星期幾的幾種方法,介紹JS裡的數組,判斷,和字元串截取,可以當作新手教程看,小白也看的懂.擷取星期幾,可通過Date()對象的getDay()擷取,擷取的是一個數字,對應的是0,1,2,3 ...
js擷取螢幕以及元素寬高的方法
一.window相關 網頁正文部分上:window.screenTop 網頁正文部分左:window.screenLeft 螢幕分辨率的高:window.screen.height 螢幕分辨率的寬:w ...
js中删除數組元素的幾種方法
1:js中的splice方法 splice(index,len,[item]) 注釋:該方法會改變原始數組. splice有3個參數,它也可以用來替換/删除/添加數組内某一個或者幾個值 inde ...
随機推薦
公用表表達式(CTE)引發的改變執行順序同WHERE條件順序引發的bug
以下模拟一下CTE出錯 /*測試環境 Microsoft SQL Server 2008 R2 (RTM) - 10.50.1600.1 (X64) Apr 2 2010 15:48:46 Copyr ...
zoj 2334 Monkey King/左偏樹+并查集
原題連結:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1389 大緻題意:N隻互相不認識的猴子(每隻猴子有一個戰鬥力值) 兩隻 ...
WPF 漸隐漸現切換背景圖檔
最近學習WPF,嘗試着自己做一些小玩意,也遇到了一些問題,于是整理記錄以便日後查閱. 我們都知道WPF可以實作一些很炫的效果,然而有時候為達到這個目的卻并不是一件很容易的事情.比如:在軟體中我希望能夠 ...
重新開機VirtualBox裡面的系統提示VT-x features locked or unavailable in MSR錯誤
有次不小心設定了一下virtualbox裡面的一些配置,然後啟動系統時出現了如下提示 在網上找了一些資料嘗試了一些方法偶然有一次成功 原來是自己把那個cpu個數設定成了2,改成1就好了,不知道為什麼做 ...
Libev學習筆記2
這一節根據官方文檔給出的簡單示例,深入代碼内部,了解其實作機制.示例代碼如下: int main (void) { struct ev_loop *loop = EV_DEFAULT; ev_io_i ...
每周分享一 之 webSocket
一:什麼是webSocket ? webSocket是HTML5出的新協定,WebSocket協定支援,在受控環境中運作不受信任代碼的用戶端與選擇了該代碼通信的遠端主機之間進行雙向通信. 簡單翻譯一下 ...
[模拟賽] T2 不等數列
Description 将1到n任意排列,然後在排列的每兩個數之間根據他們的大小關系插入">"和"
【DFS】n皇後問題
回溯: 遞歸調用代表開啟一個分支,如果希望這個分支傳回後某些資料恢複到分支開啟前的狀态以便重新開始,就要使用到回溯技巧,全排列的交換法,數獨,部分和,用到了回溯.下一個狀态在開始之前需要利用到之前的狀 ...
【原創】研發應該懂的binlog知識(下)
引言 這篇是的下半部分.在本文,我會闡述一下binlog的結構,以及如何使用java來解析binlog. 不過,話說回來,其實嚴格意義上來說,研發應該 ...
【leetcode】2-AddTwoNums
problem: Add Two Numbers 需要學習的是單向連結清單的基礎使用: