HTML DOM ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﯼﺎﻫ ﻪﻧﻮﻤﻧ


فهرست مطالب

    نمایش فهرست مطالب


.DOM ءﺎﯿﺷﺍ ﯼﺭﺎﮑﺘﺳﺩ ﻭ ﯽﺳﺮﺘﺳﺩ ﯼﺍﺮﺑ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺯﺍ ﯽﯾﺎﻫ ﻪﻧﻮﻤﻧ


ﺪﻨﺳ ءﯽﺷ

ﺪﻨﺳ ﮏﯾ ﺭﺩ ﺎﻫ ﯽﮐﻮﮐ ﺭﺍﺪﻘﻣ/ﻡﺎﻧ ﺖﻔﺟ ﻡﺎﻤﺗ ﺶﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to display the cookies associated with this document.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML =
  "Cookies associated with this document: " + document.cookie;
}
</script>

</body>
</html>

ﺖﺳﺍ ﻩﺩﺮﮐ ﯼﺮﯿﮔﺭﺎﺑ ﺍﺭ ﺪﻨﺳ ﻪﮐ ﯼﺭﻭﺮﺳ ﻪﻨﻣﺍﺩ ﻡﺎﻧ ﺶﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the domain name of the server that loaded this document.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = document.domain;
}
</script>

</body>
</html>

ﺪﻨﺳ ﺮﯿﯿﻐﺗ ﻦﯾﺮﺧﺁ ﺖﻋﺎﺳ ﻭ ﺦﯾﺭﺎﺗ ﺶﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<body>

<p>This document was last modified <span id="demo"></span>.</p>

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

</body>
</html>

ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﺖﺳﺍ ﻩﺩﺮﮐ ﯼﺮﯿﮔﺭﺎﺑ ﺍﺭ ﯽﻠﻌﻓ ﺪﻨﺳ ﻪﮐ ﺍﺭ ﯼﺪﻨﺳ ﯽﺘﻧﺮﺘﻨﯾﺍ ﯽﻧﺎﺸﻧ

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the referrer of this document.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = document.referrer;
}
</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>

ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﺍﺭ ﺪﻨﺳ ﮏﯾ ﻞﻣﺎﮐ ﯽﺘﻧﺮﺘﻨﯾﺍ ﯽﻧﺎﺸﻧ

<!DOCTYPE html>
<html>
<body>

<p>The full URL of this document is: <br><span id="demo"></span>.</p>

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

</body>
</html>

ﺪﯿﻨﮐ ﻦﯾﺰﮕﯾﺎﺟ ﺍﺭ ﺪﻨﺳ ﮏﯾ ﯼﺍﻮﺘﺤﻣ

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to replace this document with new content.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.open("text/html","replace");
  document.write("<h2>Learning about the HTML DOM is fun!</h2>");
  document.close();
}
</script>

</body>
</html>

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﻮﺘﺤﻣ ﯼﺭﺍﺪﻘﻣ ﻭ ﺪﯿﻨﮐ ﺯﺎﺑ ﺪﯾﺪﺟ ﻩﺮﺠﻨﭘ ﮏﯾ

<!DOCTYPE html>
<html>
<body>

<p>Click the button to open a new window and add some content.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var w = window.open();
  w.document.open();
  w.document.write("<h2>Hello World!</h2>");
  w.document.close();
}
</script>

</body>
</html>

ﺹﺎﺧ ﻡﺎﻧ ﮏﯾ ﺎﺑ ﺮﺻﺎﻨﻋ ﺩﺍﺪﻌﺗ ﺶﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<head>
<script>
function getElements() {
  var x = document.getElementsByName("x");
  document.getElementById("demo").innerHTML = x.length;
}
</script>
</head>
<body>

<p>
Cats: <input name="x" type="radio" value="Cats">
Dogs: <input name="x" type="radio" value="Dogs">
</p>

<p>
<input type="button" onclick="getElements()" value="How many elements named x?">
</p>

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

</body>
</html>

ﺹﺎﺧ ﮓﺗ ﻡﺎﻧ ﺎﺑ ﺮﺻﺎﻨﻋ ﺩﺍﺪﻌﺗ ﺶﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<head>
<script>
function getElements() {
  var x = document.getElementsByTagName("input");
  document.getElementById("demo").innerHTML = x.length;
}
</script>
</head>
<body>

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br>

<p>
<input type="button" onclick="getElements()" value="How many input elements?">
</p>

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

</body>
</html>

ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﺪﻨﺳ ﻉﻮﺿﻮﻣ


ﺎﻫﺮﮕﻨﻟ ﻪﻋﻮﻤﺠﻣ

ﺪﯿﺑﺎﯿﺑ ﺪﻨﺳ ﮏﯾ ﺭﺩ ﺍﺭ ﺎﻫﺮﮕﻨﻟ ﺩﺍﺪﻌﺗ

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

HTML ﺪﯿﻨﮐ ﺍﺪﯿﭘ ﺍﺭ ﺪﻨﺳ ﮏﯾ ﺭﺩ ﺮﮕﻨﻟ ﻦﯿﻟﻭﺍ ﯽﻠﺧﺍﺩ

<!DOCTYPE html>
<html>
<body>

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

<p>Click the button to display the innerHTML of the first anchor in the document.</p>

<button onclick="myFunction()">Try it</button>

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

<script>
function myFunction() {
  document.getElementById("demo").innerHTML =
  document.anchors[0].innerHTML;
}
</script>

</body>
</html>

ﺎﻫﺪﻧﻮﯿﭘ ﻪﻋﻮﻤﺠﻣ

ﺪﻨﺳ ﮏﯾ ﺭﺩ ﺎﻫﺪﻧﻮﯿﭘ ﺩﺍﺪﻌﺗ ﺶﯾﺎﻤﻧ

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

ﺪﻨﺳ ﮏﯾ ﺭﺩ ﺪﻧﻮﯿﭘ ﻦﯿﻟﻭﺍ href ﯽﮔﮋﯾﻭ ﺶﯾﺎﻤﻧ

<!DOCTYPE html>
<html>
<body>

<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 =
"The href of the first link is " + document.links[0].href;
</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>
<body>

<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>

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

<script>
document.getElementById("demo").innerHTML =
"The name of the first for is " + document.forms[0].name;
</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>

ﺪﯿﻧﺍﺩﺮﮔﺮﺑ ﺍﺭ ﺪﻨﺳ ﮏﯾ ﺭﺩ ﺮﯾﻮﺼﺗ ﻦﯿﻟﻭﺍ ﻪﺳﺎﻨﺷ

<!DOCTYPE html>
<html>
<body>

<img id="img1" src="pic_htmltree.gif">
<img id="img2" src="pic_navigate.gif">

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

<script>
document.getElementById("demo").innerHTML =
"The id of the first image is " + document.images[0].id;
</script>

</body>
</html>

CSS ﯼﺭﺎﮑﺘﺳﺩ

ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ HTML ﺮﺼﻨﻋ ﮏﯾ ﻩﺪﻫﺎﺸﻣ ﺖﯿﻠﺑﺎﻗ

<!DOCTYPE html>
<html>
<body>

<p id="p1">
This is a text.
This is a text.
This is a text.
</p>

<input type="button" value="Hide text" 
onclick="document.getElementById('p1').style.visibility='hidden'">

<input type="button" value="Show text"
onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>

ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ HTML ﺮﺼﻨﻋ ﮏﯾ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ

<!DOCTYPE html>
<html>
<head>

<script>
function bgChange(bg) {
  document.body.style.background = bg;
}
</script>
</head>
<body>

<h2>Change background color</h2>
<p>Mouse over the squares!</p>

<table style="width:300px;height:100px">
  <tr>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
    onmouseout="bgChange('transparent')"
    style="background-color:Khaki">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
    onmouseout="bgChange('transparent')"
    style="background-color:PaleGreen">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
    onmouseout="bgChange('transparent')"
    style="background-color:Silver">
    </td>
  </tr>
</table>

</body>
</html>