HTML DOM Document querySelector() Metodong

Paglilinaw at Paggamit

querySelector() Ang paraan ay binibigay ng unang tumugma sa CSS selector.Unangelemento.

Para sa pagbalik ngLahatmga tumugma, gamitin ang querySelectorAll().

Kung ang selector ay hindi wasto, querySelector() 和 querySelectorAll() ay magbibigay ng SYNTAX_ERR Mga kagipitan.

Eksemplo

Halimbawa 1

Hahanapin ang unang <p> elemento:

document.querySelector("p");

Subukan nyo ito sa sarili

Halimbawa 2

Hahanapin ang unang elemento na may klase="example":

document.querySelector(".example");

Subukan nyo ito sa sarili

Halimbawa 3

Hahanapin ang unang <p> elemento na may klase="example":

document.querySelector("p.example");

Subukan nyo ito sa sarili

Halimbawa 4

Bagoon ang teksto ng elemento na may id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Subukan nyo ito sa sarili

Halimbawa 5

Piliin ang unang <p> elemento na ang kanyang magulang ay <div> elemento:

document.querySelector("div > p");

Subukan nyo ito sa sarili

Halimbawa 6

Piliin ang unang <a> elemento na may "target" atributo:

document.querySelector("a[target]");

Subukan nyo ito sa sarili

Halimbawa 7

Piliin ang unang <h3> o unang <h4>:

<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Subukan nyo ito sa sarili

Halimbawa 8

Piliin ang unang <h3> o unang <h4>:

<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Subukan nyo ito sa sarili

Gramata

document.querySelector(cssSelectors)

Parameter

Parameter Paglalarawan
cssSelectors

Mandahil. Isang o maraming CSS selector.

Ang CSS selector ay pinili ang mga HTML elemento base sa id, klase, uri, atributo, halaga ng atributo at iba pa.

Para sa kumpleto na listahan, bisitahin nyo ang aming CSS Selector Reference Manual.

Para sa maraming selector, gamitin ang kumukomong paraan upang maghiwalay ang bawat selector (tingnan ang halimbawa sa itaas ng pahina).

Bilang balik na halaga

Uri Paglalarawan
Objeto

Nakakabit sa unang elemento na tumugma sa CSS selector.

Kung wala na ang tumugma, ibabalik ang null.

Pagkakaiba ng HTMLCollection at NodeList

NodeList 和 HTMLcollection 非常相似。

两者都是从文档中提取的节点（元素）的类似数组的集合（列表）。可以通过索引号（下标）访问节点。索引从 0 开始。

两者都有 length 属性，它返回列表（集合）中元素的数量。

HTMLCollection 是文档元素的集合。

NodeList 是文档节点（元素节点、属性节点和文本节点）的集合。

HTMLCollection 项目可以通过它们的名称、id 或索引号来访问。

NodeList 项目只能通过它们的索引号访问。

HTMLCollection 始终是实时的集合。

例如：如果将 <li> 元素添加到 DOM 中的列表，则 HTMLCollection 中的列表也会发生变化。

NodeList 通常是静态的集合。

例如：如果将 <li> 元素添加到 DOM 中的列表，则 NodeList 中的列表不会改变。

getElementsByClassName() 和 getElementsByTagName() 方法都返回实时 HTMLCollection。

querySelectorAll() 方法返回静态 NodeList。

childNodes 属性返回实时 NodeList。

浏览器支持

document.querySelector() 是 DOM Level 1 (1998) 特性。

所有浏览器都支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相关页面

教程：

CSS Selector

CSS Selector Reference Manual

HTML DOM NodeList Reference Manual

QuerySelector 方法：

querySelector() 方法

querySelectorAll() 方法

GetElement 方法：

getElementById() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法