Javascript及Jquery獲取元素節點以及添加和刪除操作


用了javascript和jquery很久,把所有元素節點的操作總結了下,放在博客上作為記錄。

Javascript獲取元素的主要方式有三種

1、document.getElementById('main'):表示從document中查找一個id是main的dom節點。(這個跟$('#main')的作用是一樣的)

2、通過名稱name選取元素document.getElementsByName("domName")

a. 返回值是一個nodeList集合(區別於Array)

b. 和ID屬性不一樣,name屬性只在少數DOM元素中有效(form表單、表單元素、iframe、img)。這是因為name屬性是為了方便提交表單數據而打造的。  

c.為form、img、iframe、applet、embed、object元素設置name屬性時,會自動在Document對象中創建以該name屬性值命名的屬性。所以可以通過document.domName引用相應的dom對象

3、通過標簽名選取元素element.getElementsByTagName("tagName")

其中,element是有效的DOM元素(包括document),tagName是DOM元素的標簽名。

a. tagName不區分大小寫

b. 當tagName為*時,表示選取所有元素(需遵從b.規則)

Jquery選取元素的方法就不多說了,方法非常多,相關的文章和教程也非常多。

 

Javascript獲取父元素或子元素的方法

var a = document.getElementByIdx_x_x("dom");

var b = a.childNodes;   獲取a的全部子節點(返回節點的子節點集合,以 NodeList 對象)

這個方法需要注意的是,會出現獲取隱藏的節點情況,具體原因,我還沒搞清除,不過使用時候留心就可以了。

var c = a.parentNode;   獲取a的父節點

var d = a.nextSbiling;   獲取a的下一個兄弟節點

var e = a.previousSbiling;獲取a的上一個兄弟節點

var f = a.firstChild;    獲取a的第一個子節點

var g = a.lastChild;     獲取a的最后一個子節點

 

jQuery獲取父元素或子元素的方法

jQuery.parent(expr) 找父親節點,可以傳入expr進行過濾,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),類似於jQuery.parents(expr),但是是查找所有祖先元素,不限於父元素

jQuery.children(expr).返回所有子節點,這個方法只會返回直接的孩子節點,不會返回孫節點

jQuery.contents(),返回下面的所有內容,包括節點和文本。這個方法和children()的區別就在於,包括空白文本,也會被作為一個jQuery對象返回,children()則只會返回節點

jQuery.prev(),  返回上一個兄弟節點,不是所有的兄弟節點

jQuery.prevAll(),返回所有之前的兄弟節點

jQuery.next(),   返回下一個兄弟節點,不是所有的兄弟節點

jQuery.nextAll(),返回所有之后的兄弟節點

jQuery.siblings(), 返回兄弟姐妹節點,不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery對象集合中篩選出一部分,而jQuery.find()的返回結果,不會有初始集合中的內容,比如$("p"),find("span"),是從p元素開始找,等同於$("p span")

 

Javascript添加及插入節點

appendChild() 方法:可向節點的子節點列表的末尾添加新的子節點。語法:appendChild(newchild)

insertBefore() 方法:可在已有的子節點前插入一個新的子節點。語法 :insertBefore(newchild,refchild)

replaceChild()方法接受的兩個參數是:要插入的節點和要替換的節點。要替換的節點將由這個方法返回並從文檔樹中被移除,同時由要插入的節點占據其位置。 

注意:並沒有insertAfter(),我這種腦洞比較大的人,總是被這個insertAfter坑。。。

 

在Javascript中,只提供了一種刪除節點的方法:removeChild(node)

node 的類型為Node object,是必需的。Node就是希望刪除的節點對象。

例子:

document.getElementById("thisNode").onclick=function(){ this.parentNode.removeChild(this); }

removeChild() 方法指定元素的某個指定的子節點。

以 Node 對象返回被刪除的節點,如果節點不存在則返回 null。

 

jquery追加元素的幾種方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())

jquery的api做的比較好,我直接放圖片,Jquery的文檔處理

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM