HTML DOM
примери со елементи - промена, креирање и
бришење
Наоѓање на HTMLелементи
Честопати, со JavaScript, сакате да манипулирате со HTML-елементи.
За да го направите тоа, прво мора да ги пронајдете елементите. Постојат неколку
начини да го направите ова:
- Наоѓање на HTML-елементи по id
- Наоѓање на HTML-елементи по име на ознака (tag)
- Наоѓање на HTML елементи по име на класа
- Наоѓање на HTML-елементи по CSS селектори
- Наоѓање на елементи на HTML по HTML збирки на објекти
Наоѓање на елементот HTML преку ID
Најлесен начин да пронајдете HTML елемент во DOM, е со користење на елементот
id.
Овој пример го наоѓа елементот со id = "intro":
Пример 1.
Промена на
боја на елемент - параграф во HTML по ID
со JavaScript во Head
<html>
<head>
<title>getElementById primer</title>
<script>
function smeniBoja(novaBoja) {
var elem = document.getElementById('tekst');
elem.style.color = novaBoja;
}
</script>
</head>
<body>
<p id="tekst">Bilo kakov tekst</p>
<button onclick="smeniBoja('blue');">plava</button>
<button onclick="smeniBoja('red');">crvena</button>
</body>
</html>
Пример 2 Промена на
содржина на елемент - параграф во HTML по ID
со JavaScript во Head
<!DOCTYPE html>
<html>
<head>
<script>
function
mojaFunkcija() {
document.getElementById("demo").innerHTML = "Paragrafot e so smeneta sodrzina.";
}
</script>
</head>
<body>
<h2>JavaScript vo head </h2>
<p id="demo">Promena na sodrzinata na paragraf.</p>
<button type="button" onclick="mojaFunkcija()">Pritisni
</button>
</body>
</html>
Пример 3 Промена на
содржина на елемент - параграф во HTML по ID
со JavaScript во Body
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript vo Body</h2>
<p id="demo"> Paragraf.</p>
<button type="button" onclick="mojaFunkcija()">Pritisni
</button>
<script>
function mojaFunkcija() {
document.getElementById("demo").innerHTML = "Paragrafot e so smenet tekst.";
}
</script>
</body>
</html>
Пример 4 Промена на содржина на
елемент - параграф во HTML по ID
со JavaScript во
екстерна датотека mojaSkripta.js
<!DOCTYPE html>
<html>
<body>
<h2>Eksterna JavaScript</h2>
<p id="demo"> Paragraf.</p>
<button type="button" onclick="mojaFunkcija()">Pritisni
</button>
<p>(mojaFunkcija e smestena vo eksterna datoteka "mojaSkripta.js")</p>
<script src="mojaSkripta.js"></script>
</body>
</html>
Пример 5
Промена на содржина на елемент - параграф во HTML по
ID со JavaScript во
екстерна датотека mojaSkripta.js
сместена во екстерен фолдер Skripti
<!DOCTYPE html>
<html>
<body>
<h2>Eksterna JavaScript</h2>
<p id="demo"> Paragraf.</p>
<button type="button" onclick="mojaFunkcija()">Pritisni
</button>
<p>(mojaFunkcija e smestena vo eksterna datoteka "mojaSkripta.js")</p>
<script src="Skripti/mojaSkripta.js"></script>
</body>
</html>
Наоѓање на елементи во HTML по име
Пример 6.
<html>
<head> <h5>DOM Metodi </h5> </head>
<body>
<script type="text/javascript">
function vkupnoelementi()
{
var vkupno=document.getElementsByName("pol");
alert("Vkupno elementi vo Radio
Button:"+vkupno.length);
}
</script>
<form>
Masko:<input type="radio" name="pol" value="masko">
Zenski:<input type="radio" name="pol" value="zensko">
<input type="button" onclick="vkupnoelementi()"
value="Vkupno elementi vo Radio Button">
</form>
</body>
</html>
Наоѓање на елементи во HTML по име на ознака (tag)
Пример 7. Го наоѓа бројот на елементи од типот параграф
- p, од типот Heading2 и Heading3
<html>
<head>
<script type="text/javascript">
function broip(){
var vkupnop=document.getElementsByTagName("p");
alert("vkupno h2 tagovi se: "+vkupnop.length);
}
function broih2(){
var vkupnoh2=document.getElementsByTagName("h2");
alert("vkupno h2 tagovi se:
"+vkupnoh2.length);
}
function broih3(){
var vkupnoh3=document.getElementsByTagName("h3");
alert("vkupno h3 tagovi se:
"+vkupnoh3.length);
}
</script>
</head>
<body>
<p> obicen paragraf</p>
<h2>Ova e h2 tag</h2>
<h2>Ova e h2 tag</h2>
<h3>Ova e h3 tag</h3>
<h3>Ova e h3 tag</h3>
<h3>Ova e h3 tag</h3>
<button onclick="broip()">broi p</button>
<button onclick="broih2()">broi h2</button>
<button onclick="broih3()">broi h3</button>
</body>
</html>
Наоѓање на елементи во HTML по име на класа
Ако сакате да ги пронајдете сите HTML-елементи со исто име на класа, користете
getElementsByClassName ().
Пример 8.
<html>
<head>
<script>
function funk() {
var x =
document.getElementsByClassName("primer");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
x[i].style.fontSize = "x-large";
x[i].style.fontSize = "12";
x[i].style.color = "blue";x[i].style.font = "italic bold 40px arial,serif";
}
}
</script>
<body>
<p class="primer">Primer 1</p>
<p class="primer">Primer 1</p>
<p class="primer">Primer 1</p>
<input type="button" onclick="funk()" value="Crvena">
</body>
</html>
Наоѓање на елементи во HTML по CSS
селектор
Ако сакате да ги пронајдете сите HTML елементи што одговараат на одреден CSS
селектор (ID, имиња на класи, типови, атрибути, вредности на атрибути, итн.),
Користете го методот querySelectorAll ().
Овој пример враќа список на сите <p> елементи со class = "intro".
Пример 9.
const x = document.querySelectorAll("p.intro");
Наоѓање на елементи во HTML според збирки на објекти на
HTML
Овој пример го наоѓа елементот на формата со id = "frm1", во колекцијата форми и
ги прикажува сите вредности на елементот:
Пример 10.
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;
Креирање на елемент во HTML
<html>
<body>
<p>Pritisni za da kreiras nov element Button-Kopce so tekst .</p>
<button onclick="mojaFunkcija()">Kreiraj kopce</button>
<script>
function mojaFunkcija() {
var btn = document.createElement("BUTTON");
btn.innerHTML = "Kopce";
document.body.appendChild(btn);
}
</script>
</body>
</html>
Бришење на елемент во HTML
<html>
<body>
<p>Pritisni za da izbrises Button-Kopce
.</p>
<button onclick="mojaFunkcijaB()"
Id="BUTTON">Brisi kopce</button>
<script>
function
mojaFunkcijaB() {
var btn = document.getElementById("BUTTON");
btn.remove();
}
</script>
</body>
</html>
|