節(jié)點及其類型

元素節(jié)點

屬性節(jié)點: 元素的屬性, 可以直接通過屬性的方式來操作.

文本節(jié)點: 是元素節(jié)點的子節(jié)點, 其內容為文本.

在 html 文檔的什么位置編寫 js 代碼

• 直接在 html 頁面中書寫代碼， js 和 html 強耦合, 不利用代碼的維護

• 一般地, 不能在 body 節(jié)點之前來直接獲取 body 內的節(jié)點, 因為此時 html 文檔樹還沒有加載完成,
• 一般地, 在 body 節(jié)點之前編寫 js 代碼, 但需要利用 window.onload 事件,該事件在當前文檔完全加載之后被觸發(fā), 所以其中的代碼可以獲取到當前文檔的任何節(jié)點.

• 在整個 html 文檔的最后編寫類似代碼，有利于頁面的加載

window.onload = function(){};

獲取元素節(jié)點

document.getElementById: 根據(jù) id 屬性獲取對應的單個節(jié)點

document.getElementsByTagName：根據(jù)標簽名獲取指定節(jié)點名字的數(shù)組, 數(shù)組對象 length 屬性可以獲取數(shù)組的長度

document.getElementsByName：

• 根據(jù)節(jié)點的 name 屬性獲取符合條件的節(jié)點數(shù)組，但 ie 的實現(xiàn)方式和 W3C 標準有差別：

• • 在 html 文檔中若某節(jié)點(li)沒有 name 屬性，則 ie 使用 getElementsByName 不能獲取到節(jié)點數(shù)組, 但火狐可以.

獲取屬性節(jié)點

• 可以直接通過 cityNode.id 這樣的方式來獲取和設置屬性節(jié)點的值
• 通過元素節(jié)點的 getAttributeNode 方法來獲取屬性節(jié)點, 然后在通過 nodeValue 來讀寫屬性值

獲取元素的子節(jié)點

• childNodes 屬性獲取全部的子節(jié)點, 但該方法不實用. 因為如果要獲取指定的節(jié)點 的指定子節(jié)點的集合, 可以直接調用元素節(jié)點的 getElementsByTagName() 方法來獲取.
• firstChild 屬性獲取第一個子節(jié)點
• lastChild 屬性獲取最后一個子節(jié)點

獲取文本節(jié)點

• 步驟: 元素節(jié)點 --> 獲取元素節(jié)點的子節(jié)點
• 若元素節(jié)點只有文本節(jié)點一個子節(jié)點, 可以先獲取到指定的元素節(jié)點 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法來讀寫其文本節(jié)點的值

節(jié)點的屬性

• nodeName：代表當前節(jié)點的名字。只讀屬性，如果給定節(jié)點是一個文本節(jié)點, nodeName 屬性將返回內容為 #text 的字符串

• nodeType：返回一個整數(shù), 這個數(shù)值代表著給定節(jié)點的類型，只讀屬性。1 -- 元素節(jié)點, 2 -- 屬性節(jié)點, 3 -- 文本節(jié)點

• nodeValue：返回給定節(jié)點的當前值(字符串). 可讀寫的屬性

• • 元素節(jié)點, 返回值是 null.
  • 屬性節(jié)點: 返回值是這個屬性的值
  • 文本節(jié)點: 返回值是這個文本節(jié)點的內容

創(chuàng)建一個元素節(jié)點

? 1). createElement(): 按照給定的標簽名創(chuàng)建一個新的元素節(jié)點. 方法只有一個參數(shù)：被創(chuàng)建的元素節(jié)點的名字, 是一個字符串.

? 方法的返回值：是一個指向新建元素 節(jié)點的引用指針.

? 新元素節(jié)點不會自動添加到文檔里, 它只是一個存在于 JavaScript 上下文的對象.

創(chuàng)建一個文本節(jié)點

createTextNode()

• 返回值是一個指向新建文本節(jié)點引用指針.
• 方法只有一個參數(shù)：新建文本節(jié)點所包含的文本字符串.
• 新元素節(jié)點不會自動添加到文檔里

為元素節(jié)點添加子節(jié)點

• appendChild(), 方法的返回值是一個指向新增子節(jié)點的引用指針.
• 直接用innerHTML屬性也行

節(jié)點的替換

• replaceChild(newChild,oldChild)：

• • 把一個給定父元素里的一個子節(jié)點替換為另外一個子節(jié)點
  • 返回值是一個指向已被替換的那個子節(jié)點的引用指針

• 該節(jié)點除了替換功能以外還有移動的功能.

• 該方法只能完成單向替換, 若需要使用雙向替換, 需要自定義函數(shù):

function replaceEach(aNode, bNode){if(aNode == bNode){return; } var aParentNode = aNode.parentNode; //若 aNode 有父節(jié)點 if(aParentNode){var bParentNode = bNode.parentNode; } //若 bNode 有父節(jié)點 if(bParentNode){var tempNode = aNode.cloneNode(true);bParentNode.replaceChild(tempNode, bNode);aParentNode.replaceChild(bNode, aNode); }

插入節(jié)點

• insertBefore(newNode,targetNode)：

• • 把一個給定節(jié)點插入到一個給定元素節(jié)點的給定子節(jié)點的前面
  • 節(jié)點 targetNode 必須是 element 元素的一個子節(jié)點
  • 該方法同時含有移動的功能。

• 自定義 insertAfter() 方法（將 newChild 插入到 refChild 的后邊 ）

function insertAfter(newChild, refChild){var refParentNode = refChild.parentNode;//判斷 refChild 是否存在父節(jié)點if(refParentNode){//判斷 refChild 節(jié)點是否為其父節(jié)點的最后一個子節(jié)點if(refChild == refParentNode.lastChild){refParentNode.appendChild(newChild);}else{// 下一個兄弟節(jié)點refParentNode.insertBefore(newChild, refChild.nextSibling); }} }

刪除節(jié)點：

removeChild(node)

• 從一個給定元素里刪除一個子節(jié)點
• 返回值是一個指向已被刪除的子節(jié)點的引用指針. 節(jié)點被刪除時, 這個節(jié)點所包含的所有子節(jié)點將同時被刪除.
• 如果想刪除某個節(jié)點, 但不知道它的父節(jié)點是哪一個, parentNode 屬性可以幫忙。

DOM對象與JQuery對象互轉

jQuery對象是一個DOM對象數(shù)組，可以使用數(shù)組下標的方式轉為DOM對象

var btn = $("#btn-add")[0];

$(dom)將Dom轉為jquery對象

轉載于:https://www.cnblogs.com/mabaoqing/p/10624979.html

總結

以上是生活随笔為你收集整理的JavsScript中DOM的基本操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。