JavaScript DOM

時間 2020-12-07

標籤 javascript html java node 編程數組瀏覽器網絡 app dom 欄目 JavaScript 简体版

原文原文鏈接

JavaScript DOM 編程javascript

DOMhtml

- D：文檔 - html 文檔或 xml 文檔
- O：對象 - document 對象的屬性和方法
- M：模型
- DOM 是針對 xml 的基於樹的API
- DOM 樹：節點的層次
- DOM 把一個文檔表示爲一顆家譜樹（父，子，兄弟）
- DOM 定義了 Node 接口以及許多種節點類型來表示 XML 節點的多個方面

1，節點及其類型
節點：來源於網絡理論，表明網絡中一個鏈接點，網絡是由節點構成的集合
①，元素節點
②，屬性節點：元素的屬性，能夠直接經過屬性的方式來操做
③，文本節點：是元素節點的子節點，其內容爲文本java

2，在 html 文檔的什麼位置編寫 js 代碼
① 直接在 HTML 頁面中書寫 js代碼node

<button id="button" onclick="alert('hello world');">Click Me!</button>

缺點：
a，js 和 HTML 強耦合，不利於代碼的維護
b，若 click 相應函數是比較複雜的，則需先定義一個函數，而後在 onclick 屬性中完成對函數的引用，比較麻煩
② 通常的，不能在 body 節點以前來直接獲取 body 內的節點，由於此時 html 文檔樹尚未加載完成，獲取不到指定的節點編程

<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  　　<title>Untitled Document</title>
  　　<script type="text/javascript">
   　　　　var cityNode = document.getElementById("city");
   　　　　alert(cityNode);
  　　</scitpt>
　　</head>
　　<body>
　　</body>
</html>

③ 能夠在整個 HTML 文檔的最後編寫相似代碼，但這不符合習慣
④ 通常的，在 body 節點以前編寫 js代碼，但須要利用 windom.onload 事件，該事件在當前文檔徹底加載以後被觸發，如：數組

<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  　　<title>Untitled Document</title>
  　　<script type="text/javascript">
  　　　　window.onload = function(){
    　　　　// js代碼
  　　　　}
 　　　</scitpt>
　　</head>
　　<body>
　　</body>
</html>

Node接口的特性和方法瀏覽器

nodeName：String，說明：
nodeVale：String
nodeType：Number
ownerDocument：Document
firstChild：Node
lastChild：Node
childNodes：NodeList
previousSibling：Node
nextSibling：Node
hasChildNodes()：Boolean
attributes：NameNodeMap
appendChild(node)：Node
removeChild(node)：Node
replaceChild(newnode,oldnode)：Node
insertBefore(newnode,refnode)：Node

如下實例中使用到的 HTML 網絡

<body>
　　<p>你喜歡那個城市？</p>
　　<ul id="city">
  　　<li id="bj" name="BeiJing">北京</li>
  　　<li>上海</li>
  　　<li>東京</li>
  　　<li>首爾</li>
　　</ul>
　　<br><br>
　　<p>你喜歡哪款單機遊戲？</p> 
　　<ul id="game">
  　　<li id="rl">紅警</li>
  　　<li>實況</li>
  　　<li>極品飛車</li>
  　　<li>魔獸</li>
　　</ul>
　　<br><br>
　　gender:<input type="radio" name="gender" value="male">Male
   　　<input type="radio" name="gender" value="female">Female
　　name:<input type="text" name="username" id="name" value="chuxiaojiang"> 
</body>

3，如何來獲取元素節點
① **document.getElementById：
根據 id 屬性獲取對應的單個節點，該方法爲 document對象的方法
② **document.getElementsByTagName：
根據標籤名獲取指定節點名字的數組，數組對象length屬性能夠獲取數組的長度，
該方法爲 Node接口的方法，即任何一個節點都有這個方法
③ document.getElementsByName：
根據節點的 name屬性獲取符合條件的節點數組，但IE的實現方式和 w3c標準有差異：
在html 文檔中若某節點(li) 沒有 name 屬性，
則 IE 使用 document.getElementsByName 不能獲取到節點數組，在火狐能夠
④ 其它的兩個方法，IE根本不支持，因此不建議使用app

4，獲取屬性節點
① **能夠直接經過 cityNode.id 這樣的方式來獲取和設置屬性節點(某一指定的元素節點的屬性)的值，如：
var nameNode = documentElementById("name"); // 獲取元素
alert(nameNode.value); // 獲取元素的值
nameNode.value = "chuxiaojiang"; // 設置元素的值
② 經過元素節點的 getAttributeNode 方法來獲取屬性節點，而後在經過 nodeValue 來讀寫屬性值dom

5，獲取元素節點的子節點（**只有元素節點纔有子節點）
使用下面的屬性時都須要先獲取相應的元素節點，
① childNodes屬性獲取所有的子節點：火狐和IE的實現方式有區別
② firstChild屬性獲取第一個節點
③ lastChild屬性獲取最後一個子節點

6，獲取文本節點
① 步驟：元素節點 --> 獲取元素節點的子節點
② 若元素節點只有文本節點一個子節點，
例如 <li id="bj" name="BeiJing">北京</li>，能夠先獲取到指定的元素節點 eleNode，
而後利用 eleNode.firstChild.nodeValue 的方法來讀寫其文本節點的值

