DOM – HTML

שפת JavaScript – הפעם נלמד על DOM.

Document Object Model of the HTML page.

Finding HTML Elements

מציאת אלמנט לפי id.

הגדרנו אלמנת בתג p עם id שווה ל-testID

ואז דרך JS מוצאים את אלמנת עם id שווה ל-testID ומדפיסים Founded

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
</head>
<body>

<p id="testID"></p>

<script>
document.getElementById("testID").innerHTML ="Founded";
</script>

</body>
</html>


מציאת אלמנט לפי Tag Name.

ניתן למצוא אלמנט לפי Tag Name שלו:

document.getElementsByTagName(name)

בדוגמה הזאת יש 4 שורות עם תג <p>

בתוך JS נגדיר משתמה X אשר מוצאת כל אלמנטים שיש להם תג <p>
כלומר יש לנו מערך:

X={<p>Test 1 </p>,<p>Test 2 </p>,<p>Test 3 </p>,<p id="testID">Selected: </p>}

לדוגמה: [x[1 זה <p>Test 2 </p>

בנוסף נגדיר משתנה Y אשר מוצא אלמנת לפי id ששווה ל-testID

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
</head>
<body>

<p>Test 1 </p>
<p>Test 2 </p>
<p>Test 3 </p>
<p id="testID">Selected: </p>

<script>
var x = document.getElementsByTagName("p");
var y = document.getElementById("testID");
y.innerHTML += x[1].innerHTML;
</script>

</body>
</html>

בצבע אדום מודגש y.innerHTML += x[1].innerHTML שזה אומר יש להוסיף ל-y את משהו כתוב ב-[x[1 שזה Selected: Test 2

לסיכום נקבל:


מציאת אלמנט לפי Class Name

document.getElementsByClassName(name)

בדוגמה הזאת, אנחנו מוצאים אלמנט לפי CLASS:
testIDclass2, testIDclass1
ומוצאים את התוכן רצוי מתוך המערך, כי יש שני מחלקות עם אותו שם – testIDclass2.

ב-JS הגדרנו משתנה X אשר מקבל מערך של המחלקה testIDclass2

X={<p class="testIDclass2">Test 2 </p>, <p class="testIDclass2">Test 3 </p>}

בנוסף הגדרנו משתנה Y שזה <p id="testID">Selected: </p> 

<!DOCTYPE html>
<html>
<head>
<title>Java Script</title>
</head>
<body>

<p class="testIDclass1">Test 1 </p>
<p class="testIDclass2">Test 2 </p>
<p class="testIDclass2">Test 3 </p>
<p id="testID">Selected: </p>

<script>
var x = document.getElementsByClassName("testIDclass2");
var y = document.getElementById("testID");
y.innerHTML += x[0].innerHTML;
y.innerHTML += x[1].innerHTML;
</script>

</body>
</html>

בצע כחול מוגדר ב-JS

y.innerHTML += x[0].innerHTML;
y.innerHTML += x[1].innerHTML;

זה אומר שיש להוסיף לתוכן של-Y את ערכים שבמערך X שזה Test 2 ו-Test 3

ואז נקבל:

דילוג לתוכן