获取子节点
1. children 不是标准的dom属性，但是几乎被所有浏览器支持。获取子元素的元素节点（只包括元素节点）
注意：在IE中，children包含注释节点。
2. childNodes 是标准属性。返回所有子节点。包括文本节点。
注意：
（1）nodeType 返回节点类型的值，一般是整数
常用的有： nodeType==1是元素节点(element)，2是属性节点(attr)，3是文本节点(#text)，8是注释节点(#comment)，9是文档(document) 。
（2）nodeName 标签的名称，返回的结果都是大写
（3）nodeValue 返回value，但是只对文本节点和注释有用,对于标签没有作用。
<ul id="ul1">
<li>
<span>我是文本</span>
</li>
<li></li>
<li></li>
</ul>
window.onload=function(){
var oUl1=document.getElementById("ul1");
console.log("children.length",oUl1.children.length); //
console.log("childNodes.length",oUl1.childNodes.length); //
for(var i=0; i<oUl1.children.length; i++){
oUl1.children[i].style.background='red';
}
}
childNodes模拟children
function myChildren(ele){
//获取所有的子元素(包括文本节点、元素节点、注释节点)；
var eleChild = ele.childNodes;
var str = [];
//循环所有的文本节点，以便都能拿到；
for(var i = 0;i<eleChild.length;i++){
//nodeType == 1 是元素节点(element)，2是属性节点(attr)，3是文本节点(text)，8是注释节点，9是文档(document)。
if(eleChild[i].nodeType == 1){
//将得到的每一项子元素添加到数组的后面；
str.push(eleChild[i]);
}
}
return str;
}
//childNodes模拟children
function myChildren2(ele){
//获取所有的子元素(包括文本节点、元素节点、注释节点)；
var eleChild = ele.childNodes;
//循环所有的文本节点，以便都能拿到；
for(var i = 0;i<eleChild.length;i++){
//console.log(eleChild[i].nodeName); //#text Li
if(eleChild[i].nodeName == "#text" && !/\S/.test(eleChild[i].nodeValue)) {
//删除数组中的text
ele.removeChild(eleChild[i]);
}
}
return eleChild;
}
移除节点
removeChild
获取父节点
parentNode：获取父元素
parentNode-原生js仿jquery中的sibling方法
<body>
<ul>
<li id="firstId">
<span>我是文本</span>
</li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
window.onload=function(){
var firstId=document.getElementById("firstId");
const elm=mySiblings(firstId);
for (let i = 0; i < elm.length; i++) {
elm[i].style.background="red";
}
} function mySiblings(elm) {
var siblingsNodes = [];
var p = elm.parentNode.children;
for(let i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) siblingsNodes.push(p[i]);
}
return siblingsNodes;
}
</script>
插入节点
1.insertBefore
2.appendChild
创建DOM结构
1.创建元素节点 createElement
2.创建文本节点 createTextNode
document.createElement('div')
document.createTextNode('ok')
获取元素的下一个节点（同胞）
nextSibling
获取元素的上一个节点(同胞)
previousSibling