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(新节点,原节点); //替换节点
原文地址：https://www.cnblogs.com/royal6/p/10269272.html