کورس تیبل

JS تعلیم

JS ਵਰਜਨ

JS ਆਬਜੈਕਟ

JS ਫੰਕਸ਼ਨ

JS ਕਲਾਸ

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs jQuery

JS ਗਰਾਫਿਕਸ

JS ਉਦਾਹਰਣ

JS ਪੁਸਤਕਾਤਮਕ

ਪ੍ਰਿਭਾਸ਼ਿਤ ਕੋਰਸ

ਕੋਰਸ ਸਿਫਾਰਸ਼:

CodeW3C.com ਸਾਈਨ ਬੋਕਸ

JavaScript HTML DOM ਨੇਵੀਗੇਸ਼ਨ

ਪਿਛਲਾ ਪੰਨਾ DOM ਈਵੈਂਟ ਲਿਸਟਨਰ
ਅਗਲਾ ਪੰਨਾ DOM ਨੋਡ

HTML DOM ਰਾਹੀਂ, ਤੁਸੀਂ ਨੋਡ ਟਰੀ ਵਿੱਚ ਨੋਡਾਂ ਨੂੰ ਨੇਵੀਗੇਟ ਕਰ ਸਕਦੇ ਹੋ

DOM ਨੋਡ

W3C HTML DOM ਸਟੈਂਡਰਡ ਅਨੁਸਾਰ, HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਸਾਰੇ ਚੀਜ਼ ਨੋਡ ਹਨ:

ਪੂਰਾ ਦਸਤਾਵੇਜ਼ ਦਸਤਾਵੇਜ਼ ਨੋਡ ਹੈ
ਹਰ ਹੈਲਟੀਮ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਵਿਸ਼ੇਸ਼ਤਾ ਨੋਡ
ਹੈਲਟੀਮ ਵਿਸ਼ੇਸ਼ਤਾ ਅੰਦਰ ਟੈਕਸਟ ਹੈ ਟੈਕਸਟ ਨੋਡ
ਹਰ ਹੈਲਟੀਮ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਵਿਸ਼ੇਸ਼ਤਾ ਨੋਡ
ਸਾਰੇ ਟਿੱਪਣੀਆਂ ਟਿੱਪਣੀ ਨੋਡ ਹਨ

HTML DOM ਦੇ ਨਾਲ, ਨੋਡ ਟਰੀ ਵਿੱਚ ਸਾਰੇ ਨੋਡ ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਾਹੀਂ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ

ਨਵੇਂ ਨੋਡ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਹਰ ਨੋਡ ਨੂੰ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਸਾਰੇ ਨੋਡਾਂ ਨੂੰ ਹਟਾਇਆ ਜਾ ਸਕਦਾ ਹੈ

ਨੋਡ ਸਬੰਧ

ਨੋਡ ਟਰੀ ਵਿੱਚ ਨੋਡਾਂ ਦਰਮਿਆਨ ਕੁਝ ਸਤਰਾਂ ਵਾਲਾ ਸਬੰਧ ਹੈ

ਸ਼ਬਦ (ਮਾਤਾ, ਬੱਚਾ ਅਤੇ ਭਾਈਚਾਰਾ, parent, child ਅਤੇ sibling) ਇਹ ਸਬੰਧਾਂ ਦੀ ਵਰਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。
ਨੋਡ ਟਰੀ ਵਿੱਚ, ਉੱਚ ਨੋਡ ਨੂੰ ਮੂਲ ਕਿਹਾ ਜਾਂਦਾ ਹੈ (ਮੂਲ ਨੋਡ ਦਾ ਮਾਤਾ ਨਹੀਂ ਹੈ)
ਹਰ ਨੋਡ ਦਾ ਇੱਕ ਮਾਤਾ ਹੈ ਮੂਲ ਨੋਡ ਦੇ ਛੱਡੇ ਹੋਏ, (ਮੂਲ ਨੋਡ ਦਾ ਮਾਤਾ ਨਹੀਂ ਹੈ)
ਨੋਡ ਕੁਝ ਨੋਡਾਂ ਦੀ ਮਾਤਾ ਰੱਖ ਸਕਦੇ ਹਨ
ਭਾਈਚਾਰਾ (ਭਾਈ ਜਾਂ ਭੈਣ) ਹੈ ਇੱਕ ਹੀ ਮਾਤਾ ਵਾਲੇ ਨੋਡ


   <head>
       <title>DOM ਟੂਰੀਜ਼ਮ</title>
   </head>
  
       <h1>DOM ਪਹਿਲਾ ਪਾਠ</h1>
       <p>Hello world!</p>

