DOM基础

1.DOM对象

• DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准
• DOM操作，可以理解为“元素操作”

2.DOM结构

• 每一个元素就是一个节点，而每一个节点就是一个对象。（对象由方法和属性）

3.节点类型（有12种，但我们只需要了解以下3种）（一定要好好理解，方便后面学习）

• 弄清楚节点和元素是不同的概念，节点包括元素
• 元素节点
  • 表示元素的叫做“元素节点”
• 属性节点
  • 表示属性的叫做“属性节点”
• 文本节点
  • 表述文本的叫做“文本节点”

• 总结（加以理解）
  • 一个元素就是一个节点，这个节点被称为“元素节点”
  • 属性节点和文本节点都是独立的节点，并不属于元素节点（属性节点和文本节点与元素节点没有关系）
  • 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点
• 判断节点类型的方法
  • 可以通过nodeType属性来判断

元素节点	1
属性节点	2
文本节点	3

4.获取元素（八个方式）

• getElementById()
  • 参数为 id名 （不需要加 # 号）
  • 例如： <div id="txt"></div> getElementById("txt")获取 div 元素节点
  • 作用：因为id是唯一的，所以在页面上出现 id选择器 的时候，获取节点的方式就属这个方法最好
• getElementsByTagName()
  • 参数名为 标签名（元素名）
  • 例如：<div id="txt"></div> getElementByTagName("div")获取 div 元素节点
  • 作用：选择页面全部的指定元素标签（Elements加了 s），组成一个类数组

类数组和数组的区别：

类数组是一个假数组，它只能运用数组的基本属性，例如：length，arr[i],但是不能运用方法，例如：push()、shift()等方法

• getElementsByClassName()
  • 参数名为 class名 （不需要加 . 号）
  • 例如：<div class="txt"></div> getElementsByClassName("txt")获取 div 元素节点
  • 作用：选择页面全部的指定class名元素的标签，也是组成了一个类数组

前面三个获取节点的方式的不同点（重点理解）

1.getElementById()获取的是一个元素，而getElementsByTagName()和 getElementsByClassName()获取的是多个元素，组成一个类数组

2.getElementById()前面只能接document，而getElementsByTagName()和getElementsByClassName()不仅可以接document，还可以接别的DOM元素

3.getElementById()、getElementsByClassName()不可以操作动态创建的DOM元素，但getElementsByTagName()可以

什么是动态创建DOM元素？

就是用JS的方式创建的元素叫做“动态创建的DOM元素”

• querySelector()
  • 参数名为 选择器名
  • 选择对象：单个对象
  • 作用：选择满足条件的第一个元素（这个仔细理解）
• querySelectorAll()
  • 参数名为 选择器
  • 选择对象：多个
  • 作用：选择满足条件的全部元素，组成一个类数组
• getElementsByName()
  • 该方式只用于 表单元素（一般只用于单选框 或者 多选框）
  • 参数名为 name名
  • 作用：选择满足条件的全部表单元素，组成一个类数组
• document.title
  • 获取页面的标题部分
• document.body
  • 获取页面的body部分

5.创建元素（熟练思路）

• 思路：说白了就是组装元素，就是因为节点分为三个，想要创建出一个带有属性、带有文本的元素的话，我们就先创建文本节点、在创建元素节点，之后将文本节点插入到元素节点里面就好了，因为每一个节点就是一个对象，所以添加属性的话就以添加对象属性一样的方式进行添加就好了

<script>
    // let el = document.createElement("元素名")  创建元素节点
    let el = document.createElement('div');  // <div></div>
    // let txt = document.createTextNode('文本内容')  创建文本节点
    let txt = document.createTextNode('你好'); // <div>你好</div>
    // 将文本节点插入到元素节点里面，形成一个真正的动态DOM元素
    el.appendChild(txt);
    // 为DOM元素添加属性
    el.style.color = 'red'; // <div style="color: red;">你好</div>
    // 将动态创建的元素插入到页面
    document.body.appendChild(el);
</script>

• createElement()
  • 利用document.createElement("元素名")，创建一个元素节点
• createTextNode()
  • 利用document.createTextNode('文本内容')，创建文本节点
• 添加属性
  • 利用 el.style.color 这种方式伪元素添加属性
  • 主意：
    • 如果是为元素添加 class名的话，需要el.className的方式才能添加上

6.插入元素（弄清楚定义）

• appendChild()
  • 可以使用该方法将一个新元素插入到父元素的内部子元素的“末尾”
• insertBefore()
  • 可以使用该方法将一个新元素插入到父元素中的某一个子元素“之前”

A表示父元素、B表示子元素、ref表示指定子元素

A.insertBefore(B,ref)则表示在ref之前插入B