DOM HTML elementlarini o‘zgartirish

HTML tarkibini o‘zgartirish

HTML DOM JavaScript-ga HTML elementlarining matnini ham, mazmunini ham o‘zgartirish imkonini beradi.

Tarkibni o‘zgartirishning eng oson yo‘li innerHTML xususiyatidan foydalanishdir:

document.getElementById(id).innerHTML = new HTML

innerHTML xususiyati

Element mazmunini olishning eng oson yo‘li innerHTML xususiyatidan foydalanishdir.

innerHTML xossasi HTML elementlarining mazmunini olish yoki almashtirish uchun foydalidir.

innerHTML xususiyatidan istalgan HTML elementini olish yoki o‘zgartirish uchun foydalanish mumkin, shu jumladan <html> va <body> .

Umumiy xatolar

DOM elementi mavjud bo‘lishidan oldin unga murojaat qilishga urinish
"Demo" kabi identifikatordagi tirnoqlarni unutish

Misol

<p> elementining tarkibini o‘zgartiring:

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

Yuqoridagi HTML hujjatida <p> elementi id="p1" mavjud
Biz id="p1" elementini olish uchun HTML DOM dan foydalanamiz
JavaScript ushbu elementning mazmunini ( innerHTML ) “Yangi matn!"

Misol

<h1> elementining mazmunini o‘zgartiring:

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

Yuqoridagi HTML hujjatida <h1> elementi id="id01" mavjud
Biz id="id01" elementini olish uchun HTML DOM dan foydalanamiz
JavaScript ushbu elementning mazmunini ( innerHTML ) “Yangi Sarlavha"

Atributni o‘zgartirish

HTML atributining qiymatini o‘zgartirish uchun ushbu sintaksisdan foydalaning:

document.getElementById(id).attribute = new value

Misol

<img> elementining src atributining qiymatini o‘zgartiradi:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

Yuqoridagi HTML hujjatida <img> elementi id="myImage" mavjud
Biz id="myImage" elementini olish uchun HTML DOM dan foydalanamiz
JavaScript ushbu elementning src atributini “smiley.gif”dan “landscape.jpg”ga o‘zgartiradi.

Dinamik HTML tarkibi

JavaScript dinamik HTML tarkibini yaratishi mumkin:

Misol

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

document.write()

JavaScript-da document.write() to‘g‘ridan-to‘g‘ri HTML chiqish oqimiga yozish uchun ishlatilishi mumkin:

Misol

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>

O‘zingiz sinab ko‘ring »

Ogohlantirish!

Hujjat yuklangandan keyin hech qachon document.write() dan foydalanmang. Bo‘ladi hujjatning ustiga yozing.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish