js node

原創 sdt0263 2020-06-16 04:35
Node的屬性介紹：  
  1. nodeType：顯示節點的類型   
  2. nodeName：顯示節點的名稱   
  3. nodeValue：顯示節點的值   
  4. attributes：獲取一個屬性節點   
  5. firstChild：表示某一節點的第一個節點   
  6. lastChild：表示某一節點的最後一個子節點   
  7. childNodes：表示所在節點的所有子節點   
  8. parentNode：表示所在節點的父節點   
  9. nextSibling：緊挨着當前節點的下一個節點   
  10. previousSibling：緊挨着當前節點的上一個節點   
  11. ownerDocument：（不知）   
  12.   
  13. Node有各種各樣的節點，我們先花一些時間認識他們，同時一併瞭解nodeType，nodeName和nodeValue屬性：   
  14. 名稱：元素節點   
  15. nodeType：ELEMENT_NODE   
  16. nodeType值：1   
  17. nodeName：元素標記名   
  18. nodeValue：null  
  19.   
  20. <body>   
  21. <div id = "t" ><span></span></div>   
  22. </body>   
  23. <script>   
  24. var d = document.getElementById("t");   
  25. document.write(d.nodeType);   
  26. document.write(d.nodeName);   
  27. document.write(d.nodeValue);   
  28. //顯示 1 DIV null   
  29. </script>   
  30. 名稱：屬性節點   
  31. nodeType：ATTRIBUTE_NODE   
  32. nodeType值：2   
  33. nodeName：屬性名   
  34. nodeValue：屬性值   
  35.   
  36. <body>   
  37. <div id = "t" name="aaa"><span></span></div>   
  38. </body>   
  39. <script>   
  40. var d = document.getElementById("t").getAttributeNode("name");   
  41. document.write(d.nodeType);   
  42. document.write(d.nodeName);   
  43. document.write(d.nodeValue);   
  44. //顯示 2 name aaa   
  45. </script>   
  46. 名稱：文本節點   
  47. nodeType：TEXT_NODE   
  48. nodeType值：3   
  49. nodeName：#text   
  50. nodeValue：文本內容   
  51.   
  52. <body>   
  53. <div id = "t">bbb</div>   
  54. </body>   
  55. <script>   
  56. var d = document.getElementById("t").firstChild;   
  57. document.write(d.nodeType);   
  58. document.write(d.nodeName);   
  59. document.write(d.nodeValue);   
  60. //顯示 3 #text bbb    
  61. </script>   
  62. 名稱：CDATA文本節點（XML中傳遞文本的格式）   
  63. nodeType：CDATA_SECTION_NODE   
  64. nodeType值：4   
  65. nodeName：#cdata-section   
  66. nodeValue：CDATA文本內容   
  67.   
  68. （作者省略8個屬性，需技術補充）   
  69.   
  70. attributes屬性，直接獲取一個屬性節點，注意這裏要使用[]，保持IE和FF的兼容性。   
  71.   
  72. <body name="ddd">   
  73. <div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  74. </body>   
  75. <script>   
  76. var d = document.getElementById("t").attributes["name"];   
  77. document.write(d.name);   
  78. document.write(d.value);   
  79. //顯示 name aaa   
  80. </script>   
  81. firstChild和lastChild屬性，表示某一節點的第一個和最後一個子節點：   
  82.   
  83. <body>   
  84. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  85. </body>   
  86. <script>   
  87. var d = document.getElementById("t");   
  88. document.write(d.firstChild.innerHTML);   
  89. document.write(d.lastChild.innerHTML);   
  90. //顯示 aaa ccc   
  91. </script>   
  92. childNodes和parentNode屬性，表示所在節點的所有子節點和所在節點的父節點，這裏的childNodes注意是一個數組：   
  93.   
  94. <body name="ddd">   
  95. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  96. </body>   
  97. <script>   
  98. var d = document.getElementById("t");   
  99. document.write(d.childNodes[1].innerHTML);   
  100. document.write(d.parentNode.getAttribute("name"));   
  101. //顯示 bbb ddd   
  102. </script>   
  103. nextSibling和previousSibling屬性，分別表示在parentNode的childNodes[]數組中，緊挨着當前節點的上一個和下一個節點：   
  104.   
  105. <body name="ddd">   
  106. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  107. </body>   
  108. <script>   
  109. var d = document.getElementById("t").childNodes[1];   
  110. document.write(d.nextSibling.innerHTML);   
  111. document.write(d.previousSibling.innerHTML);   
  112. //顯示 ccc aaa   
  113. </script>   
  114. ownerDocument屬性（不知如何使用）   
  115.   
  116. Node的方法介紹：   
  117.   
  118. hasChildNodes()：判定一個節點是否有子節點   
  119. removeChild()：去除一個節點   
  120. appendChild()：添加一個節點   
  121. replaceChild()：替換一個節點   
  122. insertBefore()：指定節點位置插入一個節點   
  123. cloneNode()：複製一個節點   
  124. normalize()：（不知）   
  125.   
  126. hasChildNodes()方法：判定一個節點是否有子節點，有返回true，沒有返回false  
  127.   
  128. <body name="ddd">   
  129. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  130. <div id = "m"></div>   
  131. </body>   
  132. <script>   
  133. alert(document.getElementById("t").hasChildNodes());   
  134. alert(document.getElementById("m").hasChildNodes());   
  135. // 第一個true，第二個false   
  136. </script>   
  137. removeChild()方法：去除一個節點   
  138.   
  139. <body name="ddd">   
  140. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  141. </body>   
  142. <script>   
  143. var d = document.getElementById("t").firstChild;   
  144. document.getElementById("t").removeChild(d);   
  145. // <span>aaa</span>被去除   
  146. </script>   
  147. appendChild()方法：添加一個節點，如果文檔樹中已經存在該節點，則將它刪除，然後在新位置插入。   
  148.   
  149. <body name="ddd">   
  150. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  151. </body>   
  152. <script>   
  153. var d = document.getElementById("t").firstChild;   
  154. document.getElementById("t").appendChild(d);   
  155. // <span>aaa</span>成了最後一個節點   
  156. </script>   
  157. replaceChild()方法：從文檔樹中刪除（並返回）指定的子節點，用另一個節點來替換它。   
  158.   
  159. <body name="ddd">   
  160. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  161. </body>   
  162. <script>   
  163. var newd = document.createElement("span");   
  164. newd.innerHTML = "eee";   
  165. var oldd = document.getElementById("t").lastChild;   
  166. document.getElementById("t").replaceChild(newd,oldd);   
  167. // 最後一項成了 eee   
  168. </script>   
  169. insertBefore()方法：在指定節點的前面插入一個節點，如果已經存在，則刪除原來的，然後在新位置插入   
  170.   
  171. <body name="ddd">   
  172. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>   
  173. </body>   
  174. <script>   
  175. var newd = document.createElement("span");   
  176. newd.innerHTML = "eee";   
  177. var where = document.getElementById("t").lastChild;   
  178. document.getElementById("t").insertBefore(newd,where);   
  179. // 在最後一項的前面多了一項 eee   
  180. </script>   
  181. cloneNode()方法：複製一個節點，該方法有一個參數，true表示同時複製所有的子節點，false表示近複製當前節點   
  182.   
  183. <body name="ddd">   
  184. <div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div>   
  185. </body>   
  186. <script>   
  187. var what = document.getElementById("t").cloneNode(false).innerHTML;   
  188. document.getElementById("m").innerHTML = what;   
  189. // 增加了一個aaabbbccc   
  190. </script>  
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

