DOM模型
DOM模型
JavaScript由以下三部分构成
1.ECMAScript 2.Bom（浏览器对象） 3.Dom（文档对象）
术语
1.文档（document）
1
| 注：1.语法 2.注意大小写3.样式不加-4.多加或少加单引号''
|
2.节点（了解）
1
2
3
| 构成网页的所有组成部分，在js中都被成为节点。
节点类型：①标签节点②属性节点③文本节点
节点属性：①nodeType节点类型②nodeName节点类型③nodeValue节点值
|
注：节点本身就是对象。
元素节 == 标签名 属性节 == 属性名 文本节 == #text value == null(空)
3.元素
1
| 就是html中的标签，在js中称为元素或对象，是节点的一种，也称为元素节点
|
Dom编程的基本理解
1
| 在js代码中获取到网页中的有关标签（元素），并对其进行某种操作。
|
DOM模型
如何获取元素
1
2
3
4
5
6
7
8
9
10
| 根据ID名获取元素 ------document.getElementByid（'id名'）【结果是该id所对应的元素（对象/节点）】
根据标签获取元素 ------document.getElementsByTagName（'标签名'）【结果是一个'集合'（伪数组）】
|注意：标签获取即使只获取一个元素，也是一个伪数组，也是集合，也要用下标去获取|
根据类名获取元素 ------document.getElementsByClassName（'类名'）【结果是一个'集合'（伪数组）】
------document.querySelector('选择器')【结果是该选择器所对应的第一个元素（对象/节点）】
根据选择器获取元素
------document.querySelectorAll('选择器')【结果是一个'集合'（伪数组）】
|
元素（节点）关系获取元素
1
2
3
4
5
6
| xx元素.parentNode--------【获取到某元素的父元素】
xx元素.children---------【获取到某元素的所有子元素，是一个集合】
xx元素.firstElementChild--------【获取到某个元素的第一个子元素】
xx元素.lastElementChild--------【获取到某个元素的最后一个子元素】
xx元素.nextElementSibing-------【获取到某个元素的后一个兄弟元素】
xx元素.previousElementSibing------【获取到某个元素的前一个兄弟元素】
|
添加元素
1
2
3
4
5
6
7
8
9
10
| 创建元素-----var 变量 = document.createElement（'标签名'）
|注：创建的元素以内存变量的形式，未放入页面中|
克隆元素-----var 变量 = xx元素.cloneNode（true/false）【true表示同时克隆该元素的所有内部内容。false表示不克隆该元素的内部内容】
添加元素到父元素中的最后位置------xx父元素.appendChild（xx要添加的元素）【结果该新添加的元素成为了父元素的最后一个子元素】
添加元素到父元素中的某个元素之前-----xx父元素.insertBefore（xx要添加的元素，xx现有的元素）【结果该新添加的元素成为了父元素的一个子元素，并在指定的子元素前】
替换某个现有元素------xx父元素.replaceChild（xx新，xx旧）【结果就是新的元素替换了所给定的现有子元素】
|
删除元素