5.DOM基础
- 节点
常见的只有三种（其他不用管）。
- 元素节点
- 属性节点
- 文本节点
节点
可以使用nodeType属性来判断一个节点的类型
值1，2，3，分别依次表示元素，属性，文本节点
- 获取节点
选择器是CSS的操作方式，而JavaScript却有着属于自己的另一套方法。
在JavaScript中，我们可以通过以下六种方式来获取指定元素。
- getElementById() //通过id
- getElementsByTagName() //通过标签类型
- getElementsByClassName() //通过class
- querySelector()和querySelectorAll() //使用CSS选择器的语法获取所需元素。
- getElementsByName() //表单有name元素，可以通过其选取
- document.title和document.body //
getElementById()和getElementsByTagName()有以下三个明显的区别。
1）getElementById()获取的是一个元素，而getElementsByTagName()获取的是多个元素（伪数组）。
- getElementById()前面只可以接document，也就是document.getElement ById()；getElementsByTagName()前面不仅可以接document，还可以接其他DOM对象。
- getElementById()不可以操作动态创建的DOM元素，而getElementsBy TagName()可以操作动态创建的DOM元素。
- 动态DOM
所谓的“动态DOM”，指的是使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。
一般格式：
var a = document.createElement("元素名");
var b = document.ctreateTextNode("文本内容");
a.属性1=xx；... a.属性n=xx；
a.appendChild(b);//将b插入到a中
c.appendChild(a);//将a插入到已有节点c中末尾
从上面几个例子，我们可以总结一下，如果想要创建一个元素，需要以下四步。① 创建元素节点：createElement()
② 创建文本节点：createTextNode()
③ 把文本节点插入元素节点：appendChild()
④ 把组装好的元素插入到已有元素中：appendChild()把一个新元素插入到父元素的内部子元素的“末尾”。a.insertBefore(b,c)方法将新元素b,插入到父元素中的某一个子元素c“之前”。
3.1. 删除元素
我们可以使用removeChild()方法来删除父元素下的某个子元素
3.2. 复制元素
我们可以使用obj.cloneNode(bool)方法来实现复制元素。
参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。
1或true：表示复制元素本身以及复制该元素下的所有子元素。
0或false：表示仅仅复制元素本身，不复制该元素下的子元素。
3.3. 替换元素
我们可以使用A.replaceChild(new,old)方法来实现替换元素。
A表示父元素，new表示新子元素，old表示旧子元素。
