JavaScript HTML DOM ਐਲੀਮੈਂਟ

ਇਸ ਖੰਡ ਵਿੱਚ, ਤੁਸੀਂ HTML ਪੇਜ ਵਿੱਚ ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਲੱਭਣ ਅਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੇ ਤਰੀਕਿਆਂ ਸਿੱਖੋਗੇ。

ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟ ਲੱਭਣਾ

ਆਮ ਤੌਰ 'ਤੇ, JavaScript ਰਾਹੀਂ, ਤੁਸੀਂ HTML ਐਲੀਮੈਂਟਾਂ 'ਤੇ ਕੰਮ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, ਇਸ ਲਈ ਪਹਿਲਾਂ ਇਨ੍ਹਾਂ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਲੱਭਣਾ ਹੈ। ਇਸ ਕੰਮ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਕਈ ਤਰੀਕੇ ਹਨ:

  • ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟ ਨੂੰ id ਰਾਹੀਂ ਲੱਭੋ
  • ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਟੈਗ ਨਾਮ ਰਾਹੀਂ ਲੱਭੋ
  • ਐੱਚਟੀਐੱਮਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਕਲਾਸ ਰਾਹੀਂ ਲੱਭੋ
  • ਐੱਚਟੀਐੱਮਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ CSS ਚੋਣਕਰਤਾ ਰਾਹੀਂ ਲੱਭੋ
  • ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟ ਨੂੰ HTML ਆਬਜੈਕਟ ਕੈਟਾਲੋਗ ਰਾਹੀਂ ਲੱਭੋ

ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟ ਨੂੰ id ਰਾਹੀਂ ਲੱਭੋ

DOM ਵਿੱਚ ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟ ਲੱਭਣ ਦਾ ਸਭ ਤੋਂ ਸਰਲ ਤਰੀਕਾ ਹੈ, ਇਹ ਐਲੀਮੈਂਟ ਦੇ id ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਹੈ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ id="intro" ਵਾਲੇ ਐਲੀਮੈਂਟ ਨੂੰ ਲੱਭਣਾ ਹੈ:

ਇੰਸਟੈਂਸ

var myElement = document.getElementById("intro");

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਜੇਕਰ ਐਲੀਮੈਂਟ ਲੱਭਿਆ ਗਿਆ ਤਾਂ, ਇਹ ਮੱਥਦਾਰ ਐਲੀਮੈਂਟ ਦਾ ਆਪਣਾ ਆਬਜੈਕਟ ਵਾਪਸ ਦਿੰਦਾ ਹੈ (ਮਾਈਐੱਲੀਮੈਂਟ ਵਿੱਚ)

ਜੇਕਰ ਐਲੀਮੈਂਟ ਨਾ ਲੱਭਿਆ ਗਿਆ ਤਾਂ, myElement ਵਿੱਚ null.

ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਟੈਗ ਨਾਮ ਰਾਹੀਂ ਲੱਭੋ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਸਾਰੇ <p> ਐਲੀਮੈਂਟ:

ਇੰਸਟੈਂਸ

var x = document.getElementsByTagName("p");

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ id="main" ਵਾਲੇ ਐਲੀਮੈਂਟ ਨੂੰ ਲੱਭਣਾ ਹੈ, ਫਿਰ "main" ਵਿੱਚ ਸਾਰੇ <p> ਐਲੀਮੈਂਟ:

ਇੰਸਟੈਂਸ

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਐੱਚਟੀਐੱਮਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਕਲਾਸ ਰਾਹੀਂ ਲੱਭੋ

ਅਗਰ ਤੁਸੀਂ ਇੱਕ ਸਮਾਨ ਕਲਾਸ ਵਾਲੇ ਸਾਰੇ ਐੱਚਟੀਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਲੱਭਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ getElementsByClassName().

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ class="intro" ਵਾਲੇ ਸਾਰੇ ਐਲੀਮੈਂਟਾਂ ਦੀ ਸੂਚੀ ਵਾਪਸ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ:

ਇੰਸਟੈਂਸ

var x = document.getElementsByClassName("intro");

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ ਉਸ ਤੋਂ ਪੁਰਾਣੇ ਵਰਜਿਤ ਹੈ。

ਐੱਚਟੀਐੱਮਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ CSS ਚੋਣਕਰਤਾ ਰਾਹੀਂ ਲੱਭੋ

ਅਗਰ ਤੁਸੀਂ ਨਿਰਦਿਸ਼ਟ ਸੀਐੱਸਐੱਸ ਚੋਣਕਰਤਾ (id, ਕਲਾਸ, ਤਰੀਕਾ, ਗੁਣ, ਗੁਣ ਮੁੱਲ ਆਦਿ) ਨਾਲ ਮੇਲ ਖਾਣ ਵਾਲੇ ਸਾਰੇ ਐੱਚਟੀਐੱਮਐੱਲ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਲੱਭਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ querySelectorAll() ਮੱਥਦਾਰ ਵਰਜਿਤ ਹੈ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ class="intro" ਦੇ ਸਾਰੇ <p> ਐਲੀਮੈਂਟ ਸੂਚੀ:

ਇੰਸਟੈਂਸ

var x = document.querySelectorAll("p.intro");

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

querySelectorAll() ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ ਉਸ ਤੋਂ ਪੁਰਾਣੇ ਵਰਜਿਤ ਹੈ。

HTML ਆਬਜੈਕਟ ਸਿਲੈਕਟਰ ਰਾਹੀਂ HTML ਆਬਜੈਕਟ ਲੱਭੋ

ਇਸ ਇੰਸਟੈਂਸ ਵਿੱਚ, id="frm1" ਦੇ form ਐਲੀਮੈਂਟ ਨੂੰ ਖੋਜਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ forms ਕਲੈਸਟਰ ਵਿੱਚ, ਇਸ ਤੋਂ ਸਾਰੇ ਐਲੀਮੈਂਟ ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ:

ਇੰਸਟੈਂਸ

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਹੇਠ ਲਿਖੇ HTML ਆਬਜੈਕਟ (ਅਤੇ ਆਬਜੈਕਟ ਕਲੈਸਟਰ) ਵੀ ਪਹੁੰਚਯੋਗ ਹਨ: