js、jquery对节点的操作(增、删)

时间:2022-05-26 01:49:42

js对节点的操作方法

一.获取

1.父节点的获取

某节点的parentNode属性值即为该节点的父节点。示例:

var parent = document.getElementById("one").parentNode;

2.兄弟节点的获取

nextElementSibling和nextSibling属性配合使用。

某节点的nextElementSibling属性值是该节点后面紧邻的兄弟节点,但是这个有兼容性,在ie9以上版本(包含ie9)和其他浏览器,结果是我们想要的弟节点,在ie9以下的结果是文本节点,不满足我们的要求。而nextSibling属性,在ie9以下版本的结果是我们想要的弟节点,在ie9以上版本(包含ie9)和其他浏览器结果是文本节点,和nextElementSibling刚好相反。可以通过配合使用这两个属性来满足需求。示例:

var one = document.getElementById("one");

var oneNextNode = one.nextElementSibling || one.nextSibling;

与后面紧邻的兄弟节点对应的是前面紧邻的兄弟节点,previousElementSibling和previousSibling配合使用即可获得。示例:

var one = document.getElementById("one");

var onePreNode = one.previousElementSibling || one.previousSibling;

3.子节点的获取

某节点的children属性值就是该元素的所有的元素子节点。示例:

var one = document.getElementById("one");

var sons = one.children;

二.节点的添加、删除、克隆方法

1.子节点的添加

添加子节点的思路是先创建一个节点,然后添加到指定位置即可。

创建节点的方法是固定的,利用document.createElement(xxx)方法,传入元素名即可创建一个指定元素名的元素。

如 var newDiv=document.createElement("div");

把节点插入到父节点中有两种方法appendChild()和insertBefore()。

appendChild()方法由父节点调用,参数传一个待插入到父节点的子节点,这种方法会把该子节点插入到父节点的最后面,也就是说插入操作完成后这个子节点会是最后的子节点。示例:

var one = document.getElementById("one");

var newDiv  = document.createElement("div");

one.appendChild(newDiv);

insertBefore()方法也是由父节点调用,可以把一个子节点插入到我们指定的位置。方法有两个参数,第一个参数是要插入的子节点,第二个参数就是我们指定的、将要在其前面插入节点的子节点。特殊的,如果第二个参数传null,则效果等同于appendChild(),即将把新的子节点插入到最后。示例:

var one = document.getElementById("one");//此处one是父节点,如果不好直接获得的话,也可以通过子节点的parentNode获得

var newDiv = document.createElement("div");

one.insertBefore(newDiv , one.children[0]);

2.子节点的删除

对应的方法是removeChild(),由父节点调用,参数传要删除的子节点。示例:

var one = document.getElementById("one");//此处one是父节点

one.removeChild(one.children[0]);

3.节点的复制

对应的方法是cloneNode(),由要复制的节点调用,方法可以传一个布尔型参数,如果传true的话,表示不仅仅会复制选定的节点,也会复制此节点的所有子节点;如果传false或者不传的话,则仅会复制该节点。复制节点一般不会单独使用,不会单纯为了复制而复制,复制出来后得放到某个位置啊,所以一般会结合添加节点使用。示例:

var divs = document.getElementByTagName("div");

var cloneDiv  = divs[0].cloneNode();

document.getElementById("one").parentNode.appendChild(cloneDiv);

jquery对节点的操作方法

1.获取父节点:parent()方法

2.获取所有子节点:children()方法

1.创建节点,先写好html内容,然后直接用$()包裹就好,注意到时候把html内容中的双引号变成单引号。示例:

var $newDiv = $("<div id='two'></div>");

2.复制节点:clone()方法,由要复制的节点对应的jQuery对象调用,参数可传一个布尔值,true表示连带着子节点也一起复制,false或不传表示不复制子节点。示例:

$("#two").clone();

2.向某节点内部的最后添加节点,使添加的节点成为原来节点的最后一个子节点:append()方法,由父节点对应的jQuery对象调用,参数是子节点对应的jQuery对象。示例:

$("#one").append($newDiv);

与之能达到相同目的的方法是appendTo(),把某一个节点添加到某个节点内部的最后面。和append()方法相比,只是调用者和参数调换了一下而已。示例:

$newDiv.appendTo($("#one"));

3.prepend()、prependTo(),使用同append()、appendTo()一样,只是把最后面变成最前面。

4.在某节点的后面添加节点,使新添加的节点成为原来节点的弟节点:after()方法,由兄节点调用,参数是弟节点。示例:

$("#bigBro").after($("#littleBro"));

与之能达到相同目的的方法是insertAfter(),把某一个节点添加到某个节点的后面。和after()方法相比,只是调用者和参数调换了一下而已。示例:

$("#littleBro").insertAfter($("#bigBro"));

5.before()、insertBefore(),使用同after()、insertBefore()一样,只是把后面变成前面,新节点是兄节点。

6.删除节点:remove(),由要删除的节点对应的jQuery对象调用调用

7.清空节点:empty(),由要清空的节点对应的jQuery对象调用调用

8.获取上一个节点:prev()

9.获取下一个节点:next(),效果等同于js的one.nextElementSibling || one.nextSibling

10.获取所有兄弟节点:siblings(),同一个父亲哦