JAVAScript (dom基础：获取元素节点)
【基础块】有很多获取元素节点的方式，虽然都可以达到我们想要的效果。但是到了实际操作的时候会发现正确且合适的方式不仅可以提高代码运行速度，还有效避免了浏览器不兼容的问题。下面归纳和介绍几种常用且便捷的获取方式和利用获取方式实现增删改的实例操作
今天主要介绍两种获取元素的方式：document.方法（）和利用节点层级关系获取元素
需要注意的是：由于兼容性的问题，部分获取的方式IE9以下是无法使用的
什么是DOM?
文档对象模型 (DOM) 是HTML的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。 DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。
什么是节点
节点点一般包括nodeType(节点类型),nodeName（节点名称）,nodeValue（节点值）
文章目录
一、利用document.方法（’ '）获取
Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。
1.getElementById
<buttom id = "button "></buttom>
var button = document.getElementByld('button');
console.log(typeof button); //object
console.dir(button); //div#box
getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
2.getElementByTagName
概述：主要用于取子节点
重点：1.1 var li = ol.getElementsByTagName(‘li’)[0];
id获取是独一无二的，但标签名并不是，所有由TagName获得元素节点（一般用于获取子节点）的方式必须借助伪数组或着有id的父节点去获取我们需要的父级节点的儿子节点或孙子节点
补充说明：在js的语言环境下，一定要去理解伪数组是可以动态遍历的
//利用伪数组的形式把第一个li中的内容打印出来
当 ol = document.getElementsByTagName('ol');
// 指明获取对象名为li的父元素li时，获取li,有如下方法
1 var li = ol.getElementsByTagName('li')[0];
2 给<ol id="box"></ol>
console.log (box.getElementByTagName('li'));//利用父节点id获取第一个li
3.querySelector
概述：最方便的获取方式
文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。
class类：querySelector(’ .xxx ‘);
id类：querySelector(’#xxx’);
tittle：querySelector(‘xxx’);
最值得一替的是，class,id,tittle类可以混合使用
如果querySelector(‘.xxx xxx’)等
二利用节点层级关系获取元素
这个方式可以根据dom树快速获取所需要的元素，但是有的方式获取的是包含的节点不是单纯的元素节点
孩子节点
·childNodes
其中包含文本节点和元素节点
NodeList是一个类数组的形式，保持有序节点，可以通过方括号访问
·children[ ]
·firstchild lastchild
console.log(ul.firstChild)
获取的结果：包含元素节点（nodeType=1）、属性节点(nodeType=2)、文本节点(nodeType=3)
信息过于繁多，对于仅获得节点来说，不推荐这个方法
lastchild同上
·firstElementChild lastElementChild
父亲节点parentNode
可以在实际操作中使用
兄弟节点
F12得到的是HTMLCollection
nextSibling和previousSibling与firstchild类似都是获取了除元素节点外其他的节点等。所以推荐使用nextElementSlibing
如果仍然想使用nextSibling，提供封装元素兄弟节点的方式
三 综合应用(推荐方式)
1.创建节点
createElement()
例一
要求创建一个新的 <div> 并且插入到ID为“div1”的元素前。
//创建一个有文本的dom数节点
var newDiv = document.creatElement(''); //要写字符串性的引用
//创建文本节点
var newContent = document.creatTextNode('hi');
//将文本节点添加到这个新节点里面去
newDiv.appendChild(newContent); //传入的是元素节点，而不是字符串的形式
//使用上面提到的方式获取Id为div1的节点
var currentDiv = document.getElementById('div1');
//将元素节点和文本节点添加到DOM中(插入节点会详细讲解)
document.body.insertBefore(newDiv,currentDiv)
例二
例如为ul创建一个li：var li = document.createElement(‘li’);
2.添加节点
因为关系节点是只读的，所有DOM提供了一些操作节点的方法。
//向childNodes列表末尾添加一个节点
1 z.appendChild(x) //把x插入z的范围的最后一个
z.appendChild(x,y) //在z的范围内，把x插入Y的后面
2 在z.insertBefore(x,y) //在z的范围内将x插入y的前面
例一：red.insertBefore(blue, h1);
//把蓝色盒子移动到红色盒子内，且位于标题前面
//将元素节点和文本节点添加到DOM中
document.body.insertBefore(newDiv,currentDiv)
3.删除节点
1 Element(获取节点).replaceChild(x,y) //x替换y，但是值得注意的是，插入一个节点时，该节点的所有指针关系都会从被它替换的节点复制过来。被替换的节点还在文档中，只是没有了它的位置
2 Element.removeChild( ) //移除的节点仍为文档所有，但是在文档中已经没有了自己的位置。
实例
制作一个web留言版，触发按钮后按照发布时间由上指向排序发布的留言，
（布局在这里就不详细讲解）
获取元素和插入元素模块代码如下（如有错误还望指出）
步骤一：获取元素
var button = document.getElementById('btn');
var container = document.querySelector('.container');
var ul = document.querySelector('ul');
var li = ul.getElementByTagname('li')[0];
第二步触发事件,添加元素节点和内容
button.addEventListerner('click',function(){
//判input是否为空
if(container.valuer == ''){
alert('none');
return false
}
else{
var tittle = documet.createElement('li')//创建节点要用元素标题并使用字符串的形式
tittle.innerHTML = container.value;
//将元素节点和内容都插入到ul->li（喜欢）前
ul.insertBefore(tittle,li)
//或ul.insertBefore(tittle,ul.children[0]);
}
})
总结
提示：方法有很多，但要发现兼容性好的且高效的方法，欢迎大家一起讨论，如果有问题还望指出。