7，節點的屬性
① nodeName：表明當前節點的名字，只讀屬性，
若是給定節點是一個文本節點，nodeName 屬性將返回內容爲 #text 的字符串
② nodeType：返回一個整數，這個數值表明着給定節點的類型，只讀屬性
1 -- 元素節點，2 -- 屬性節點，3 -- 文本節點
③ nodeValue：返回給定節點的當前值（字符串），可讀寫屬性
a，元素節點，返回值是 null
b，屬性節點：返回值是這個屬性的值
c，文本節點：返回值是這個文本節點的內容
如：

<script type="text/javascript">
 // 關於節點屬性：nodeType，nodeName，nodeValue
 // 在文檔中，任何一個節點都有這3個屬性
 // 而 id，name，value 是具體節點的屬性
 window.onload = function(){
  // 1，元素節點的這 3 個屬性
  var bjNode = document.getElementById("bj");
  alert(bjNode.nodeType); // 元素節點：1
  alert(bjNode.nodeName); // 節點名：li
  alert(bjNode.nodeValue); // 元素節點沒有 nodeValue 屬性值：null
  // 2，屬性節點
  var nameAttr = document.getElementById("name").getAttrbuteNode("name");
  alert(nameAttr.nodeType); // 屬性節點：2
  alert(nameAttr.nodeName); // 屬性節點的節點名：屬性名
  alert(nameAttr.nodeValue); // 屬性節點的 nodeValue 屬性值：屬性值
  // 3，文本節點
  var textNode = bjNode.firstChild;
  alert(textNode.nodeType); // 文本節點：3
  alert(textNode.nodeName); // 節點名：#text
  alert(textNode.nodeValue); // 文本節點的 nodeValue 屬性值：文本值自己

  // nodeType，nodeName 是隻讀的，nodeValue 是能夠改變的
  // 以上三個屬性只有在文本節點中使用 nodeValue 讀寫文本值時使用最多
 }
</script>

8，建立一個元素節點
① createElement()：按照給定的標籤名建立一個新的元素節點，該方法只有一個參數：
被建立的元素節點的名字，是一個字符串。
方法的返回值：是一個指向新建節點的引用指針，返回值是一個元素節點，因此它的 nodeType 屬性等於 1.
新元素節點不會自動添加到文檔裏，它只是一個存在於 JavaScript 上下文的對象
如：

<script type="text/javascript">
  window.onload = function(){
    // 新建立一個元素節點，並把該節點添加爲文檔中指定節點的子節點
    var liNode = document.createElement("li");
    var xmText = document.createTextNode("廈門"); // 建立 "廈門" 文本節點
    liNode.appendChild(xmText);
    var cityNode = document.getElementById("city");
    cityNode.appendChild(liNode);
  }
</script>

9，建立一個文本節點
① createTextNode()：建立一個包含着給定文本的新文本節點，
這個方法的返回值是一個指向新建文本節點引用指針，
它是一個文本節點，因此它的 nodeType 屬性等於 3，
方法只有一個參數：新建文本節點所包含的文本字符串，新元素節點不會自動添加到文檔中

10，爲元素節點添加子節點
① appendChild()：var reference = element.appendChild(newChild)：
給定子節點 NewChild 將成爲給定元素節點 element 的最後一個子節點，
方法的返回值是一個指向新增子節點的引用指針。

11，節點的替換
① replaceChild()：把一個給定父元素裏的一個子節點替換爲另外一個子節點，
var reference = element.replaceChild(newChild,oldChild)，返回值是一個指向已被替換的哪一個子節點（舊節點）的引用指針
② 該節點除了替換功能之外還有移動的功能
③ 該方法只能完成單向替換，若須要使用雙向替換，須要自定義函數：

12，插入節點
① insertBefore()：把一個給定節點插入到一個給定元素節點的給定子節點的前面，
var reference = element.insertBefore(newNode,targetNode);
節點 newNode 將被插入到元素節點 element 中並出如今節點 targetNode 的前面，
節點 targetNode 必須是 element 元素的一個子節點。
如：

window.onload = function(){
  var cityNode = document.getElementById("city");
  var bjNode = document.getElementById("bj");
  var rlNode = docuement.getElementById("rl");
  cityNode.insertBefore(rlNode,bjNode);
}

② 自定義 insertAfter() 方法

13，刪除節點
① removeChild()：從一個給定元素裏刪除一個子節點：var reference = element.removeChild(node);
返回值是一個指向已被刪除的子節點的引用指針，
某個節點被 removeChild() 方法刪除時，這個節點所包含的全部子節點將同時被刪除，
若是想刪除某個節點，但不知道它的的父節點是哪個，parentNode 屬性能夠幫忙
如：
var bjNode = document.getElementById("bj"); // 找到要刪除的節點
bjNode.parentNode.removeChild(bjNode); // 利用要刪除的節點的父節點執行刪除操做

14，innerHTML 屬性① 瀏覽器幾乎都支持該屬性，但不是 DOM 標準的組成部分， innerHTML 屬性能夠用來讀寫某個給定元素裏的 HTML 內容