HTML DOM Element getElementsByClassName() ਮੈਥਡ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

getElementsByClassName() ਮੈਥਡ ਇੱਕ ਨਿਰਦਿਸ਼ਟ ਕਲਾਸ ਨਾਮ ਵਾਲੇ ਉਪ ਅੰਗਾਂ ਦੀ ਸੰਗਠਨ ਵਾਪਸ ਦੇਵੇਗਾ ਅਤੇ NodeList ਆਬਜੈਕਟ ਵਾਂਗ ਹੋਵੇਗਾ。

ਇਹ ਦੇਖੋ:

classList ਪ੍ਰਤੀਯੋਗਿਤਾ

className ਪ੍ਰਤੀਯੋਗਿਤਾ

querySelector() ਮੈਥਡ

querySelectorAll() ਮੈਥਡ

getElementsByTagName() ਮੈਥਡ

ایچ تی ایم ال ڈوم اسٹائل آپج

ਸਿੱਖਿਆ ਸਿਲਸਿਲਾ:

CSS گرامر

CSS سلیکٹر

CSS سلیکٹر مرجع دستاویز

NodeList

NodeList ਇੱਕ ਅਨੁਰੂਪ ਸੂਚੀ (ਲਿਸਟ) ਦਾ ਨੋਡ ਸੰਗਠਨ ਹੈ。

ਤੁਸੀਂ ਨੋਡ ਵਿੱਚ ਸੰਖਿਆ (ਇੰਡੈਕਸ) ਰਾਹੀਂ ਪਹੁੰਚ ਸਕਦੇ ਹੋ। ਇੰਡੈਕਸ 0 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ。

length ਪ੍ਰਤੀਯੋਗਿਤਾਸੂਚੀ ਵਿੱਚ ਨੋਡ ਦੀ ਗਿਣਤੀ ਵਾਪਸ ਦੇਵੋ。

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

class="child" ਨਾਲ ਪਹਿਲੀ ਸੂਚੀ ਵਿੱਚ ਟੈਕਸਟ ਬਦਲੋ:

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

ਸਵੈ ਲਾਭ ਕਰੋ

ਉਦਾਹਰਣ 2

"myDIV" ਵਿੱਚ class="child" ਦੇ ਅੰਗਾਂ ਦੀ ਗਿਣਤੀ:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

ਸਵੈ ਲਾਭ ਕਰੋ

ਉਦਾਹਰਣ 3

ਕਲਾਸ="child" ਦੀ ਦੂਜੀ ਅੰਗ ਦਾ ਅਕਾਰ ਬਦਲੋ:

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

ਸਵੈ ਲਾਭ ਕਰੋ

ਉਦਾਹਰਣ 4

ਕਲਾਸ="example" ਦੇ ਦੂਜੇ ਏਜੈਂਟ ਵਿੱਚ "child" ਅਤੇ "color" ਕਲਾਸ ਦੇ ਪਹਿਲੇ ਏਜੈਂਟ ਦਾ ਮੋਟਾਈ ਬਦਲੋ:

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

ਸਵੈ ਲਾਭ ਕਰੋ

ਉਦਾਹਰਣ 5

ਕਲਾਸ="child" ਦੇ "myDIV" ਵਿੱਚ ਸਾਰੇ ਏਜੈਂਟਾਂ ਦੇ ਰੰਗ ਬਦਲੋ:

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

ਸਵੈ ਲਾਭ ਕਰੋ

ਵਿਆਕਰਣ

element.getElementsByClassName(classname)

ਪੈਰਾਮੀਟਰ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
classname

ਲੋੜੀਂਦਾ ਹੈ। ਬੱਚੇ ਏਜੈਂਟ ਦੀ ਕਲਾਸ ਨਾਮ

ਬਹੁਤ ਸਮਾਂ ਅਤੇ ਨਾਮ ਦੇ ਦਰਮਿਆਨ ਸਪੇਸ ਨਾਲ ਵੰਡੇ ਹੋਣ (ਉਦਾਹਰਣ: "child color")

ਵਾਪਸ ਦਿੱਤਾ ਗਿਆ ਮੁੱਲ

ਪ੍ਰਕਾਰ ਵਰਣਨ
NodeList

ਦਿੱਤੇ ਕਲਾਸ ਨਾਮ ਦੇ ਏਜੈਂਟ ਦੇ ਬੱਚੇ ਏਜੈਂਟ ਹਨ。

ਏਜੈਂਟ ਉਨ੍ਹਾਂ ਦੇ ਸਰੋਤ ਕੋਡ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਦੀ ਕਿਸਮ ਨੂੰ ਕਰਕੇ ਕਰਵਾਉਂਦੇ ਹਨ。

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

element.getElementsByClassName() ਇਹ DOM Level 1 (1998) ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ。

ਸਾਰੇ ਬਰਾਊਜ਼ਰਸ ਇਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਦੇ ਹਨ:

ਚਰਮੇ IE ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਮੇ IE ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ 9-11 ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