声明是DOM
document Object Model(文档对象类型)，DOM是针对html和XML文档的一个API。DOM描绘了一个层次化的节点树
允许开发人员添加、移除和修改页面的某一部分
HTML DOM定义了访问和操作HTML文档的标准方法，要改变页面某个东西，javascript 就需要获取对HTML文档中所有元素
进行访问的入口，这个入口连同对HTML元素进行添加，移动，改变和移除的方法和属性，都是通过文档对象模型来获得的(DOM)
我们可以通过javascript操作DOM 可以对节点实现增删改查操作，可以动态添加标签和属性等
声明是节点
HTML文档中的每个成份都是一个节点。
1.节点类型
DOM是这样规定的：整个文档是一个文档节点，每个HTML标签是一个元素节点，包含在HTML元素中文本是一个文本节点，每一个HTML属性是一个属性节点，注释属于注释节点。
2.节点层次关系：
节点彼此都有等级关系。HTML文档中所有几点组成了文档树(或节点树)，HTML文档中的每个元素、属性、文本等都代表着树中的一个节点，树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点止。
head和body 的父节点是html节点，文本节点"hello word“的父节点是p节点。
head节点有一个子节点，title节点，title节点也有一个子节点；文本节点"DOM Tutorial"。
当节点分享同一个父节点时，它们就是同辈(同级节点)，比方说，h1和p是同辈，因为她们呢的父节点是body
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些节点的子节点
节点也可以拥有先辈，先辈是某节点的父节点，或者父节点的父节点，以此类推，比方说，所有的文本节点都可把html节点作为先辈节点
3.点属性
每个节点都拥有包含关于节点某些信息的属性，这些属性是
nodeName(节点名称)
元素节点的nodeName 是标签名称
文本节点的nodeName 永远是#text
注释节点的nodeName 永远是#comment
nodeValue(节点值)
文本节点nodeValue 属性包含文本
元素节点nodeValue 不可以用
注释节点nodeValue 包括注释内容
nodeYype(节点类型)
元素------1
属性------2
文本------3
注释-----8
文档-----9
<script> //输出BODY 标签的名称 console.log(document.body.nodeName); //输出#text？？？ body标签中不是有个div标签吗 为什么它的第一自己点的名字是文本呢？ 因为有换行，换行也属于文本节点 console.log(document.body.firstChild.nodeName); </script>
nodeName 如果是标签，nodName就是标签名
nodeValue 如果是注释nodeValue就是注释的内容
nodeType 可以用来判断当前是不是文档节点
获取DOM元素：
document.getElmentById() 根据ID名获取DOM元素 唯一一个 id不能重复
document.getElementsByTagName() 根据标签名获取所有的DOM元素 返回HTMLCollection标签类型，类数组，不能使用数组的方法
document.getElementsByClassName() 根据class获取元素列表 也返回HTMLCollection
document.getElementsByName() 针对表单form对应获取相应的元素，返回NodeList节点列表，可以使用foreach
<body>
<form action="#" method="GET">
<input type="radio" name="ab" value="1">
<input type="radio" name="ab" value="2">
<input type="radio" name="ab" value="3">
<input type="radio" name="ab" value="4">
<input type="radio" name="ab" value="5">
<input type="submit" value="提交">
</form>
<script>
//循环遍历nodelist
sname=document.getElementsByName('ab');
for(i=0;i<sname.length;i++){
console.log(sname[i]);
}
//使用foreach 循环遍历
sname.forEach(function (t){
console.log(t);
});
</script>
document.querySelector() 根据选择器选择元素 css选择器
选择id=a class=abc 的一个元素
var lis=document.querySelectorAll("#a .abc");
document.querySelectorAll()
选择id=a 下面class=abc的所有元素，返回一个NodeList 需要遍历
var lis=document.querySelectorAll("#a .abc");
var a=document.querySelectorAll("#css .abc");
a.forEach(function (e){console.log(e);
});
节点遍历
childNodes：获取所有子节点 (包含注释)
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].childNodes; console.log(a); //返回 text ul text comment注释 </script>
children：所有事标签类型的子节点 获取所有子元素
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].children; console.log(a); //返回 HtMLCollection ul 只返回标签 </script>
parentNode：获取已知节点的父节点
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].parentNode; console.log(a); //返回 body标签节点 </script>
firstElemntChild：第一个子节点（元素）
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].firstElementChild; console.log(a); //获取第一子元素 返回ul标签 </script>
firstChild：第一个子节点
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].firstChild; console.log(a); //获取第一子节点 返回#text(文本或换行) </script>
lastElementChild：最后一个子节点（元素）
lastChild：最后一个子节点
nextElementSibling：下一个兄弟节点（元素）
nextSibling：下一个兄弟节点
previousElementSibling：前一个兄弟节点（元素）
previousSibling：前一个兄弟节点
创建节点
document.createElment("标签名")：创建新元素
document.createTextNode("");：创建文本节点