DOM 方法與屬性
DOM方法
- 創建節點
- createElement:創建元素節點
- createTextNode:創建文本節點
- 復制節點
- cloneNode
- 插入節點
- appendChild:給元素節點追加一個子節點
- insertBefore:把一個給定節點插入到一個給定元素節點的前面
- 刪除節點
- removeChild:從一個給定元素里刪除一個子節點
- 替換節點
- replaceChild:把一個給定父元素里的一個子節點,替換為另一個節點
- 設置屬性節點
- setAttribute:為給定元素節點添加一個新的屬性值或是改變它的現有屬性值
- 查找節點
- getAttribute:返回一個給定元素節點的一個給定屬性的值
- getElementById:尋找一個有著給定id屬性值的元素
- getElementsByTagName:尋找有著給定標簽名的所有元素
- hasChildNodes:用來檢查一個給定元素是否有子節點
DOM屬性
- 節點的屬性
- nodeName:返回一個字符串,其內容是給定節點的名字,只讀
- nodeType:返回一個整數,代表給定節點的類型,一共有12種,1:元素節點,3:文本節點
- nodeValue:返回給定節點的當前值
- 遍歷節點樹
- childNodes:返回一個數組,這個數組由給定元素節點的子節點構成
- firstChild:返回一個給定元素節點的第一個子節點
- lastChild:返回一個給定元素節點的最后一個子節點
- nextSibling:返回一個給定節點的下一個同一個父節點的節點
- parentNode:返回給定節點的父節點
- previousSibling:返回一個給定節點的前一個同一個父節點的子節點
DOM 方法:
創建節點:以下DOM方法的基本用途是創建新節點。
- createElement()
createElement()方法所返回的引用指針指向一個節點對象。它是一個元素節點,所以它的nodyType屬性值將等于1;
varr para = document.createElement("p");
在這個例子里,para.nodeType返回值將是1。para.nodeName返回值將是p或P.
用 createElement()方法創建出來的新元素節點不會被自動添加到文檔里。新節點沒有nodeParent屬性,它只是一個存在于JavaScript上下文里的DocumentFragment對象。如果想把這個DocumentFragment對象添加到你的文檔里,則需要使用appendChild()或insertBefore()方法(參見“插入節點”)或replaceChild()方法(參見“替換節點”);
var para = document.createElement("p");
document.body.appentdChild(para);
這個例子將創建一個p元素,并把這個新創建的元素追加為body元素的lastchild子節點。
你可以在任何時候對新創建出來的元素使用其他DOM方法。比如說,你隨時都可以對新元素的任意屬性進行設置(參見”處理節點“),即使在把這個元素插入文檔之前也可以這樣做。
var para = document.createElement("p");
para.setAttribute("title","My paragraph");
document.body.appendChild(para);
當然,也完全可以先把新元素插入文檔,再對它的屬性進行設置:
var para = document.createElement("p");
document.body.appendChild(para);
para.setAttribute("title","My paragraph");
- createTextNode()
createTextNode()方法將創建一個包含著給定文本的新文本節點。這個方法的返回值是一個指向新建文本節點的引用指針;
reference = document.createTextNode(text)
這個方法只有一個參數:新建文本節點所包含的文本字符串;
reference = document.createTextNode("hello world")
createTextNode() 方法所返回的引用指針指向一個節點對象,它是一個文本節點,所以它的nodeType屬性值將等于3;
var message = document.createTextNode("hello world");
在這個例子里,message.nodeType返回的值將是3。message.nodeName返回的值將是#text。
用createTextNode()方法創建的新文本節點不會被自動添加到文檔里,新節點沒有parentNode 屬性。如果想把新創建的文本節點添加到你的文檔里,則需要使用appendChild()或insertBefore()方法(參加”插入節點“)或replaceChild()方法(參加“替換節點”);
var message = document.createTextNode("hello world");
var container = document.getElementById("intro");
container.appendChild(message);
這個例子將創建一個包含文本“hello world”的文本節點,并把這個文本節點追加到id屬性值等于"intro"的那個元素。
createTextNode()經常與createELement()方法配合使用。以下語句將創建一段HTML內容并把它插入文檔:
var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);
在這個例子里,第一條語句創建了一個包含著文本“hello world”的文本節點,并把由createTextNode()方法返回的引用指針賦值給了變量message。第二條語句用createElement()方法創建了一個p元素,并將其引用指針賦值給了變量container。第三條語句用appendChild()方法把message文本節點插入了container元素節點。第四條語句把刷新后的container元素追加給了文檔的body元素。
復制節點
DOM 提供了一個用來復制節點的方法。
- cloneNode()
cloneNode()方法將為給定節點創建一個副本。這個方法的返回值是一個指向新建克隆節點的引用指針:
reference = node.cloneNode(deep)
這個方法只有一個布爾類型的參數,它的可取值只能是true或false。這個參數決定著是否要把復制節點的子節點也一同復制到新建節點里去。如果這個參數的值是true,新節點將包含著與被復制節點完全一樣的子節點。如果這個參數的值是false,新節點將不包含任何子節點——如果被復制節點是一個元素節點,這意味著包含在被復制節點里的所有文本將不會被復制(那些文本是一個子節點),但屬性節點將被復制:
reference = node.cloneNode(true)
reference = node.cloneNode(false)
cloneNode()方法所返回的引用指針指向一個節點對象,新節點有著與被復制節點完全一樣的nodeType和nodeName屬性值;
var para = document.createElement("p");
var newpara = para.cloneNode(false);
在這個例子里,先創建了一個新的元素節點para,然后通過復制para元素節點又創建了一個新的元素節點newpara。para.nodeType返回的值將是1(一個元素節點), newpara.nodeType返回的值也將是1。
再來看一個例子:
var message = document.createElement("hello world");
var newmessage = message.cloneNode(false);
在此例子中,先創建了一個新的文本節點message,如何通過復制message文本節點又創建了一個新的文本節點newmessage。message.nodeType返回的值將是3(一個文本節點),newmessage.nodeType返回的值也將是3;message.nodeName返回的值將是“#text”,newmessage.nodeName返回的值也將是“#text” .
在下面的例子里,給定節點和它的子節點都被復制到了新節點里:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(true);
因為在發出para.cloneNode()調用時傳遞的參數是true,所以新創建的元素節點newpara也將有一個包含著文本“hello world”的子文本節點。
下面這段代碼在復制節點時沒有把子節點包括進來:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
var newpara = para.cloneNode(false);
與被復制的para節點一樣,新節點newpara也是一個元素節點。para節點還有一個包含著文本“hello world”的子文本節點,但newpara節點沒有任何子節點。
用cloneNOde()方法復制出來的新節點不會被自動添加到文檔里。新節點沒有nodeParent屬性。如果想把新節點添加到你的文檔里,則需使用appendChild()或insertBefore()方法(參見“插入節點”)或replaceChild()方法(“替換節點”):
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);
在此例中,第一條語句創建了一個para文本段元素,第二條語句創建了一個message文本節點,第三條語句把message文本節點插入了para元素節點,第四條語句把para插入文檔的body元素。接下來,第五條語句調用cloneNode()方法從para節點(以及它的子節點)復制出了一個新的元素節點newpara,第六條語句把newpara插入文檔的body元素。最后的結果是兩個相同的文本段被插入了文檔。
請注意:如果被復制元素有一個獨一無二的id屬性值,千萬不要忘記對復制出來的新元素的id屬性值進行修改。在同一個文檔里,不同元素的id屬性值必須各不相同。
插入節點
可以用來把節點插入文檔的DOM方法有兩種。
- appendChild()
appendChild()方法將給元素節點追加一個子節點:
reference = elment.appendChild(newChild)
如上所示,給定子節點newchild將成為給定元素節點element的最后一個子節點。這個方法的返回值是一個指向新增子節點的引用指針。
這個方法通常與用來創建新節點的createElement()和createTextNode()方法配合使用。
在下面的例子里,第一條語句用createElement()方法創建了一個para文本段元素,第二條語句用createTextNode()方法創建了一個message文本節點,第三條語句用appendChild()方法把message文本節點插入了para元素節點:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
接下來,再次使用appendChild()方法,但這次是把para元素(以及它的子節點message)插入文檔的結果:
document.body.appendChild(para);
上面這條語句將把para元素追加給文檔中的body元素。
新節點可以被追加給文檔中的任何一個元素。在下例中,我們把一個新的文本節點追加給了當前文檔中那個id屬性值是headline的元素:
var message = document.createTextNode("hello world");
var container = document.getElementById("headline");
container.appendChild(message);
現在,container元素的lastChild屬性將被刷新為包含著文本"hello world"的新增文本節點。
appendChild()方法不僅可以用來追加新創建的元素,還可以用來挪動文檔中現有元素。
在下面的例子里,第一條語句將去尋找id屬性值是fineprint的元素,第二條將去尋找id屬性值是content的元素,第三條語句將把fineprint元素從它的當前位置切下來并追加到content元素的末尾:
var message = document.getElementById("findeprint") ;
var container = document.getElementByid("content");
container.appendChild(message);
注意,id屬性值是findeprint的元素將先從文檔樹上被刪除,然后再作為content元素的最后一個子節點被重新插入到新位置。
- insertBefore()
insertBefore()方法將把一個給定節點插入到一個給定元素節點的給定子節點的前面,它返回一個指向新增子節點的引用指針:
reference = element.inserBefore(newNode,targetNode)
如上所示,節點newNode將被插入到元素節點element并出現在節點targetNode的前面。節點targetNode必須是element元素的一個子節點。如果targetNode節點未給出,newNode節點將被追加為element元素的最后一個子節點——從效果上看,這相當于調用appentChild()方法。
inserBefore()方法通常與createElement()和createTexNode()方法配合使用,以便把新創建的節點插入到文檔樹里。
在下例中,某個文檔有個id屬性值是content的元素,這個元素又包含著一個id屬性值是fineprint的元素。我們將用createElement()方法創建一個新的文本段元素,再把新建元素插入到content元素所包含的fineprint元素的前面:
var container = document.getElementByid("content");
var message = document.getElementByid("fineprint");
var para = document.createElement("p");
container.inserBefore(para,message);
如果被插入的元素本身還有子節點,那些子節點也將被插入到目標節點的前面:
var container = document.getElementByid("content");
var message = document.getElementByid("fineprint");
var para = document.createElement("p");
var text = document.createTextNode("Here comes the fineprint");
para.appendChild(text);
container.inserBefore(para,message);
inserBefore()方法不僅可以用來插入新創建的元素,還可以用來挪動文檔中的現有節點。
在下例中,某個文檔有個id屬性值是content的元素,這個元素又包含著一個id屬性值是fineprint的元素。在這個文檔的其他地方還有一個id屬性值是headline的元素。在找這三個元素之后,最后一條語句把headline元素移到了contentd的元素所包含的fineprint元素的前面。
var container = document.getElementByid("content");
var message = document.getElementByid("fineprint");
container.inserBefore(annoucement,message);
注意,id屬性值是headline的元素將先從文檔樹上被刪除,然后再被重新插入到新位置,即content元素所包含的fineprint元素的前面。
刪除節點
DOM提供了一個用來刪除節點的方法。
- removeChild()
removeChild()方法將從一個給定元素里刪除一個子節點;
reference = element.removeChild(node)
這個方法的返回值是一個指向已被刪除的子節點的引用指針。
當某個節點被removeChild方法刪除時,這個節點所包含的所有子節點將被同時被刪除。
在下例中,id屬性值是content的元素還包含著一個id屬性值是fineprint的元素。我們將用removeChild()方法從content元素里把fineprint元素刪掉:
var container = document.getElementByid("content");
var message = document.getElementByid("fineprint");
container.removeChild(message);
如果想刪除某個節點,但不知道它的父節點是哪一個,parentNode屬性可以幫上大忙:
var message = document.getElementByid("findprint");
var container = message.parentNode;
container.removeChild(message);
如果想把某個節點從文檔的一個部分移動到另一個部分,你不必使用removeChild()方法。appentChild()和insertBefore()方法都自動地先刪除這個節點再把它重新插入到新位置去。
替換節點
DOM 提供了一個用來替換文檔樹里的節點的方法。
- replaceChild()
replaceChild()方法將把一個給定的父元素里的一個子節點替換為另外一個節點:
reference = element.replaceChild(newChild,oldChild)
oldChild節點必須是element元素的一個子節點。它的返回值是一個指向 已被替換的那個子節點的引用指針。
在下例中,id屬性值是content的元素還包含著一個id屬性值是fineprint的元素。我們將用createElement方法創建一個新的文本段元素,再用replaceChild()方法把fineprint元素替換為那個新創建的元素:
var container = document.getElementByid("content");
var message = document.getElementByid("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);
如果被插入的元素本身還有子節點,則那些子節點也被插入到目標節點前。
replaceChild()方法也可以用文檔樹的現有節點去替換另一個現有節點。如果newchild節點是文檔樹上的一個現有節點,replaceChild()方法將先刪除它再用它去替換oldChild節點。
在下例中,replaceChild方法將用id屬性值是headline的元素去替換content元素所包含的id屬性值是fineprint的那個元素。
var container = document.getElementByid("content");
var message = document.getElementByid("fineprint");
var announcement = document.createElement("headline");
var oldmessage = container.replaceChild(announcement,message);
container.replaceChild(oldmessage);
設置屬性節點
DOM 提供了一個用來設置屬性節點的方法。
- setAttribute()
setAttribute()方法將為給定元素節點添加一個新的屬性值或是改變它的現有屬性的值:
element.setAttribute(attributeName,attributeValue)
屬性的名字和值必須以字符串的形式傳遞給此方法。如果這個屬性已經存在,它的值將被刷新;如果不存在,setAttribute()方法將先創建它再為其賦值。setAttribute()方法只能用在屬性節點上。
在下例中,setAttribute()方法將把一個取值為"this is important"的title屬性添加到id屬性值是fineprint的元素上:
var message = document.getElementByid("fineprint");
message.setAttribute("title","this is important");
不管"fineprint"的元素以前有沒有title屬性,它現在都將有一個取值為this is important的title屬性。
即使某個元素還沒有被插入到文檔樹上,setArribute()方法也可以設置它的屬性節點。如果用createElement()方法創建了一個新元素,你可以把它添加到文檔樹上之前對它的屬性進行設置:
var para = document.createElement("p");
para.setAttribute("id","fineprint");
var container = document.getElementByid("content");
container.appendChild(para);
DOM還提供了一個與setArrtibute()方法作用剛好與它相反的getAttribute()方法,后者可以用來檢索某個屬性的值 。
查找節點
DOM 提供了好幾個用來在文檔樹上定位節點的方法。
- getAttribute()
getAttribute()方法將返回一個給定元素的一個給定屬性節點的值:
attributeValue = element.getAttribute(attributeName)
給定屬性的名字必須以字符串的形式傳遞給這個方法。給定屬性的值將以字符串的形式返回。如果給定屬性不存在,getAttribute()方法將返回一個空字符串。
下面的例子將把id屬性值是fineprint的元素的title屬性提取出來,并保存到titletext變量里:
var message = document.getElementByid("fineprint");
var titletext = message.getAttribute("title");
在下例中先提取title的屬性的值,再用這個值創建一個新的文本節點,然后把它追加到fineprint元素的末尾:
var message = document.getElementByid("fineprint");
var titletext = message.getAttribute("title");
var newtext = document.createTextNode("titletext");
message.appendChild(titletext);
DOM還提供了一個與getAttribute()方法作用剛好與它相反的setAttribute()方法,后者可以用來設置某個屬性的值。
- getElementByid()
getElementByid()方法的用途是尋找一個有著給定id屬性值的元素:
element = document.getElementByid(id)
這個方法將返回一個有著給定id屬性值的元素節點。如果不存在這樣的元素,它返回null。這個方法只能用于document對象。
getElementByid()方法的元素節點是一個對象,這個對象有著nodeName、nodeType 、parentNode、childNodes等屬性。
下面的例子將把id屬性值是fineprint的元素提取出來,并保存到message變量里。message元素節點的父節點也是一個元素,我們把它提取到變量container里:
var message = document.getElementByid("fineprint");
var container = message.parentNode;
如果你打算提取的元素有一個id,則用getElementByid()方法來檢索這個元素將是最簡單和最快捷的辦法。找到這個元素后,就可以對它使用setAttriibute ()、cloneNode()或appendChild()等方法了。
在下例中先找出id屬性值是fineprint的元素,并把它保存到message變量里,然后把這個元素的title屬性刷新為this is important:
var message = document.getElementByid("fineprint");
message.setAttribute("title","this is important");
在同一個文檔里,不同元素的id屬性值必須各不相同,如果一個以上的元素有著同樣的id,getElementByid()方法的行為將無法預料。
- getElementByTagName()
getElementByTagName()方法的用途是尋找有著給定標簽名的所有元素:
elements = document.getElementByTagName(tagName)
這個方法將返回一個節點集合,這個集合可以當作一個數組來處理。這個集合的length屬性等于當前文檔里有著給定標簽名的所有元素的總個數。這個數組里的每個元素都是一個對象,它們都有著nodeName、nodeType、parentNode、childNodes等屬性。
下面這個例子將把當前文檔里的所有文本段元素(p元素)全部檢索出來。getElementByTagName ()方法所返回的節點集合的length屬性將被保存到變量howmany里:
var paras = document.getElementByTagName("p");
var howmany = paras.length;
在getElementByTagName()方法成功返回之后,比較常見的后續手段是用一個for循環去遍歷這個方法所返回的節點集合里的各個元素。在for循環里,我們可以用setAttribure ()、cloneNode()或appendChild()等方法對各有關元素進行查詢和處理。
下面的這個例子將遍歷當前文檔里的所有文本段元素,并將其title屬性全部設置為空字符串:
var paras = document.getElementByTagName("p");
for (var i=0;i<paras.length;i++){
paras[i].setAttribute("title","");
}
在上例中,變量paras的數據類型是nodeList。這個集合里的每個元素可以像其他任何一個數組那樣進行訪問:paras[0]、paras[1]、paras[2],等等。當然,也完全可以使用item()方法:paras.item(0)、paras.itme(1)、paras.item(2),等等。
getElementByName方法不必非得用在整個文檔上。它可以用來在某個特定元素的子節點當中尋找有著給定標簽名的元素。
在下例中,在當前文檔里包含著一個id屬性值是content的元素。 為了找出content元素所包含的所有文本段元素,我們把getElementByTagName()方法用在了content元素上:
var container = document.getElementById("content");
var paras = container.getElementByTagName("p");
var howmany = paras.length;
執行完上面這些語句后,變量howmany的值將是包含在content元素里的所有文本段元素的總個數,而不是整個文檔里的文本段總個數。
- hasChildNodes
hasChildNodes方法可以 用來檢查一個給定元素是否有子節點:
booleanValue = element.hasChildNodes
這個方法將返回一個布爾值true或false。如果給定元素有子節點,hasChildNodes方法將返回true;否則返回false。
文本節點和屬性節點都不可能再包含任何子節點,所以對這兩類節點使用hasChildNodes方法的返回值將永遠是false。
這個方法通常與if語句配合使用。下面這個例子先找出id屬性值是fineprint的那個元素,并把它保存到變量message里。如果這個元素有子節點,就把它們以一個數組保存到變量children里去:
var message = document.getElementById("fineprint");
if (message.hasChildNodes){
var children = message.childNodes;
}
hasChildNodes 方法無法返回某給定元素的子節點——子節點可以用這個元素的childNodes屬性去檢索。如果hasChildNodes方法返回的是false,childNodes屬性將是一個空數組。
同樣道理,如果hasChildNodes方法返回false,給定元素的firstchild和lastchild屬性也將為空。
DOM 屬性
下面是DOM樹里的各種節點的一些屬性
節點的屬性
- nodeName
nodeName屬性將返回一個字符串,其內容是給定節點的名字
name = node.nodeName
如果給定節點是一個元素節點,nodeName屬性將返回這個元素的名字:這在效果上相當于tagName屬性。
如果給定節點是一個屬性節點,nodeName屬性將返回這個屬性的名字。
如果給定節點是一個文本節點,nodeName屬性將返回一個內容為#text的字符串
nodeName屬性是一個只讀屬性——只能對它進行查詢(讀),不能直接對它進行設置(寫)。
- nodeType
nodeType 屬性將返回一個整數,這個數值代表著給定節點的類型:
integer = node.nodeType
nodeType 屬性有12種可取值。nodeType 屬性所返回的整數值對應著以下12種節點類型之一:
(1) ELEMENT_NODE
(2) ATTRIBUTE_NODE
(3) TEXT_NODE
(4) CDATE_SECTION_NODE
(5) ENTITY_REFERENCE_NODE
(6) ENTITY_NODE
(7) PROCESSING_INSTRUCTION_NODE
(8) COMMENT_NODE
(9) DOCUMENT_NODE
(10)DOCUMENT_TYPY_NODE
(11)DOCUMENT_FRAGMENT_NODE
(12)NOTATION_NODE
在這12種節點類型當中,前3種是最重要的。WEB上絕大多數DOM腳本都需要與元素節點、屬性節點、文本節點打交道。
nodeType屬性通常與if語句配合使用,以確保不會在錯誤的節點類型上執行無效或非法的操作。在下例中,某個函數只有一個名為mynode的參數,這個參數可以是文檔中的任何一個元素。這個函數將為該元素添加一個取值為this is importan 的title屬性。在此之前,它先檢查mynode參數的nodeType屬性,以確保這個參數所代表的節點確實是一個元素節點:
function addTitle(mynode){
if (mynode.nodeType==1) {
mynode.setAttribute("title","this is improtant");
}
}
nodeType屬性是一個只讀屬性。
- nodeValue
nodeValue 屬性將返回給定節點的當前值:
value = node.nodeValue
這個屬性將返回一個字符串。
如果給定節點是一個屬性節點,nodeValue屬性將返回這個屬性的值。
如果給定節點是一個文本節點,nodeValue屬性將返回這個文本節點的內容。
如果給定節點是一個元素節點,nodeValue屬性將返回null。
nodeValue屬性是一個讀/寫屬性。不過,你不能對一個已經被定義為null的值進行設置。換句話說,你不能為元素節點的nodeValue屬性設置一個值。你可以為文本節點的nodeValue屬性設置一個值。
下面這個例子將不能工作,因為它試圖為一個元素節點設置一個值:
var message = document.getElementById("fineprint");
message.nodeValue = "this won't work";
下面這個例子有可能可以工作,它試圖為一個元素節點的第一個子節點設置一個值。 只要這個第一個子節點是一個文本節點,新值就可以設置成功:
var message = document.getElementById("fineprint");
message.firstChild.nodeValue = "this might work";
下面這個例子肯定可以工作。這里增加了一項測試以檢查fineprint元素節點的第一個子節點是否為文本節點:
var message = document.getElementById("fineprint");
if (message.firstChild.nodeType==3){
message.firstChild.nodevalue = "this will work";
}
如果需要刷新某個文本節點的值,nodeValue屬性提供了最簡單的機制。如果需要刷新某個屬性節點的值,通過這個屬性節點的父節點和setAttribute()方法設置往往更簡明易行。
遍歷節點樹
從以下屬性讀取出來的信息可以讓我們了解相鄰節點之間的關系。
- childNodes
childNodes屬性 將返回一個數組,這個數組由給定元素節點的子節點構成:
nodeList = node.childNodes
從這個屬性所返回的數組是一個nodeList集合,這個nodeList集合里的每個節點都是一個節點對象。這些節點對象都有著nodeType、nodeName、nodeValue等常見的節點屬性。
文本節點和屬性節點都不可能再包含 任何子節點,所以它們的childNodes屬性永遠會返回一個空數組。
如果只想知道某個元素有沒有子節點,可以使用hasChildNodes()方法。
如果想知道某個元素有多少個子節點,請使用childNodes數組的length屬性:
node.childNodes.length
即使某個元素只有一個子節點,childNodes 屬性也將返回一個節點數組而不是返回一個單個的節點。此時,childNodes 數組的length 屬性值將是1。比如說,如果某個網頁上的document元素只有html元素這個子節點,那么document.childNodes[0].nodeName的值將是HTML。
childNodes 屬性是一個只讀屬性。如果需要給某個元素增加子節點,可以使用appendChild()或insertBefore() 方法;如果需要刪除某個元素的子節點,可以使用removeChild()方法;在使用這幾種方法增、減某個元素的子節點時,這個元素的childNodes屬性將自動刷新。
- firstChild
firstChild 屬性將返回一個給定元素節點的第一個子節點;
reference = node.firstChild
這個屬性返回一個節點對象的引用指針。這個節點對象都有著nodeType、nodeName、nodeValue等常見的節點屬性。
文本節點和屬性節點都不可能再包含任何子節點,所以它們的firstChild屬性永遠會返回null。
某個元素的firstChild 屬性等價于這個元素的childNodes節點集合中的第一個節點:
reference = node.childNodes[0]
如果只是想知道某個元素有沒有子節點,可以使用hasChildNodes方法。如果某個節點沒有任何子節點,它的firstChild屬性將返回null。
firstChild屬性是一個只讀屬性。
- lastChild
lastChild 屬性將返回一個給定元素節點的最后一個子節點:
reference = node.lastChild
這個屬性返回一個節點對象的引用指針。這個節點對象都有著nodeType、nodeName、nodeValue等常見的節點屬性。
某個元素的lastChild 屬性等價于這個元素的childNodes節點集合中的最后一個節點:
reference = node.childNodes[elementNode.childNodes.length-1]
如果只是想知道某個元素有沒有子節點,可以使用hasChildNodes方法。如果某個節點沒有任何子節點,它的lastChild屬性將返回null。
lastChild屬性是一個只讀屬性。
- nextSibling
nextSibling 屬性將返回一個給定節點的下一個子節點:
reference = node.nextSibling
這個屬性返回一個節點的引用指針。這個節點對象都有著nodeType、nodeName、nodeValue等常見的節點屬性。
如果給定節點的后面沒有同屬一個父節點的節點,它的nextSibling屬性將返回null。
nextSibling 屬性是一個只讀屬性。
- parentNode
parentNode 屬性將返回一個給定節點的父節點
reference = node.parentNode
這個屬性返回一個節點的引用指針。這個節點對象都有著nodeType、nodeName、nodeValue等常見的節點屬性。
parentNode 屬性返回的節點永遠是一個元素節點,因為只有元素節點才有可能包含子節點。唯一的例外是document節點,它沒有父節點。換句話說,document節點的parentNode屬性將返回null。
parentNode 屬性是一個只讀屬性。
- previousSibling
previousSibling 屬性將返回一個給定節點的前一個子節點;
reference = node.previousSibling
如果給定節點的前面沒有同屬一個父節點的節點,它的previousSibling屬性將返回null。
previousSibling屬性是一個只讀屬性。
浙公網安備 33010602011771號