DOM Navigation ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ

فهرست مطالب

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

ﺪﯿﻨﮐ ﺶﯾﺎﻤﯿﭘ ﻩﺮﮔ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﻩﺮﮔ ﺖﺧﺭﺩ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ،HTML DOM ﺎﺑ

DOM ﯼﺎﻫ ﻩﺮﮔ

:ﺖﺳﺍ ﻩﺮﮔ ﮏﯾ HTML ﺪﻨﺳ ﮏﯾ ﺭﺩ ﺰﯿﭼ ﻪﻤﻫ ،W3C HTML DOM ﺩﺭﺍﺪﻧﺎﺘﺳﺍ ﻖﺒﻃ

ﺖﺳﺍ ﺪﻨﺳ ﻩﺮﮔ ﮏﯾ ﺪﻨﺳ ﻞﮐ
ﺖﺳﺍ ﺮﺼﻨﻋ ﻩﺮﮔ ﮏﯾ HTML ﺮﺼﻨﻋ ﺮﻫ
ﺪﻨﺘﺴﻫ ﯽﻨﺘﻣ ﯼﺎﻫ ﻩﺮﮔ HTML ﺮﺻﺎﻨﻋ ﻞﺧﺍﺩ ﻦﺘﻣ
(ﻩﺪﺷ ﺥﻮﺴﻨﻣ) ﺖﺳﺍ ﯽﮔﮋﯾﻭ ﻩﺮﮔ ﮏﯾ HTML ﯽﮔﮋﯾﻭ ﺮﻫ
ﺪﻨﺘﺴﻫ ﺮﻈﻧ ﯼﺎﻫ ﻩﺮﮔ ﺕﺍﺮﻈﻧ ﻪﻤﻫ

.ﺪﻨﺘﺴﻫ ﯽﺳﺮﺘﺳﺩ ﻞﺑﺎﻗ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻂﺳﻮﺗ ﻩﺮﮔ ﺖﺧﺭﺩ ﯼﺎﻫﻩﺮﮔ ﻡﺎﻤﺗ ،HTML DOM ﺎﺑ

ﻪﻤﻫ ﻭ ،ﺩﺮﮐ ﺩﺎﺠﯾﺍ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺪﯾﺪﺟ ﯼﺎﻫ ﻩﺮﮔ

ﻩﺮﮔ ﻂﺑﺍﻭﺭ

.ﺪﻧﺭﺍﺩ ﺮﮕﯾﺪﮑﯾ ﺎﺑ ﯽﺒﺗﺍﺮﻣ ﻪﻠﺴﻠﺳ ﻪﻄﺑﺍﺭ ﮏﯾ ﻩﺮﮔ ﺖﺧﺭﺩ ﺭﺩ ﺩﻮﺟﻮﻣ ﯼﺎﻫ ﻩﺮﮔ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ ﻭ ﺪﻧﺯﺮﻓ ،ﻦﯾﺪﻟﺍﻭ ﺕﺎﺣﻼﻄﺻﺍ ﺯﺍ ﻂﺑﺍﻭﺭ ﻒﯿﺻﻮﺗ ﯼﺍﺮﺑ

.ﺩﻮﺷ ﯽﻣ ﻩﺪﯿﻣﺎﻧ (ﻪﺸﯾﺭ ﻩﺮﮔ ﺎﯾ) ﻪﺸﯾﺭ ﯽﯾﻻﺎﺑ ﻩﺮﮔ ،ﻩﺮﮔ ﺖﺧﺭﺩ ﺭﺩ
(ﺩﺭﺍﺪﻧ ﺪﻟﺍﻭ ﻪﮐ) ﻪﺸﯾﺭ ﺰﺟ ﻪﺑ ،ﺩﺭﺍﺩ ﺪﻟﺍﻭ ﮏﯾ ﺎًﻘﯿﻗﺩ ﻩﺮﮔ ﺮﻫ
ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺪﻧﺯﺮﻓ ﯼﺩﺍﺪﻌﺗ ﺪﻧﺍﻮﺗ ﯽﻣ ﻩﺮﮔ ﮏﯾ
ﺪﻨﺘﺴﻫ ﻥﺎﺴﮑﯾ ﻦﯾﺪﻟﺍﻭ ﺎﺑ ﯽﯾﺎﻫ ﻩﺮﮔ (ﺮﻫﺍﻮﺧ ﺎﯾ ﺭﺩﺍﺮﺑ) ﺭﺩﺍﺮﺑ ﻭ ﺮﻫﺍﻮﺧ

<html>

       <head>
          <title>DOM Tutorial</title>
       </head>
	<body>
          <h1>DOM Lesson one</h1>
          <p>Hello world!</p>
       </body>
     
</html>

:ﺪﯿﻧﺍﻮﺨﺑ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻻﺎﺑ HTML ﺯﺍ

<html> ﺖﺳﺍ ﻪﺸﯾﺭ ﻩﺮﮔ
<html> ﺩﺭﺍﺪﻧ ﯼﺭﺩﺎﻣ ﻭ ﺭﺪﭘ
<html> ﺪﻟﺍﻭ <head>
<head> ﺪﻧﺯﺮﻓ ﻦﯿﻟﻭﺍ <html><
<body> ﺪﻧﺯﺮﻓ ﻦﯾﺮﺧﺁ <html><

:ﻭ

<head> ﺩﺭﺍﺩ ﺪﻧﺯﺮﻓ ﮏﯾ:
<title> (ﯽﻨﺘﻣ ﻩﺮﮔ ﮏﯾ) ﺩﺭﺍﺩ ﺪﻧﺯﺮﻓ ﮏﯾ: "DOM Tutorial"
<body> ﺩﺭﺍﺩ ﺪﻧﺯﺮﻓ ﻭﺩ: <h1>
<h1> ﺩﺭﺍﺩ ﺪﻧﺯﺮﻓ ﮏﯾ: "DOM Lesson one"
<p> ﺎﯿﻧﺩ ﻡﻼﺳ" :ﺩﺭﺍﺩ ﺪﻧﺯﺮﻓ ﮏﯾ!"
<h1> ﻭ <p> ﺪﻨﺘﺴﻫ ﺭﺩ

`ﺎﻫ ﻩﺮﮔ ﻦﯿﺑ ﺶﯾﺎﻤﯿﭘ`

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫ ﻩﺮﮔ ﻦﯿﺑ ﺶﯾﺎﻤﯿﭘ ﯼﺍﺮﺑ ﺮﯾﺯ ﻩﺮﮔ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

parentNode
childNodes[nodennumber]
firstChild
lastChild
nextSibling
ﯽﻠﺒﻗ ﺭﺩﺍﺮﺑ

`ﻩﺮﮔ ﺮﯾﺩﺎﻘﻣ ﻭ ﺪﻧﺯﺮﻓ ﯼﺎﻫ ﻩﺮﮔ`

.ﺪﺷﺎﺑ ﻦﺘﻣ ﯼﻭﺎﺣ ﺮﺼﻨﻋ ﻩﺮﮔ ﮏﯾ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺭﺎﻈﺘﻧﺍ ﻪﮐ ﺖﺳﺍ ﻦﯾﺍ DOM ﺵﺯﺍﺩﺮﭘ ﺭﺩ ﺞﯾﺍﺭ ﯼﺎﻄﺧ ﮏﯾ

`: ﻝﺎﺜﻣ`

<title 
 id="demo">DOM Tutorial</title>

ﺮﺼﻨﻋ ﻩﺮﮔ

.ﺖﺳﺍ "DOM Tutorial" ﺭﺍﺪﻘﻣ ﺎﺑ ﻦﺘﻣ ﻩﺮﮔ ﮏﯾ ﻞﻣﺎﺷ ﻦﯾﺍ

:ﺖﺷﺍﺩ ﯽﺳﺮﺘﺳﺩ ﻦﺘﻣ ﻩﺮﮔ ﺭﺍﺪﻘﻣ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﻩﺮﮔ innerHTML

myTitle = document.getElementById("demo").innerHTML;

.ﺖﺳﺍ nodeValue ﻪﺑ ﯽﺳﺮﺘﺳﺩ ﺪﻨﻧﺎﻣ innerHTML ﯽﮔﮋﯾﻭ ﻪﺑ ﯽﺳ

myTitle = document.getElementById("demo").firstChild.nodeValue;

:ﺩﻮﺷ ﻡﺎﺠﻧﺍ ﺕﺭﻮﺻ ﻦﯾﺍ ﻪﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﺰﯿﻧ ﻝﻭﺍ ﺪﻧﺯﺮﻓ ﻪﺑ ﯽﺳﺮﺘﺳﺩ

myTitle = document.getElementById("demo").childNodes[0].nodeValue;

.ﺪﻨﻨﮐﯽﻣ ﯽﭙﮐ ﺍﺭ ﻥﺁ ﻭ ﺪﻨﻨﮐﯽﻣ ﯽﺑﺎﯾﺯﺎﺑ ﺍﺭ <h1>

`ﻝﺎﺜﻣ`

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML 
 = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

`ﻝﺎﺜﻣ`

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