XML----DOM4J

用DOM4J解析XML文檔簡介 vDom4j是一個簡單、靈活的開放源代碼的庫。Dom4j是由早期開發JDOM開發的。與JDOM不同的是，dom4j使用接口和抽象的人分離出來而後獨立基類，雖然Dom4j的API相對要複雜一些，但它提供了

李冰华 2020-07-08 09:14:07

Python學習隨記（持續更新）

在網上找了找了一通，python的教程不少，但個人覺得最符合我的習慣的還是這本書《《dive into python》》，這本書沒有一開始就那幾本書法開刀，而是引用示例做例證，然後一步一的深入，比較符合我的學習習慣！就定下它了   1.

wujieyhy2006 2020-07-08 06:29:39

@property 屬性介紹

property declaration 屬性聲明 爲實例變量指定屬性(attributes)的途徑, 可讓編譯好器生成 無泄漏和線程安全的訪問實例變量的方法. @property 就是對應的編譯器指令 聲明一個與數據成員同名的屬性

yanxiaoqing 2020-07-08 11:39:41

配置Spring+hibernate使用ehcache作爲second-level cache

大量數據流動是web應用性能問題常見的原因，而緩存被廣泛的用於優化數據庫應用。cache 被設計爲通過保存從數據庫裏load的數據來減少應用和數據庫之間的數據流動。數據庫訪問只有當檢索的數據不在cache 裏可用時才必要。hiberna

