原生js學習 選擇dom

2022-02-15 06:20:11 字數 910 閱讀 7249

連bootstrap5 都拋棄jquery了,重新使用原生js來寫,所以最近在學習原生js。

一、選擇dom元素:

id

1 let sure=document.getelementbyid('

sure

');

返回值:是乙個dom元素,因為id在乙個文件(document)中,是唯一,所以返回乙個dom物件。

class

1  let mask=document.getelementsbyclassname('

mask

')[0]

返回值:類陣列的元素集合

因為classname在乙個文件中並不是唯一,我們在使用document查詢是從文件的根節點進行查詢,返回是類陣列物件,即nodelist 類陣列有length 以及可以根據下標獲取元素。

我們也可以修改查詢的起點。比如上面的是document開始,我們可以從div或者更小的區域性元素進行查詢。

queryselector

上面的方法並不靈活,有時候我們根據css選擇器來進行選擇。我們可以使用queryselector(css選擇器);來進行選擇元素。

let clkbtns=document.queryselector('

.wrap button

');

返回值:匹配的第乙個html元素。

queryselectorall()

如果我們查詢一組元素使用如上方法。返回的也是類陣列。

二、dom元素的特性都包含在屬性中。

let box=document.queryselector('

#box');

reset.onclick=function (e)

包含事件以及樣式以及style等等。

js原生dom操作

1.建立元素 var a document.createelement a var node1 document.createelement div var node2 document.createtextnode hello world 2.新增子元素 刪除子元素 document.body.r...

原生JS操作DOM

複製 var one document.queryselector one one.style.color blue 複製 1.getelementsbyclassname 2.queryselectorall 複製 因為js獲得的節點中返回所有類是乙個陣列,所以要對其進行迴圈控制 用迴圈長度的方式...

js原生API 查詢dom

node是乙個介面,許多dom型別從這個介面繼承,並允許類似地處理 或測試 這些各種型別。以下介面都從node繼承其方法和屬性 和 之類的元素,其他等等。其也為文件 document 提供了全域性性的函式,例如獲取頁面的url 在文件中建立新的 element 的函式。它為文件提供全域性的函式,像如...