DOM節點操作

2022-07-30 19:09:12 字數 1611 閱讀 8224

var test = document.getelementbyid("test");

var parent = test.parentnode; //

父節點var chils = test.childnodes; //

全部子節點

var first = test.firstchild; //

第乙個子節點

var last = test.lastchile; //

最後乙個子節點 

var previous = test.previoussbiling; //

上乙個兄弟節點

var next = test.nextsbiling; //

下乙個兄弟節點

$("#test1").parent(); //

父節點$("#test1").parents(); //

全部父節點

$("#test1").parents(".mui-content");

$("#test").children(); //

全部子節點

$("#test").children("#test1");

$("#test").contents(); //

返回#test裡面的所有內容,包括節點和文字

$("#test").contents("#test1");

$("#test1").prev(); //

上乙個兄弟節點

$("#test1").prevall(); //

之前所有兄弟節點

$("#test1").next(); //

下乙個兄弟節點 $("#test1").nextall(); // 之後所有兄弟節點

$("#test1").siblings(); //

所有兄弟節點 $("#test1").siblings("#test2"); $("#test").find("#test1");

$("#div1").prepend(node)  -在元素內的開頭插入內容

$("#div1").after(node) 

-在被選元素之後插入內容

$("#div1").before(node) -在被選元素之前插入內容

以上四個方法在插入內容時,node既可以是字串形式,如:"按鈕";也可以是jquery物件,如:$("#btn1")或者$("按鈕")。

需要注意的是,如果使用$("#btn1")的方式來插入元素,被插入的元素會在原來的地方刪除,即相當於「剪下」。

//

以下方法都返回乙個新的jquery物件,他們包含篩選到的元素

$("ul li").eq(1);//

選取ul li中匹配的索引順序為1的元素(也就是第2個li元素)

$("ul li").first(); //

選取ul li中匹配的第乙個元素

$("ul li").last(); //

選取ul li中匹配的最後乙個元素

$("ul li").slice(1, 4); //

選取第2 ~ 4個元素

$("ul li").filter(":even"); //

選取ul li中所有奇數順序的元素

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...

操作dom節點

取到節點物件可以,我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點 第一段第二段 第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...

DOM 節點操作

方法名 只能document呼叫 返回單一的值 返回動態集合 getelementbyid getelementsbytagname getelementsbyclassname queryselectorall queryselector 建立節點document.createelement ta...