javascript學習筆記(十九) 節點的操作實作程式碼

首頁

web前端

js教程

javascript學習筆記(十九) 節點的操作實作程式碼_基礎知識

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:52 PM

節點操作

本節要用到的html範例

複製程式碼程式碼如下:

 
項目一

項目二

項目三

1.建立元素節點
document.createElement() 方法用於建立元素，接受一個參數，即要建立元素的標籤名，傳回建立的元素節點

複製程式碼程式碼如下:

 
var div = document.createElement("div"); //建立一個div元素
div.id = "myDiv"; //設定div的id 
div.className = "box"; //設定div的class 

建立元素後還要把元素加入到文件樹中

2.新增元素節點
appendChild() 方法用於在childNodes清單的末端新增一個節點，傳回要新增的元素節點

複製程式碼程式碼如下:

 
var ul = document.getElementById("myList"); //取得ul 
var li = document. createElement("li"); //建立li 
li.innerHTML = "項目四"; //在li內加入文字
ul.appendChild(li); //把li 加入ul子節點的結尾

新增後:

複製程式碼程式碼如下:

項目一

項目二

項目三

項目四

appendChild() 方法還可以加入已經存在的元素，會將元素從原來的位置移到新的位置

複製程式碼程式碼如下: var ul = document.getElementById("myList"); ul

ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾

運行後(IE)：

複製程式碼程式碼如下:

項目二

項目三

項目一

insertBefore() 方法，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個參數，第一個是要插入的節點，第二個是參照節點，返回要添加的元素節點

複製程式碼程式碼如下: var ul = document.getElementById("myList");取得ul

var li = document.createElement("li"); //建立li

li.innerHTML= "項目四"; //為li內新增文字
ul.insertBefore(li,ul .firstChild); //把li加到ul的第一個子節點前

 
加後: 

複製程式碼複製程式碼

代碼如下:

 
項目四

項目一

項目二

項目三

複製程式碼

程式碼如下:

 
var ul = document.getElementById("myList"); //取得ul 
var li = document.create ("li"); //建立li 
li.innerHTML= "項目四"; //在li內部加入文字
ul.insertBefore(li,ul.null); //把li加到ul的子節點末

新增後:

複製程式碼程式碼如下:

 
項目一

項目二

項目三

項目四

複製程式碼程式碼如下:

 程式碼如下:

 程式碼如下:

程式碼如下: 程式碼如下：var ul = document.getElementById("myList"); //取得ul var li = document.createElement("li"); //建立li li.innerHTML= "項目四"; //在li內加入文字

var lis = ul.getElementsByTagName("li") //取得ul中所有li的集合

ul.insertBefore(li,lis[1]); 　　　　//把li加到ululul中的第二個li節點前

新增後:

複製程式碼

程式碼如下:

項目一

項目四

項目二 li>

項目三

 
3.移除元素節點
removeChild() 方法，用於移除節點，接受一個參數，即要移除的節點，返回被移除的節點，注意被移除的節點仍然在文檔中，不過文檔中已沒有其位置了

複製程式碼

程式碼如下: var ul = document.getElementById("myList"); //取得ul var fromFirstChild = ul.remove (ul.firstChild); //移除ul第一個子節點1 var ul = document.getElementById("myList"); //取得ul var lis = ul.getElementsByTagName("li") //取得ul中所有li的集合

ul.removeChild(lis[0]); 　　　　　　//移除第一個li，與上面不同，要考慮瀏覽器之間的差異

 
4 .替換元素節點
replaceChild() 方法，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要替換的節點，返回被替換的節點

複製程式碼

程式碼如下:

var ul = document.getElementById("myList"); //取得ul var fromFirstChild = ul.replaceChild(ul.firstChild); //取代ul第一個子節點1 var ul = document.getElementById("myList"); //取得ul; var li = document.createElement ("li"); //建立li li.innerHTML= "項目四"; //在li內部加入文字var lis = ul.getElementsByTagName("li") //取得ul中所有li的集合

var returnNode = ul.replaceChild(li,lis[1]); //用建立的li取代原來的第二個li

 
5.複製節點
cloneNodeNode () 方法，用於複製節點， 接受一個布林值參數， true 表示深複製（複製節點及其所有子節點）， false 表示淺複製（複製節點本身，不複製子節點） 

複製程式碼程式碼如下: var ul = document.getElementById("myList");取得 //取得ul var deepList = ul.cloneNode(true); //深複製var shallowList = ul.cloneNode(false); //淺複製節點的操作要注意IE和其它瀏覽器的差異（第十八節有講到）

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。