2021-11.15--DOM对象

1.概念
DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。DOM全称为The Document Object Model，应该理解为是一个规范，定义了HTML和XML文档的逻辑结构和文档操作的编程接口。
2.获取元素
（1）getElementById()
tips: 使用window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。
（2）getElementsByTagName(复数)

var oUl = document.getElementById("list");
            var oLi = oUl.getElementsByTagName("li");
            oLi[2].style.color = "red";

获取的仅仅是“id为list的ul元素”下所有li元素
（3）getElementsByClassName(复数)
跟getElementsByTagName相似，getElementsByClassName()获取的也是一个类数组。
（4）querySelector()和querySelectorAll()
特别注意一点，querySelectorAll()方法得到的是一个类数组，即使你获取的只有一个元素，也必须使用下标[0]才可以正确获取
（5）getElementsByName(复数)
通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现
（6）document.title和document.body
一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。

其实在HTML中直接添加元素，这是静态方法。而使用JavaScript添加元素，这是动态方法。在实际开发中，使用静态方法是实现不了动画效果的。
3.创建元素
所谓的“动态DOM”，指的是使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。
4.插入元素
1.A.appendChild(B);
A表示父元素，B表示动态创建好的新元素。后面章节中，如果没有特殊说明，A都表示父元素，B都表示子元素
2.A.insertBefore(B,ref);
A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。
5.删除元素
A.removeChild(B);
A表示父元素，B表示父元素内部的某个子元素。
如果需要删除整个列表的话，就把整个列表传入参数
6.复制元素
obj.cloneNode(bool)
参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。
7.替换元素
A.replaceChild(new,old);
A表示父元素，new表示新子元素，old表示旧子元素。