JavaScript DOM 編程
??DOM
- D：檔案 - html 檔案或 xml 檔案 - O：物件 - document 物件的屬性和方法 - M：模型 - DOM 是針對 xml 的基于樹的API - DOM 樹：節點的層次 - DOM 把一個檔案表示為一顆家譜樹（父，子，兄弟） - DOM 定義了 Node 介面以及許多種節點型別來表示 XML 節點的多個方面
??1，節點及其型別
節點：來源于網路理論，代表網路中一個連接點，網路是由節點構成的集合
①，元素節點
②，屬性節點：元素的屬性，可以直接通過屬性的方式來操作
③，文本節點：是元素節點的子節點，其內容為文本
??2，在 html 檔案的什么位置撰寫 js 代碼
① 直接在 HTML 頁面中書寫 js代碼
<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="https://www.cnblogs.com/cxiaojiang/archive/2020/12/06/male">Male ??? <input type="radio" name="gender" value="https://www.cnblogs.com/cxiaojiang/archive/2020/12/06/female">Female name:<input type="text" name="username" id="name" value="https://www.cnblogs.com/cxiaojiang/archive/2020/12/06/chuxiaojiang">? </body>
??3，如何來獲取元素節點
① **document.getElementById：
?根據 id 屬性獲取對應的單個節點，該方法為 document物件的方法
② **document.getElementsByTagName：
?根據標簽名獲取指定節點名字的陣列，陣列物件length屬性可以獲取陣列的長度，
?該方法為 Node介面的方法，即任何一個節點都有這個方法
③ document.getElementsByName：
?根據節點的 name屬性獲取符合條件的節點陣列，但IE的實作方式和 w3c標準有差別：
?在html 檔案中若某節點(li) 沒有 name 屬性，
?則 IE 使用 document.getElementsByName 不能獲取到節點陣列，在火狐可以
④ 其它的兩個方法 ，IE根本不支持，所以不建議使用
??4，獲取屬性節點
① **可以直接通過 cityNode.id 這樣的方式來獲取和設定屬性節點(某一指定的元素節點的屬性)的值，如：
?var nameNode = documentElementById("name");?// 獲取元素
?alert(nameNode.value);?// 獲取元素的值
?nameNode.value = "https://www.cnblogs.com/cxiaojiang/archive/2020/12/06/chuxiaojiang";?// 設定元素的值
② 通過元素節點的 getAttributeNode 方法來獲取屬性節點，然后在通過 nodeValue 來讀寫屬性值
??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 內容
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/230958.html
標籤：其他
上一篇：Vue.js--基礎篇