ਉੱਪਰੋਕਤ HTML ਤੋਂ ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਸੂਚਨਾ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ

html ਹੈ ਮੂਲ ਨੋਡ
html ਦਾ ਕੋਈ ਮਾਤਾ ਨਹੀਂ ਹੈ
html ਹੈ head ਅਤੇ body ਦਾ ਮਾਤਾ
head ਹੈ html ਦਾ ਪਹਿਲਾ ਬੱਚਾ
是的最后一个子

同时：

有一个子：</li> <li><title> 有一个子（文本节点）："DOM 教程"</li> <li><body> 有两个子：<h1> 和 <p></li> <li><h1> 有一个子："DOM 第一课"</li> <li><p> 有一个子："Hello world!"</li> <li><h1> 和 <p> 是同胞</li> </ul> </div> <div> <h2>在节点之间导航</h2> <p>通过 JavaScript，您可以使用以下节点属性在节点之间导航：</p> <ul> <li>parentNode</li> <li>childNodes[<i>nodenumber</i>]</li> <li>firstChild</li> <li>lastChild</li> <li>nextSibling</li> <li>previousSibling</li> </ul> </div> <div> <h2>子节点和节点值</h2> <p>DOM 处理中的一种常见错误是认为元素节点中包含文本。</p> <h3>实例：</h3> <pre class="language-html"> <title id="demo">DOM 教程
（上面例子中的）元素节点 <mark>不包含</mark>文本。</p> <p>它包含了值为 "DOM 教程" 的<em>文本节点</em>。</p> <p>文本节点的值能够通过节点的 <code>innerHTML</code> 属性进行访问：</p> <pre class="language-js"> var myTitle = document.getElementById("demo").innerHTML; </pre> <p>innerHTML ਪ੍ਰਤੀਯੋਗੀ ਪ੍ਰਤੀ ਪਹਿਲੇ ਉਪ ਨੋਡੇ ਨੂੰ ਪਹੁੰਚਾਇਆ ਜਾਂਦਾ ਹੈ: <code>nodeValue</code>:</p> <pre class="language-js"> var myTitle = document.getElementById("demo").firstChild.nodeValue; </pre> <p>ਵੀ ਇਸ ਤਰ੍ਹਾਂ ਪਹਿਲੇ ਉਪ ਨੋਡੇ ਨੂੰ ਪਹੁੰਚਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:</p> <pre class="language-js"> var myTitle = document.getElementById("demo").childNodes[0].nodeValue; </pre> <p>ਹੇਠ ਲਿਖੇ ਤਿੰਨ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਵਾਪਸ ਲਿਆ ਜਾਂਦਾ ਹੈ: <code><h1></code> ਵਿਸ਼ੇ ਦੇ ਟੈਕਸਟ ਨੂੰ ਅਤੇ ਕਾਪੀ ਕਰੋ ਤੱਕ <code><p></code> ਵਿਸ਼ੇ ਵਿੱਚ:</p> <h3>ਉਦਾਹਰਣ 1</h3> <pre class="language-html"> <html> <body> <h1 id="id01">ਮੇਰਾ ਪਹਿਲਾ ਪੰਨਾ</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML; </script> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_js_dom_nav_innerhtml_1">ਸਵੈ ਸਿਖਾਓ</a></p> <h3>ਉਦਾਹਰਣ 2</h3> <pre class="language-html"> <html> <body> <h1 id="id01">ਮੇਰਾ ਪਹਿਲਾ ਪੰਨਾ</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue; </script> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_js_dom_nav_innerhtml_2">ਸਵੈ ਸਿਖਾਓ</a></p> <h3>ਉਦਾਹਰਣ 3</h3> <pre class="language-html"> <html> <body> <h1 id="id01">ਮੇਰਾ ਪਹਿਲਾ ਪੰਨਾ</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue; </script> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_js_dom_nav_innerhtml_3">ਸਵੈ ਸਿਖਾਓ</a></p> </div> <div> <h2>InnerHTML</h2> <p>在本教程中，我们使用 <code>innerHTML</code> 取回 HTML 元素的内容。</p> <p>不过，学习以上其他的方法有助于理解 DOM 的树结构和导航。</p> </div> <div> <h2>DOM 根节点</h2> <p>有两个特殊属性允许访问完整文档：</p> <ul> <li>document.body - 文档的 body</li> <li>document.documentElement - 完整文档</li> </ul> <h3>ਉਦਾਹਰਣ</h3> <pre class="language-html"> <html> <body> <p>Hello World!</p> <div> <p>DOM 很有用！</p> <p>本例演示 <b>document.body</b> 属性。</p> </div> <script> alert(document.body.innerHTML); </script> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_js_dom_nav_body">ਸਵੈ ਸਿਖਾਓ</a></p> <h3>ਉਦਾਹਰਣ</h3> <pre class="language-html"> <html> <body> <p>Hello World!</p> <div> <p>DOM 很有用！</p> <p>本例演示 <b>document.documentElement</b> 属性。</p> </div> <script> alert(document.documentElement.innerHTML); </script> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_js_dom_nav_document">ਸਵੈ ਸਿਖਾਓ</a></p> </div> <div> <h2>nodeName 属性</h2> <p><code>nodeName</code> 属性规定节点的名称。</p> <ul> <li>nodeName 是只读的</li> <li>元素节点的 nodeName 等同于标签名</li> <li>属性节点的 nodeName 是属性名称</li> <li>文本节点的 nodeName 总是 #text</li> <li>文档节点的 nodeName 总是 #document</li> </ul> <h3>ਉਦਾਹਰਣ</h3> <pre class="language-html"> <h1 id="id01">ਮੇਰਾ ਪਹਿਲਾ ਵੈੱਬਸਾਈਟ</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; </script> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_js_dom_nav_nodename">ਸਵੈ ਸਿਖਾਓ</a></p> <p class="note"><span>注释：</span>nodeName 总是包含 HTML 元素的大写标签名。</p> </div> <div> <h2>nodeValue 属性</h2> <p><code>nodeValue</code> 属性规定节点的值。</p> <ul> <li>元素节点的 nodeValue 是 undefined</li> <li>文本节点的 nodeValue 是文本文本</li> <li>属性节点的 nodeValue 是属性值</li> </ul> </div> <div> <h2>nodeType 属性</h2> <p><code>nodeType</code> 属性返回节点的类型。<code>nodeType</code> ਹੈ ਅਧਿਕਾਰਿਤ ਹੈ。</p> <h3>ਉਦਾਹਰਣ</h3> <pre class="language-html"> <h1 id="id01">ਮੇਰਾ ਪਹਿਲਾ ਵੈੱਬਸਾਈਟ</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; </script> </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_js_dom_nav_nodetype">ਸਵੈ ਸਿਖਾਓ</a></p> <p>ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ nodeType ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ:</p> <table class="dataintable"> <tr> <th>ਨੋਡ</th> <th>ਇੰਪੀਰੈਂਸ</th> <th>ਉਦਾਹਰਣ</th> </tr> <tr> <td>ELEMENT_NODE</td> <td>1</td> <td><h1 class="heading">W3School</h1></td> </tr> <tr> <td>ATTRIBUTE_NODE</td> <td>2</td> <td>class = "heading" (ਤਿਆਗ ਦਿੱਤਾ ਗਿਆ ਹੈ)</td> </tr> <tr> <td>TEXT_NODE</td> <td>3</td> <td>W3School</td> </tr> <tr> <td>COMMENT_NODE</td> <td>8</td> <td></td> </tr> <tr> <td>DOCUMENT_NODE</td> <td>9</td> <td>HTML ਦਸਤਾਵੇਜ਼ ਹੀ ਹੈ (<html> ਦਾ ਮਾਤਾ)</td> </tr> <tr> <td>DOCUMENT_TYPE_NODE</td> <td>10</td> <td><!Doctype html></td> </tr> </table> <p>Type 2 ਹੈਲਟ ਵਿੱਚ ਤਿਆਗ ਦਿੱਤਾ ਗਿਆ ਹੈ।XML DOM ਵਿੱਚ ਤਿਆਗ ਦਿੱਤਾ ਨਹੀਂ ਗਿਆ ਹੈ。</p> </div> <div class="prenextnav"> <ul> <li> ਪਿਛਲਾ ਪੰਨਾ <a href="/pa/js/js_htmldom_eventlistener.html" title="JavaScript HTML DOM ਈਵੈਂਟ ਲਿਸਨਰ">DOM ਈਵੈਂਟ ਲਿਸਟਨਰ</a></li> <li> ਅਗਲਾ ਪੰਨਾ <a href="/pa/js/js_htmldom_nodes.html" title="JavaScript HTML DOM ਐਲੀਮੈਂਟ (ਨੋਡ)">DOM ਨੋਡ</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> ਟੂਲਸ ਬਾਕਸ </center><h3> <h5 id="tools_reference"><a href="/pa/jsref/index.html">JavaScript ਅਤੇ HTML DOM ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ</a></h5> <h5 id="tools_example"><a href="/pa/js/js_examples.html">JavaScript ਇੰਸਟੈਂਸ</a></h5> <h5 id="tools_quiz"><a href="/pa/js/js_quiz.html">JavaScript ਟੈਸਟ</a></h5> <h5 id="tools_professional"><a href="/pa/js/index_pro.html">JavaScript ਐਡਵਾਂਸ ਟੂਰ</a></h5> </div> <div><h3><center> ਸਪਾਂਸਰ ਲਿੰਕ </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com ਵੱਲੋਂ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਸਮਗਰੀ ਟ੍ਰੇਨਿੰਗ ਅਤੇ ਟੈਸਟ ਲਈ ਹੈ, ਸਮਗਰੀ ਦੀ ਸਹੀਤਾ ਨੂੰ ਨਹੀਂ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ।ਇਸ ਸਾਈਟ ਦੇ ਸਮਗਰੀ ਦੀ ਵਰਤੋਂ ਨਾਲ ਆਉਣ ਵਾਲੇ ਜੋਖਮ ਇਸ ਸਾਈਟ ਨਾਲ ਸਬੰਧੀ ਨਹੀਂ ਹਨ।ਕਾਪੀਰਾਈਟ ਸਾਰੀਆਂ ਅਧਿਕਾਰ ਸੁਰੱਖਿਅਤ ਹਨ, ਸਾਰੇ ਅਧਿਕਾਰ ਸੁਰੱਖਿਅਤ ਹਨ。 </p> <p id="p2"> <a href="/pa/about/index.html" title="ਬਾਰੇ CodeW3C.com">ਬਾਰੇ CodeW3C.com</a> <a href="/pa/about/about_helping.html" title="ਮਦਦ CodeW3C.com">ਮਦਦ CodeW3C.com</a> <a href="/pa/about/about_use.html" title="ਬਾਰੇ ਵਰਤੋਂ">ਵਰਤੋਂ ਸ਼ਰਤਾਂ</a> <a href="/pa/about/about_privacy.html" title="ਬਾਰੇ ਗੁੱਪੀ">ਗੁੱਪੀ ਸ਼ਰਤਾਂ</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="ਸਾਈਟ ਦੁਆਰਾ Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>