DOM document object model文档对象模型
<a href="#">文本</a>
节点：node-构成HTML文档最基本的单元
常用节点分为四类： nodetype
-文档节点：整个HTML文档 nodename：#document 9
-元素节点：HTML文档中的HTML标签 1
-属性节点：元素的属性 2
-文本节点：HTML标签中的文本内容 #text 3
浏览器已经为我们提供文档节点对象，这个对象是window属性
他可以在页面直接使用，文档节点代表的是整个网页
DOM查询
1、获取元素节点
/**
* 获取元素节点
* 通过document对象调用
* 1.getElementById() -通过id属性获取一个元素节点对象
* 2.getElementsByTagName() -通过标签名获取一组元素节点对象
* 3.getElementsByName() -通过name属性获取一组元素节点对象
**/
//innerHTML 通过这个属性可以获取到元素内部的HTML代码（双向绑定）
//innerHTML用于获取元素内部HTML代码
//对于自结束标签，这个属性没有意义
//alert(inputs[i]);
//如果需要读取元素节点属性，直接使用元素.属性名
//例子：元素.id 元素.value 元素.name
//注意：class属性不能采用以上方式，读取class属性名需要使用元素.className
//getElementsByTagName可以根据标签名获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中返回
2、获取元素节点的子节点
/**
* 获取元素节点的子节点
* 通过具体的元素节点调用
* 1.getElementsByTagName() -方法，返回当前节点的指定标签名后代节点
* 2.childNodes -属性，表示当前节点的所有子节点（包含空白）
*children这个属性可以获取当前元素的所有子元素（不包含空白）
* 3.firstChild -属性，表示当前节点的第一个子节点（包含空白）、
*firstElementChild获取当前元素的第一个子元素
* 4.lastChild -属性，表示当前节点的最后一个子节点
* */
/**
* childNodes属性会获取包括文本节点在内的所有节点
* 根据dom标准标签空白也会当做文本节点
* 注意：在IE8及以下浏览器中，不会将空白当成子节点，
* 所以该属性在IE8中会返回4个子元素，而其他浏览器返回9个
* */
3、获取父节点和兄弟节点
/**
* 获取父节点和兄弟节点
* 通过具体的节点调用
* 1.parentNode -属性，表示当前节点的父节点
* 2.previousSibling -属性，表示当前节点的前一个兄弟节点（既包含元素节点、文本节点、注释节点）
*previousElementSibling获取前一个兄弟元素（不包含空白）
* 3.nextSibling -属性，表示当前节点的后一个兄弟节点（既包含元素节点、文本节点、注释节点）
* */
4、DOM查询剩余方法
/**
* document.querySelector()
* -需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
* -虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* -使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那他只会返回第一个
* */
//var body = document.getElementsByTagName("body")[0];
/**
*在document中，有一个属性body，他保存的是body的引用
* */
/**
* 根据元素的class属性值查询一组元素节点对象
* getElementsByClassName()可以根据class属性值获取一组元素节点对象
* 但是该方法不支持IE8及以下浏览器
* */
文档加载
/**
* 浏览器加载一个页面时，是按照自上向下的顺序加载的
* 读取一行就运行一行，如果将js代码写在页面的上面，代码执行时，页面还没有加载
*
**
* onload事件会在整个页面加载完成之后才触发
* 为window绑定一个onload事件
* 该事件对应的响应函数将会在页面加载完成之后执行
* 这样可以确保我们代码执行时所有的dom对象已经加载完毕
* */
DOM增删改
//createElement()-可以用于创建一个元素节点对象，需要一个标签名作为参数，
//将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
var li = document.createElement("li");
//appendChild() -向一个父节点添加一个子节点 -用法：父节点.appendChild(子节点)
li.appendChild(gzText);
//insertBefore -可以在指定的子节点前插入新的子节点 -语法：父节点.insertBefore(新节点，旧节点)
city.insertBefore(li,bj);
//replaceChild -可以使用指定的子节点替换已有的子节点 -语法：父节点.replaceChild(新节点，旧节点)
city.replaceChild(li,bj);
//removeChild -可以删除子节点
city.removeChild(bj);
