JS节点操作(JS原生+JQuery)

JavaScript与JQuery节点操作

 

节点关系与类型

任何HTML元素，都有nodeType属性。值有1~12，常用的有：

1.元素节点

2.文本节点

8.注释节点

9.document节点(HTML文档对象)

10.DTD（文档类型定义）

box.nodeType       //返回值1，获得nodeType属性

box.childNodes            //获得全部子元素 //兼容性问题 注意：在chrome，IE9 IE10高版本的浏览器里面的回车都认为是节点，IE6，7，8低版本的浏览器不算，高版本浏览需遍历筛选

box.parentNode    //查找父节点

prevs.previousSibling   //查找上一个兄弟元素

prevs.nextSibling   //查找下一个兄弟元素

(注意，这两个元素childNodes一样，拥有兼容性问题)

可以先遍历然后进行筛选取得元素

例：

var p=document.getElementById('p');

var prevs = p;

while(prevs =prevs.previousSibling){    //通过while循环遍历元素

if(prevs.nodeType == 1){    //使用nodeType属性进行筛选元素

prevs.style.background = 'red'; //得到上一个元素后进行操作

}

}

var nexts =p;

while(nexts = nexts.nextSibling){   //同理查找下一个元素也一样

if(nexts.nodeType == 1){

nexts.style.background ='blue';

}

}

JQuery节点关系

$('.box').children(); //获得所有子元素，屏蔽兼容性问题，不用考虑兼容性问题，可以传递一个参数，对子元素进行筛选

$('p').find();     //查找所有子元素及子元素得后代，先找到的第一个元素排0，以此类推，和children一样可以传递一个参数，进行筛选

$('p').parent();       //查找父元素，任何元素只有一个父元素

$('p').parents();      //查找所有祖先节点

siblings();       //查找所有兄弟元素     可以传递参数(选择器，筛选器)进行筛选

prev()、next()、prevAll()、nextAll()

//前一个、后一个兄弟、前所有兄弟、后所有兄弟

总结：JQuery屏蔽所有的不兼容，只选择nodeType=1的元素，不选择文本。注释等等并且不用for循环，一次性得到所有东西

 

JavaScript节点操作

var oLi = document.createElement("li");     //添加节点

ul.appendChild(oLi);把新节点，追加到元素中

box.innerHTML ='<p>Hello word!</p>';   //也可以通过这种方式添加一个标签

ul.insertBefore(新元素,原有元素);       //将新元素插入到指定元素之前

list.removeChild(oldchild);           //删除元素，必须找到父元素才能进行删除，可以使用parentNode查找父元素

父节点.replaceChild(新节点,原节点);         //替换节点

box.appendChild(p.cloneNode(true));     //克隆节点，true表示克隆全部(属性与子节点)，默认克隆单个节点

JQuery节点操作

$('.box').append('<p>Text5<p>');//添加节点,无需createElement创建节点，相当于使用innerHTML直接添加

$("<p>Text6</p>").appendTo('.box');        //表示被动添加，即与append相反，将子节点添加到父节点

$('.box').prepend("<p>Text7</p>");    //将节点添加到第一位

$("<p>Text7</p>").prependTO('.box');      //表示被动，将节点添加到第

$('#p').after("<h3>这是H3</h3>");    //插入兄弟节点，插入之后

$('#p').before("<h4>这是H4</h4>"); //插入兄弟节点，插入之前

$('<p>Text11</p>').insertBefore($('p')[2]);        //被动，插入兄弟节点，插入之前

$('<p>Text22</p>').insertAfter($('p')[2]);    //被动，插入兄弟节点，插入之后

$('a').wrap("<b></b>");使用b标签包裹起来

$('a').wrapAll("<b></b>");    //全部使用b标签包裹起来

$('.box').empty();    //删除(清空)所有内容

$('p').remove();      //删除页面所有的p标签

$('.box').append($('p').eq(0).clone());   //克隆节点，并添加