ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﯽﺳﺮﺘﺳﺩ ﺎﻬﻧﺁ ﻪﺑ ﻭ ﻩﺩﺮﮐ ﺍﺪﯿﭘ ﺍﺭ HTML ﺮﺻﺎﻨﻋ ﻪﻧﻮﮕﭼ ﻪﮐ ﺩﺯﻮﻣﺁ ﯽﻣ ﺎﻤﺷ ﻪﺑ ﻪﺤﻔﺻ ﻦﯾ
.ﺪﯿﻨﮐ ﯼﺭﺎﮑﺘﺳﺩ ﺍﺭ HTML ﺮﺻﺎﻨﻋ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ،ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺎﺑ ،ﺐﻠﻏﺍ
:ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺭﺎﮐ ﻦﯾﺍ ﯼﺍﺮﺑ ﯽﻔﻠﺘﺨﻣ ﯼﺎﻫ ﻩﺍﺭ .ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﺮﺻﺎﻨﻋ ﺪﯾﺎﺑ ﺍﺪﺘﺑﺍ ،ﺭﺎﮐ ﻦﯾﺍ ﻡﺎﺠﻧﺍ
ﻪﺳﺎﻨﺷ ﺎﺑ HTML ﺮﺻﺎﻨﻋ ﻦﺘﻓﺎﯾ
ﮓﺗ ﻡﺎﻧ ﺎﺑ HTML ﺮﺻﺎﻨﻋ ﻦﺘﻓﺎﯾ
ﺱﻼﮐ ﻡﺎﻧ ﺱﺎﺳﺍ ﺮﺑ HTML ﺮﺻﺎﻨﻋ ﻦﺘﻓﺎﯾ
CSS ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﻂﺳﻮﺗ HTML ﺮﺻﺎﻨﻋ ﻦﺘﻓﺎﯾ
HTML ءﺎﯿﺷﺍ ﯼﺎﻫ ﻪﻋﻮﻤﺠﻣ ﻂﺳﻮﺗ HTML ﺮﺻﺎﻨﻋ ﻦﺘﻓﺎﯾ
.ﺖﺳﺍ ﺮﺼﻨﻋ ﻪﺳﺎﻨﺷ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ،DOM ﺭﺩ HTML ﺮﺼﻨﻋ ﮏﯾ ﻦﺘﻓﺎﯾ ﯼﺍﺮﺑ ﻩﺍﺭ ﻦﯾﺮﺗ ﻩﺩﺎﺳ
:ﺪﻨﮐ ﯽﻣ ﺍﺪﯿﭘ id="intro" ﺎﺑ ﺍﺭ ﺮﺼﻨﻋ ﻝﺎﺜﻣ ﻦﯾﺍ
const element = document.getElementById("intro");→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>
.ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ (ﺮﺼﻨﻋ ﺭﺩ) ﯽﺷ ﮏﯾ ﻥﺍﻮﻨﻋ ﻪﺑ ﺍﺭ ﺮﺼﻨﻋ ﺪﺘﻣ ،ﺩﻮﺷ ﺍﺪﯿﭘ ﺮﺼﻨﻋ ﺮﮔﺍ
.ﺩﻮﺑ ﺪﻫﺍﻮﺧ null ﯼﻭﺎﺣ ﺮﺼﻨﻋ ،ﺪﺸﻧ ﺍﺪﯿﭘ ﺮﺼﻨﻋ ﺮﮔﺍ
:ﺪﻨﮐ ﯽﻣ ﺍﺪﯿﭘ ﺍﺭ <p> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﻝﺎﺜﻣ ﻦﯾﺍ
const element = document.getElementsByTagName("p");→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>
.ﺪﻨﮐﯽﻣ ﺍﺪﯿﭘ ﺍﺭ <p> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺲﭙﺳ ﻭ ،ﺪﻨﮐﯽﻣ
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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 ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﺮﮔﺍ
.ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ class="intro" ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺯﺍ ﯽﺘﺳﺮﻬﻓ
const x = document.getElementsByClassName("intro");→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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 ﺮﮕﺑﺎﺨﺘﻧﺍ ﺎﺑ ﻪﮐ ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ HTML ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﺪﯿﻫﺍﻮﺧ ﯽﻣ ﺮﮔﺍ
.ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧclass="intro" ﺎﺑ ﺍﺭ ﻝﺎﺜﻣ
const x = document.querySelectorAll("p.intro");<!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>
.ﺪﻨﮐﯽﻣ ﺍﺪﯿﭘ ﺎﻫﻡﺮﻓ ﺭﺩ id="frm1" ﺎﺑ ﺍﺭ ﻡﺮﻓ ﺮ
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;→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>
:ﺪﻨﺘﺴﻫ ﯽﺳﺮﺘﺳﺩ ﻞﺑﺎﻗ ﺰﯿﻧ (ءﺎﯿﺷﺍ ﻪﻋﻮﻤﺠﻣ ﻭ) ﺮﯾﺯ HTML ءﺎﯿﺷﺍ
document.anchors
<!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>
ﻪﻧﺪﺑ.ﺪﻨﺳ
<!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>
document.embeds
<!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>
ﺎﻫ ﻡﺮﻓ.ﺪﻨﺳ
<!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>
ﺮﺳ.ﺪﻨﺳ
<!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>
ﺮﯾﻭﺎﺼﺗ.ﺪﻨﺳ
<!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>
document.links
<!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>
document.scripts
<!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>
ﻥﺍﻮﻨﻋ .ﺪﻨﺳ
<!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>