HTML DOM Елементи

Наоѓање на HTMLелементи

Во HTML DOM, објектот Element претставува HTML елемент, како P, DIV, A, TABLE или кој било друг HTML елемент.

Честопати, со JavaScript, сакате да манипулирате со HTML-елементи.

За да го направите тоа, прво мора да ги пронајдете елементите. Постојат неколку начини да го направите ова:

- Наоѓање на HTML-елементи по id
- Наоѓање на HTML-елементи по име на ознака (tag)
- Наоѓање на HTML елементи по име на класа
- Наоѓање на HTML-елементи по CSS селектори
- Наоѓање на елементи на HTML по HTML збирки на објекти

Наоѓање на елементот HTML преку ID

Најлесен начин да пронајдете HTML елемент во DOM, е со користење на елементот id.

Овој пример го наоѓа елементот со id = "demo":

const element = document.getElementById("demo"); или
var element = document.getElementById("demo");

Ако елементот е најден, методот ќе го врати елементот како објект (во element).
Ако елементот не е пронајден, еlement ќе содржи нула.

Наоѓање на елементи во HTML по име на ознака (tag)
Ако сакате да го пронајдете HTML елементот што одговара на одреден tag - ознака

    const element = document.getElementsByTagName(ime_tag) или
   var element = document.getElementsByTagName(ime_tag)

Наоѓање на елементи во HTML по име на класа

Ако сакате да ги пронајдете сите HTML елементи со исто име на класа, користете

    const element = document.getElementsByClassName (ime_klasa) или
    var element = document.getElementsByClassName (ime_klasa)

Наоѓање на елементи во HTML по CSS селектор

Ако сакате да ги пронајдете сите HTML елементи што одговараат на одреден CSS селектор (ID, имиња на класи, типови, атрибути, вредности на атрибути, итн.), Користете го методот querySelectorAll ().

Овој пример враќа список на сите <p> елементи со class = "intro".

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

Наоѓање на елементи во HTML според збирки на објекти на HTML

Овој пример ги наоѓа елементите во формата со id = "frm1", и ги прикажува сите вредности на најдените елементи.

Пример

<html>

<body>

function funk() {

const x = document.forms["frm1"];

let text = "";

for (let i = 0; i < x.length; i++) {

text += x.elements[i].value + "<br>";

}

document.getElementById("demo").innerHTML = text;

}

</script>

<p id="demo">nesto</p>

</form>

</body>

</html>