HTML DOM Document querySelector() మాదిరి

定义和用法

querySelector() 方法返回与 CSS 选择器匹配的第一个元素。

如需返回所有匹配项（不仅是第一个匹配项），请改用 querySelectorAll()。

如果选择器无效，则 querySelector() 和 querySelectorAll() 都会抛出 SYNTAX_ERR 异常。

实例

例子 1

获取第一个

元素：

document.querySelector("p");

స్వయంగా ప్రయత్నించండి

例子 2

获取 class="example" 的第一个元素：

document.querySelector(".example");

స్వయంగా ప్రయత్నించండి

例子 3

获取 class="example" 的第一个

元素：

document.querySelector("p.example");

స్వయంగా ప్రయత్నించండి

例子 4

更改 id="demo" 的元素的文本：

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

స్వయంగా ప్రయత్నించండి

例子 5

选择第一个其父元素是

元素的

元素：

document.querySelector("div > p");

స్వయంగా ప్రయత్నించండి

例子 6

选择第一个拥有 "target" 属性的 元素：

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 7

మొదటి <h3> లేదా మొదటి <h4> ను ఎంచుకోండి:

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 8

మొదటి <h3> లేదా మొదటి <h4> ను ఎంచుకోండి:

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

స్వయంగా ప్రయత్నించండి

సంక్లిష్టత

document.querySelector(cssSelectors)

పారామీటర్

పారామీటర్ వివరణ
cssSelectors

అవసరమైనది. ఒకటి లేదా పలు సిఎస్ఎస్ సెలెక్టర్లు.

సిఎస్ఎస్ సెలెక్టర్లు id, క్లాస్, రకం, అట్రిబ్యూట్, అట్రిబ్యూట్ విలువ వంటివి ద్వారా హెచ్టిఎంఎల్ మెటీరియల్స్ ను ఎంచుకుంటాయి.

పూర్తి జాబితా కొరకు మా వెబ్‌సైట్ ని సందర్శించండి CSS ఎంపికకర్త పరిచయం.

పలు సెలెక్టర్లు ఉన్నట్లయితే, ప్రతి సెలెక్టర్ కు కొమా వినియోగించండి (ప్రక్కన ప్రతిమాను చూడండి).

తిరిగి వచ్చే విలువ

రకం వివరణ
ఆబ్జెక్ట్

సిఎస్ఎస్ సెలెక్టర్ తో మొదటి మెటీరియల్ యొక్క నోడులెస్ట్ కలిగి ఉంటుంది.

ఏదీ లభించనిది అయితే null తిరిగి ఇస్తుంది.

హెచ్టిఎంఎల్‌కలెక్షన్ మరియు నోడులెస్ట్ యొక్క తేడా

NodeList 和 HTMLcollection 非常相似。

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

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

HTMLCollection 是文档元素的集合。

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

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

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

HTMLCollection 始终是实时的集合。

例如：如果将

  • 元素添加到 DOM 中的列表，则 HTMLCollection 中的列表也会发生变化。

    NodeList 通常是静态的集合。

    例如：如果将

  • 元素添加到 DOM 中的列表，则 NodeList 中的列表不会改变。

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

    querySelectorAll() 方法返回静态 NodeList。

    childNodes 属性返回实时 NodeList。

    • బ్రౌజర్ మద్దతు

    document.querySelector() ఇది DOM Level 1 (1998) లక్షణం.

    అన్ని బ్రౌజర్లు దానిని మద్దతు ఇస్తాయి:

    చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్‌ఫాక్స్ సఫారీ ఓపెరా
    చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్‌ఫాక్స్ సఫారీ ఓపెరా
    మద్దతు 9-11 మద్దతు మద్దతు మద్దతు మద్దతు

    సంబంధిత పేజీలు

    పాఠ్యక్రమం:

    CSS ఎంపికకర్త

    CSS ఎంపికకర్త పరిచయం

    HTML DOM NodeList పరిచయం

    QuerySelector పద్ధతికి ఇది ఉంది:

    querySelector() పద్ధతి

    querySelectorAll() పద్ధతి

    GetElement పద్ధతికి ఇది ఉంది:

    getElementById() పద్ధతి

    getElementsByTagName() పద్ధతి

    getElementsByClassName() పద్ధతి