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