JS新手入门笔记整理：DOM基础

📌DOM对象

• DOM，全称是“Document?Object?Model（文档对象模型）”，它是由W3C定义的一个标准。DOM里面有很多方法，可以通过它提供的方法来操作一个页面中的某个元素，如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。DOM操作，可以理解成“元素操作”。
• DOM采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。在HTML页面中，每一个元素就是一个节点，而每一个节点就是一个对象。在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。

---

📌节点类型

在JavaScript中，节点分为很多种类型。DOM节点共有12种类型，但是常见的只有下面3种，元素节点、属性节点、文本节点。

• JavaScript会把元素、属性以及文本当作不同的节点来处理。表示元素的叫作“元素节点”，表示属性的叫作“属性节点”，表示文本的叫作“文本节点”。节点和元素是不一样的概念，节点是包括元素的。
• 一个元素就是一个节点，这个节点称为“元素节点”。
• 属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
• 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。

---

在JavaScript中，可以使用nodeType属性来判断一个节点的类型。

不同节点的nodeType属性值? ??

节点类型	node Type值
元素节点	1
属性节点	2
文本节点	3

---

📌获取元素

获取元素，就是获取“元素节点（不是属性节点或文本节点）”。对于一个页面，想要对某个元素进行操作，就必须通过一定的方式来获取该元素，获取该元素后，才能对其进行相应的操作。

---

通过id来获取元素：getElementById（　）

getElementById（　），也就是“get?element?by?id”，意思是通过id来获取元素。getElementById（　）类似于CSS中的id选择器。

语法

document.getElementById（"id名"）

• getElementById（　）方法中的id是不需要加上井号（#）的。
• getElementById（　）获取的仅仅是一个元素。

---

通过标签名来获取元素：getElementsByTagName（　）

getElementsByTagName，也就是“get?elements?by?tag?name”，意思是通过标签名来获取元素。getElementsByTagName（　）类似于CSS中的“元素选择器”。

语法

document.getElementsByTagName（"标签名"）

• getElementsByTagName（　）获取的是多个元素（即集合）。是一个数组，如果想得到数组中某一个元素，可以使用数组下标的方式获取。
• 准确地说，getElementsByTagName（　）方法获取的是一个“类数组”（也叫伪数组），它不是真正意义上的数组。只能使用数组的length属性以及下标的方式，但是对于push（　）、split（　）、reverse（　）等方法是无法使用的。

---

通过类名来获取元素：getElementsByClassName（　）

getElementsByClassName，也就是“get?elements?by?class?name”，意思是通过类名来获取元素。getElementsByClassName（　）类似于CSS中的class选择器。

语法

document.getElementsByClassName（"类名"）

getElementsByClassName（　）获取的是一个类数组。

---

通过选择器获取元素：querySelector（　）和querySelectorAll（　）

querySelector（　）和querySelectorAll（　），可以使用CSS选择器的语法来获取所需要的元素。

语法

document.querySelector（"选择器"）;
document.querySelectorAll（"选择器"）;

querySelector（　）表示选取满足选择条件的第1个元素，querySelectorAll（　）表示选取满足条件的所有元素。它们的写法和CSS选择器的写法是完全一样的。

document.querySelector（"#main"）
document.querySelector（"#list li:nth-child（1）"）
document.querySelectorAll（"#list li"）
document.querySelectorAll（"input:checkbox"）

---

通过name名获取元素：getElementsByName（　）

语法

document.getElementsByName（"name名"）

• getElementsByName（　）获取的是一个类数组，想要准确得到某一个元素，可以使用数组下标的方式来获取。
• getElementsByName（　）只用于表单元素，一般只用于单选按钮和复选框。

---

document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门提供了两个非常方便的方法：document.title和document.body。

语法

document.title=" "
document.body=" "

---

📌创建元素

在JavaScript中，可以使用createElement（　）来创建一个元素节点，也可以使用createTextNode（　）来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。这种方式又被称为“动态DOM操作”,指的是使用JavaScript创建的元素。这个元素一开始在HTML中是不存在的。

语法

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中，每一个元素节点都被看成一个对象。可以像给对象属性赋值那样，给元素的属性赋值。来添加元素属性。

语法

var e1=document.createElement（"元素名"）; //创建元素节点
e1.属性名="属性值"                         //创建属性节点

---

📌插入元素

appendChild（　）可以把一个新元素插入到父元素的内部子元素的“末尾”。

语法

A.appendChild（B）;

• A表示父元素，B表示动态创建好的新元素。

---

insertBefore（　）方法可以将一个新元素插入到父元素中的某一个子元素“之前”。

语法

A.insertBefore（B,ref）;

• A表示父元素，B表示新子元素。ref表示指定子元素，A.insertBefore（B,ref）则表示在ref之前插入B。

---

appendChild（　）和insertBefore（　）这两种插入元素的方法都需要先获取父元素才可以操作。

---

📌删除元素

removeChild（　）方法来删除父元素下的某个子元素。

语法

A.removeChild（B）;

A表示父元素，B表示父元素内部的某个子元素。

---

📌复制元素

cloneNode（　）方法用来实现复制元素。

语法

obj.cloneNode（bool）

参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。

• 1或true：表示复制元素本身以及复制该元素下的所有子元素。
• 0或false：表示仅仅复制元素本身，不复制该元素下的子元素。

---

📌替换元素

replaceChild（　）方法用来实现替换元素。

语法

A.replaceChild（new,old）;

A表示父元素，new表示新子元素，old表示旧子元素。

---