（1）元素节点---nodeType为1
（2）属性节点---nodeName为2
（3）文本节点---nodeValue为3 （文本节点包含文字、空格、换行等）
2、节点的层级
DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点
（1）根节点：<html>就是根节点，有且只有一个
（2）父节点：一个节点的上级节点
（3）子节点：一个节点的下级节点
（4）兄弟节点：具有相同父节点的节点
二、节点操作
1、获取父节点
element.parentNode
2、获取子节点
（1）element.childNodes：获得的是当前元素的所有子节点的集合（所有类型的子节点）
（2）element.children：是一个可读的属性，返回所有子元素节点
（3）firstChild：获取第一个子节点
（4）lastChild：获取最后一个子节点
（5）firstElementChild：获取第一个元素子节点
（6）lastElementChild：获取最后一个子元素节点
3、获取兄弟节点
（1）nextSibling：获取下一个兄弟节点
（2）previousSibling：获取上一个兄弟节点
（3）nextElementSibling：获取下一个兄弟元素(标签)节点
（4）previousElementSibling：获取前一个兄弟元素节点
<body>
<div class="demo">
<div class="box">
<h2>一二三四五</h2>
<span class="child">上山打老虎</span>
<p>注意！（保护国家保护动物）</p>
</div>
</div>
<div>
<ul>
<li id="l1">红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
<li>西游记</li>
</ul>
</div>
<script>
var child = document.querySelector('.child')
console.log(child.parentNode)
var ul = document.querySelector('ul')
var lis = ul.querySelectorAll('li')
console.log(lis)
console.log("通过childNodes获得的子节点",ul.childNodes)
console.log("children",ul.children)
console.log("ul的子节点",ul.childNodes)
console.log("ul第一个子节点的类型：",ul.childNodes[0].nodeType)
console.log("ul的第二个字节点类型：",ul.childNodes[1].nodeType)//1是元素，也叫标签
console.log("ul的第一个子节点",ul.firstChild)
console.log("ul的最后一个子节点：",ul.lastChild)
console.log("ul的第一个子元素节点",ul.firstElementChild)
console.log("ul的最后一个子元素节点",ul.lastElementChild)
var span = document.querySelector('.child')
console.log("span的兄弟节点",span.nextSibling.nextSibling)
console.log("span的前一个兄弟节点",span.previousElementSibling)
</script>
</body>
登录后复制
4、创建节点
（1）doument.write():若页面加载完毕,再次调用该方法导致页面重绘
（2）element.innerHTML：将节点加入到元素中,导致页面部分重绘
（3）document.createElement()：创建节点.结构清晰、效率不高
5、添加和删除节点
（1）appendChild()：将节点添加到指定父节点的已有子节点的末尾
（2）insertBefore()：将节点添加到指定父节点的已有子节点的前面
（3）removeChild(child)：删除一个指定的节点。返回值为删除的节点
6、克隆节点
cloneNode(true/false)：复制节点
（1）true：深拷贝,复制节点本身和所有子节点
（2）false(或空)：浅拷贝,只复制节点本身
我们仅仅知道用户点击的那一条数据，所以这条数据必须是唯一的才能构建一颗唯一的树结构，如果后端给不到你唯一的值，一定要让他给你生成一个唯一值id
我采用的string切割插入值
table初始化进来只有一层，并且是固定的
此时生成的是
我也遇到了楼主的问题，希望动态得到节点名称，根据5楼的提示，我看到了tagName 这个重要的属性，然后自己研究一下成功了<script type="text/javascript">
var xmlhttp
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest
}
else {
xmlhttp = ActiveXObject("Microsoft.XMLHTTP")
}
