DOM基础

DOM操作，可以简单理解成“元素操作”
我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作

1 节点类型

• 元素节点
• 属性节点
• 文本节点
  注意：
  （1）.一个元素就是一个节点，这个节点称之为元素节点
  （2）.属性节点和文本节点看起来是元素节点的一部分，实际上，他们是独立的节点，并不属于元素节点
  （3).只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点

2.获取元素
（1）getElementById() 通过id来获取元素（）
document.getElementById(“id名”)
（2）getElementsByTagName通过标签名来选中元素
document.getElementsByTagName（“标签名”）
区别：

• getElementById() 获取的是一个元素，getElementsByTagName获取的是多个元素（伪数组）
• getElementById()前面只能接document,也就是document.getElementById(“id名”) getElementsByTagName（）前面不仅可以加document 还可以加其他DOM对象
• getElementById()不可以操作动态创建的DOM对象，getElementsByTagName可以操作动态创建的DOM对象

(3) getElementsByClassName()通过class来选中元素
document.getElementsByClassName(“类名”)
（4）querySelector()和querySelectorAll()使用CSS选择器来获取想要的元素
querySelector(“选择器“)表示选取满足条件的第一个元素
querySelectorAll(”选择器")所有元素
当要选取一个元素时，querySelector()和querySelectorAll()是没有区别的

（5）getElementsByName()通过name属性来获取表单元素
document.getElementsByName(“name名”) 只用于表单元素，一般只用于单选按钮和复选框
单选框：

复选框：

（6）document.title和document.body

3.创建元素
var e1=document.createElement(“元素名”)； //创建元素节点
var txt=document.createTextNode(“文本内容”)； //创建文本节点
e1.appendChild(txt); //把文本节点插入元素节点中
e2。appendChild(e1); //把组装好的元素插入已存在的元素中
说明：e1表示javascript动态创建的元素节点，txt表示javascript动态创建的文本节点，e2表示HTML中已经存在的元素节点
A。appendChild(B)表示把B插入到A 中去，也就是使得B成为A的子节点
创建简单元素：
创建复杂元素（带属性）：
动态创建图片：

在动态操作DOM时，设置元素class用的是className而不是class
创建多个元素：
4.插入元素
（1）A.appendChild(B)表示把一个新元素插入到父元素的内部子元素的末尾
其中A代表父元素，B代表子元素
例
其中要注意大小写
（2）A.insertBefore(B,ref) 将一个新元素插入到父元素中某一个子元素之前
A表示父元素，B表示新子元素，ref表示指定子元素
例：
注意：这两种插入元素的方法都需要获取父元素才可以进行操作

5.删除元素
A.removeChild(B)删除父元素中的某一个子元素
例：
删除整个列表时
document.body.removeChild(oUl)
注意：在使用删除元素时，一定要找到两个元素：被删除的子元素，被删除子元素的父元素

6.复制元素
obj.cloneNode(bool)
说明：参数obj表示被复制的元素，而参数bool是一个布尔值
1或true:表示复制元素本身以及复制该元素下的所有子元素
0或false:表示仅仅复制元素本身，不复制该元素下的子元素

7.替换元素
A.replaceChild(new,old);
A表示父元素，new表示新子元素，old表示旧子元素