`ﻝﺎﺜﻣ`

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

`InnerHTML`

ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ an ﯼﺍﻮﺘﺤﻣ ﯽﺑﺎﯾﺯﺎﺑ ﯼﺍﺮﺑ innerHTML ﯽﮔﮋﯾﻭ ﺯﺍ ﺵﺯﻮﻣﺁ ﻦﯾﺍ ﺭﺩ

ﯼﺮﯿﮔﺩﺎﯾ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ

`DOM ﻪﺸﯾﺭ ﯼﺎﻫ ﻩﺮﮔ`

:ﺪﻨﮐ ﯽﻣ ﻢﻫﺍﺮﻓ ﺍﺭ ﻞﻣﺎﮐ ﺪﻨﺳ ﻪﺑ ﯽﺳﺮﺘﺳﺩ ﻥﺎﮑﻣﺍ ﻪﮐ ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺹﺎﺧ ﯽﮔﮋﯾﻭ ﻭﺩ

document.body - ﺪﻨﺳ ﻪﻧﺪﺑ
document.documentElement - ﻞﻣﺎﮐ ﺪﻨﺳ

`ﻝﺎﺜﻣ`

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

`ﻝﺎﺜﻣ`

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

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

`nodeName ﯽﮔﮋﯾﻭ`

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻩﺮﮔ ﮏﯾ ﻡﺎﻧ nodeName ﯽﮔﮋﯾﻭ

nodeName ﺖﺳﺍ ﯽﻧﺪﻧﺍﻮﺧ ﻂﻘﻓ
nodeName ﺖﺳﺍ ﻥﺎﺴﮑﯾ ﮓﺗ ﻡﺎﻧ ﺎﺑ ﺮﺼﻨﻋ ﻩﺮﮔ ﮏﯾ
nodeName ﺖﺳﺍ ﯽﮔﮋﯾﻭ ﻡﺎﻧ ،ﯽﮔﮋﯾﻭ ﻩﺮﮔ ﮏﯾ
nodeName ﻪﺸﯿﻤﻫ ﻦﺘﻣ ﻩﺮﮔ ﮏﯾ #text ﺖﺳﺍ
nodeName ﻪﺸﯿﻤﻫ ﺪﻨﺳ ﻩﺮﮔ #document ﺖﺳﺍ

`ﻝﺎﺜﻣ`

 <h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeName;
</script>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

</body>
</html>

ﻪﺟﻮﺗ: nodeName ﺮﺼﻨﻋ ﮏﯾ ﮒﺭﺰﺑ ﮓﺗ ﻡﺎﻧ ﯼﻭﺎﺣ ﻪﺸﯿﻤﻫ

`nodeValue ﯽﮔﮋﯾﻭ`

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﻩﺮﮔ ﮏﯾ ﺭﺍﺪﻘﻣ nodeValue ﯽﮔﮋﯾﻭ

nodeValue ﺮﺼﻨﻋ ﯼﺎﻫ ﻩﺮﮔ ﯼﺍﺮﺑ null ﺖﺳﺍ
nodeValue ﺖﺳﺍ ﻦﺘﻣ ﺩﻮﺧ ﯽﻨﺘﻣ ﯼﺎﻫ ﻩﺮﮔ ﯼﺍﺮﺑ
nodeValue ﺖﺳﺍ ﯽﮔﮋﯾﻭ ﺭﺍﺪﻘﻣ ،ﯽﮔﮋﯾﻭ ﯼﺎﻫ ﻩﺮﮔ ﯼﺍﺮﺑ

`nodeType ﯽﮔﮋﯾﻭ`

.ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ ﺍﺭ ﻩﺮﮔ ﮏﯾ ﻉﻮﻧ .ﺖﺳﺍ ﯽﻧﺪﻧﺍﻮﺧ ﻂﻘﻓ nodeType

`ﻝﺎﺜﻣ`

<h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeType;
</script>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

</body>
</html>

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ nodeType ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻦﯾﺮﺘﻤﻬﻣ

Node	Type	Example
ELEMENT_NODE	1	<h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE	2	class = "heading" (deprecated)
TEXT_NODE	3	W3Schools
COMMENT_NODE	8	<!-- This is a comment -->
DOCUMENT_NODE	9	The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE	10	<!Doctype html>

.ﺖﺳﺍ ﻩﺪﺸﻧ ﺥﻮﺴﻨﻣ XML DOM ﺭﺩ .(ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﺎﻣﺍ) ﺖﺳﺍ ﻩﺪﺷ ﺥﻮﺴﻨﻣ HTML DOM ﺭﺩ 2 ﻉﻮﻧ


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →