innerHTML用于获取元素内部的HTML代码的
对于自结束标签，这个属性没有意义

如果需要读取元素节点属性，

• 直接使用元素.属性名
  例子: 元素.id 元素.name 元素. value
  注意: class属性不能采用这种方式，
• 读取class属性时需要使用元素 .clas sName

获取元素节点的子节点

通过具体的元素节点调用

1. getElementsByTagName()
   方法,返回当前节点的指定标签名后代节点
2. childNodes
   属性,表示当前节点的所有子节点
3. firstChild
   属性,表示当前节点的第一个子节点
4. lastChild
   属性,表示当前节点的最后一个子节点

childNodes属性会获取包括文本节点在呢的所有节点
根据DOM标签标签间空白也会当成文本节点
注意:在IE8及以下的浏览器中，不会将空白文本当成子节点，

children属性可以获取当前元素的所有子元素

获取父节点和兄弟节点

通过具体的节点调用

1. parentNode
   属性,表示当前节点的父节点
2. previousSibling
   属性,表示当前节点的前一个兄弟节点
3. nextSibling
   属性,表示当前节点的后一个兄弟节点

其它方法

获取body标签

var body = document.getElementsByTagName("body")[0];

在document中有一个属性body,它保存的是 body的引用

var body = docunent.body;

document . documentElement保存的是html根标签

var html = document.documentElement;

document.all代表页面中所有的元素

var all = document.all;

根据元素的class属性值查询一组元素节点对象
getElementsByClassName( )可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器

var box1 = document.getElementsByClassName( "box1");

获取页面中的所有的div

var divs = document.getElementsByTagName("div");

获取class为box1中的所有的div
.box1 div
document.querySelector( )

• 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一 个元素节点对象
• 虽然IE8中没有getElementsByClassName( )但是可以使用querySelector( )代替
• 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")

document .querySelectorAll()
该方法和querySelector( )用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个，它也会返回数组

box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorA11("#box2");

DOM增删改

把新的子节点添加到指定节点

window.onload = function(){

//创建一 个"广州"节点,添加到#city下
myClick("btn01" , function(){
/*创建广 州节点
广州
创建1i元素节点
*/
//document.createElement( )
//可以用于创建一个元素节点对象，
//它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
//并将创建好的对象作为返回值返回
var 1i = document.createElement("li");
//创建广州文本节点

//document.createTextNode( )
//可以用来创建一个文本节点对象
//需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
var text = document.createTextNode("广州");
//将gzText设置li的子节点
/*
appendChild()
向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点);
*/
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");

//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
}
    

总结：先给按钮绑定单击函数，找到父节点，在下面创建元素节点，再在里面创建文本节点，然后通过appendChild向父节点中添加子节点。

在指定节点前添加新节点

window.onload = function(){
myClick("btn01" , function(){
var 1i = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.insertBefore(li,bj);
}

insertBefore()

• 可以在指定的子节点前插入新的子节点
  语法：父节点 .insertBefore(新节点,旧节点);

替换子节点

window.onload = function(){
myClick("btn01" , function(){
var 1i = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.replaceChild(li,bj);
}

replaceChild()

• 可以使用指定的子节点替换已有的子节点
  语法: 父节点 .replaceChild (新节点,旧节点) ;

删除节点

myClick( "btn04" , function(){
//获取id为bj的节点
var bj = document. getElementById("bj");
//获取city
var city = document. getElementById("city");
city.removeChild(bj);
    //bj.parentNode. removeChild(bj);
});

removeChild( )

• 可以删除一个子节点
  语法: 父节点 .removeChild(子节点) ;

通过innerHTML完成增删改的相关操作

myClick("btn07" , function( ){
//向city中添加广州
var city = document. getElementById("city");
//city.innerHTML += "
广州
";

    //创建一个li
var li = document . createElement("li" );
//向1i中设置文本
li.innerHTML =“广州";
//将1i添加到city中
city.appendChild(li);
});