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

Posted royal6

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Java节点操作(JS原生+JQuery)相关的知识,希望对你有一定的参考价值。

Java节点操作(JS原生+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(新节点,原节点);         //替换节点


以上是关于Java节点操作(JS原生+JQuery)的主要内容,如果未能解决你的问题,请参考以下文章

原生JS与jQuery操作DOM对比

原生js与jQuery操作DOM的区别

原生JS与jQuery操作DOM有什么异同点?

原生JS和jQuery操作DOM的区别小结

将原生JS和jquery里面的DOM操作进行了一下整理

原生JS的使用,包括jquery和原生JS获取节点jquery和原生JS修改属性的比较