js原生API 查詢dom

2022-07-29 13:12:12 字數 2827 閱讀 2896

node是乙個介面,許多dom型別從這個介面繼承,並允許類似地處理(或測試)這些各種型別。

以下介面都從node繼承其方法和屬性:

和 之類的元素,其他等等。其也為文件(document)提供了全域性性的函式,例如獲取頁面的url、在文件中建立新的 element 的函式。它為文件提供全域性的函式,像如何獲取頁面的url和在文件中建立新的元素。" href="" rel="noopener">document,element,characterdata(whichtext,comment, andcdatasectioninherit),processinginstruction,documentfragment,documenttype,notation,entity,entityreference

在方法和屬性不相關的特定情況下,這些介面可能返回null。它們可能會丟擲異常 - 例如,當將子節點新增到沒有子節點的節點型別時。

eventtarget 是乙個由可以接收事件的物件實現的介面,並且可以為它們建立偵聽器。

element,和 之類的元素,其他等等。其也為文件(document)提供了全域性性的函式,例如獲取頁面的url、在文件中建立新的 element 的函式。它為文件提供全域性的函式,像如何獲取頁面的url和在文件中建立新的元素。" href="" rel="noopener">documentwindow是最常見的事件目標,但是其他物件也可以是事件目標,比如xmlhttprequest,or element), an audio destination, or an intermediate processing module (e.g. a filter like biquadfilternode, or a volume control like gainnode)." href="" rel="noopener">audionodeaudiocontext等等。

許多事件目標(包括元素,文件和 window)還支援通過 on... 屬性和屬性設定事件處理程式。

document介面表示在瀏覽器中載入的任何網頁,並作為到網頁內容的入口點,這是 dom 樹。 dom樹包括諸如) 表示的是html文件的主體內容,任何乙個html文件,只允許存在乙個 元素。" href="" rel="noopener">之類的元素,其他等等。其也為文件(document)提供了全域性性的函式,例如獲取頁面的url、在文件中建立新的 element 的函式。它為文件提供全域性的函式,像如何獲取頁面的url和在文件中建立新的元素。

document介面也繼承自nodeeventtarget介面。

三種返回形式:html,htmlcollection,htmllist

3.1 html

document.getelementbyid 返回html

document.queryselector   返回html

3.2 htmlcollection

htmlcollection 是乙個介面,表示 html 元素的集合,它提供了可以遍歷列表的方法和屬性。
document.getelementsbyclassname  返回htmlcollection
document.getelementsbytagname    返回htmlcollection
document.forms等屬性
返回htmlcollection

document.getelementsbyname      返回htmllist
document.queryselectorall     返回htmllist

123

1、htmlcollection下可以使用 ,通過編號或名稱索引乙個 htmlcollection 物件,也可以呼叫 item() 方法和 nameditem() 方法。

屬性 length

唯讀屬性,返回指示列表長度的整數(即集合中的元素數)。

返回集合中 指定index位置的元素,name 屬性或 id 屬性具有指定值的元素(節點)

item()

返回集合中指定位置的元素(節點)。

nameditem()

返回集合中 name 屬性或 id 屬性具有指定值的元素(節點)。

2、htmlcollection下可以使用 ,通過編號乙個 htmlcollection 物件,也可以呼叫 item() 方法,屬性 length

//

nodelist

var nodelist=document.queryselectorall('#form1')

console.log(nodelist[0],nodelist.item(0))

//

配合for 遍歷dom

var js_set=document.getelementbyid('sel')

var x=js_set.childnodes;

for (i=0;i)

好好學習,天天向上!!

原生dom查詢 5個API

1.按id查詢 var elem document.getelementbyid id值 2.按標籤名查詢 向下爬樹的主要手段 var elems parent.getelementsbytagname 標籤名 elems也是動態集合 不僅查直接子節點,同時可獲得間接子節點 3.按name屬性查詢 ...

JS中常見原生DOM操作API

幾種物件 node node是乙個介面,中文叫節點,很多態別的dom元素都是繼承於它,都共享著相同的基本屬性和方法。常見的node有 element,text,attribute,comment,document 等 所以要注意 節點 和 元素 的區別,元素屬於節點的一種 node有乙個屬性 nod...

JS中常見原生DOM操作API

節點查詢api document.getelementbyid 根據id查詢元素,大小寫敏感,如果有多個結果,只返回第乙個 document.getelementsbyclassname 根據類名查詢元素,多個類名用空格分隔,返回乙個 htmlcollection 注意相容性為ie9 含 另外,不僅...