JavaScript DOM Öğeleri

İçindekiler

    İçindekiler tablosunu göster

Bu sayfa size HTML öğelerini nasıl bulacağınızı ve bunlara nasıl erişeceğinizi öğretir. bir HTML sayfası.

HTML Öğelerini Bulma

Çoğu zaman JavaScript ile HTML öğelerini değiştirmek istersiniz.

Bunu yapmak için önce elemanları bulmanız gerekir. Bunu yapmanın birkaç yolu vardır:

  • Kimliğe göre HTML öğelerini bulma

  • HTML öğelerini etiket adına göre bulma

  • HTML öğelerini sınıf adına göre bulma

  • HTML öğelerini CSS seçicilere göre bulma

  • HTML nesne koleksiyonlarına göre HTML öğelerini bulma

Kimliğe Göre HTML Öğesini Bulma

DOM'da bir HTML öğesi bulmanın en kolay yolu öğe kimliğini kullanmaktır.

Bu örnek, id="intro" içeren öğeyi bulur:

Örnek

const element = document.getElementById("intro");

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

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

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

Eğer element bulunursa, yöntem elementi bir nesne (in element) olarak döndürecektir.

Öğe bulunamazsa öğe null içerecektir.

Etiket Adına Göre HTML Öğelerini Bulma

Bu örnek tüm <p> öğelerini bulur:

Örnek

const element = document.getElementsByTagName("p");

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

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

<script>
const element = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

Bu örnek, id="main" içeren öğeyi bulur ve ardından tüm <p> öğelerini bulur "main" içinde:

Örnek

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

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

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

<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>

HTML Öğelerini Sınıf Adına Göre Bulma

Aynı sınıf adına sahip tüm HTML öğelerini bulmak istiyorsanız şunu kullanın: getElementsByClassName().

Bu örnek, class="intro" içeren tüm öğelerin bir listesini döndürür.

Örnek

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

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

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

<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

CSS Seçicilerle HTML Öğelerini Bulma

Belirtilen bir CSS seçiciyle eşleşen tüm HTML öğelerini bulmak istiyorsanız (kimlik, sınıf adları, türler, nitelikler, niteliklerin değerleri vb.), querySelectorAll() yöntemini kullanın.

Bu örnek, class="intro" içeren tüm <p> öğelerinin bir listesini döndürür.

Örnek

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

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

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

<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

HTML Nesne Koleksiyonlarına Göre HTML Öğelerini Bulma

Bu örnek, formlarda id="frm1" içeren form öğesini bulur koleksiyonu ve tüm öğeleri görüntüler değerler:

Örnek

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;

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>These are the values of each element in the form:</p>

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

<script>
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>

</body>
</html>

Aşağıdaki HTML nesnelerine (ve nesne koleksiyonlarına) da erişilebilir:

    belge.çapalar

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.anchors</h2>

<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>

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

<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>


</body>
</html>

    belge.gövdesi

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

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

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

    document.documentElement

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

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

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

    belge.embedler

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of embeds: " + document.embeds.length;
</script>

</body>
</html>

    belge.formlar

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.forms</h2>

<form action="">
First name: <input type="text" name="fname" value="Donald">
<input type="submit" value="Submit">
</form> 

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

<script>
document.getElementById("demo").innerHTML =
"Number of forms: " + document.forms.length;
</script>

</body>
</html>

    belge.başlığı

    <!DOCTYPE html>
<html>

<head>
<title>W3Schools Demo</title>
</head>

<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
document.head;
</script>

</body>
</html>

    belge.resimler

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.images</h2>

<img src="pic_htmltree.gif" width="486" height="266">
<img src="pic_navigate.gif" width="362" height="255">

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

<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>

</body>
</html>

    belge.bağlantılar

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.links</h2>

<p>
<a href="/html/default.asp">HTML</a>
<br>
<a href="/css/default.asp">CSS</a>
</p>

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

<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>

</body>
</html>

    belge.scriptler

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.scripts</h2>

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

<script>
document.getElementById("demo").innerHTML =
"Number of scripts: " + document.scripts.length;
</script>

</body>
</html>

    belge başlığı

    <!DOCTYPE html>
<html>
  <head>
  <title>W3Schools Demo</title>
  </head>
<body>

<h2>Finding HTML Elements Using document.title</h2>

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

<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " + document.title;
</script>

</body>
</html>