jeff2007 2020-07-08 09:06:09

B2ATHADD附件壓縮插件

B2ATHADD附件壓縮插件 2005年1月24日12:18星期一  [B2PlugIn] DOWNLOAD下載 務必在郵箱下新建B2ATHADD目錄，以進行郵件備份！ 菜單名稱從B2AWS拷貝過來忘了更改 0.01    插件功能：將

yippeesk 2020-07-08 12:22:24

window.open()用法詳解

 <SCRIPT> <!-- window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollba

lpz283929516 2020-07-08 07:40:43

將實體類或者集合序列化爲xml（xmlDataDocument）

         /// <summary>        /// 將數據序列化爲Xml        /// </summary>        /// <param name="oType">被序列化的數據類型（實體類類型或者集合類型

zrz009 2020-07-08 11:14:16

dom4j解析.xml文件

xml 是可擴展的標記性語言。xml 的主要作用有： 1、用來保存數據，而且這些數據具有自我描述性 2、它還可以做爲項目或者模塊的配置文件 3、還可以做爲網絡傳輸數據的格式（現在 JSON 爲主）。 CDATA 語法可以告訴 xml 解析

ζMonster° 2020-07-08 10:45:03

C#序列化對象轉爲爲XML格式字符串

實習公司原來的左側菜單是通過js進行ajax請求一個xml文件得到一個xml對象，然後拼接html文件，現在需要從數據庫取數據生成xml，因爲保密關係，太詳細的不能放出來，簡單說下流程 1、C#後臺執行SQL，得到DataTable對象

请叫我算术嘉 2020-07-08 10:17:16

自定義和管理工作項類型 [witadmin]

可以使用以下 witadmin 命令管理團隊項目的工作項類型： destroywitd：銷燬工作項類型和銷燬永不恢復的該類型的每個工作項。 exportwitd：將工作項類型的定義導出到 XML 文件或命令提示符窗口。 i

银月术 2020-07-08 09:14:45

mybatis-初始化(三)statement解析

概述 Statement是我們平時sql的載體，一條sql代表一個Statement，來看下mybatis如何解析Statement。 接着上篇最後的入口 private void buildStatementFromContex

请叫我程序猿大人 2020-07-08 07:54:47

MyEclipse創建一個servlet，繼承自javax.servlet.GenericServlet,輸出hello j2ee！

MyEclipse創建一個servlet，繼承自javax.servlet.GenericServlet來做,在瀏覽器輸出hello j2ee。 1.打開MyEclipse,新建一個Web Project，步驟： 點擊“File”

悦 Smily 2020-07-08 07:53:28

C++各大名庫之XML

在C++中，庫的地位是非常高的。C++之父 Bjarne Stroustrup先生多次表示了設計庫來擴充功能要好過設計更多的語法的言論。現實中，C++的庫門類繁多，解決的問題也是極其廣泛，庫從輕量級到重量級的都有。不少都是讓人眼界大開，亦

wz7654321 2020-07-08 06:35:09

最常用的12種CSS BUG解決方法與技巧

  最常用的12種CSS BUG解決方法與技巧一、 針對瀏覽器的選擇器 　　這些選擇器在你需要針對某款瀏覽器進行css設計時將非常有用. 　　IE6及其更低版本，本文由52CSS.com整理，轉載請註明出處！ 　　* html {} 　

cecoo 2020-07-08 06:13:56

IE、FF等瀏覽器JS不同操作處理

                                                             IE                                     FF event           

jiunizhuai 2020-07-08 05:11:00