DOM操作基础

DOM操作

Javascript由3部分作出

ECMAScript DOM BOM

ECMAScript是JavaScript的核心，内置对象、关键字、保留字、基础语法
获取到的元素如何设置类名，使用 element.className = ‘aa’
为什么不是.class 因为class是ECMA的保留字，无法作为命名
tips: ECMA2015（ES6），class由保留字提升为关键字

DOM -> document object model 文档对象模型
1. 定义了访问和操作HTML文档内容的操作方法和属性
2. 通过对DOM树的操作，实现对HTML文档内容的操作
3. W3C组织定义了相关操作标准

W3C dom标准被分为三部分
1. 核心DOM针对任何机构的文档标准模型
2. XML DOM针对XML文档的标准模型
3. HTML DOM 针对的是HTML文档标准模型

学习dom，主要是学习document对象
+ 浏览器内置js解析器，还会为每一个HTML文档创建一个对应的document对象
+ 使用浏览器打开一个HTML文件的时候，document就已经被创建了
+ 通过使用document对象，可以从脚本中对HTML页面里的元素进行访问

dom常用方法	说明
getElementbyId()	通过id属性获取元素
getElementsByTagName()	通过标签名获取元素 存于数组之中
getElementsByclassName()	通过类名获取元素 存于数组之中
getElementsByName()	通过name属性获取元素 存于数组之中
querySelector()	通过css选择器来获取元素
querySelectorAll()	通过css选择器来获取元素 存于数组之中
appendChild()	追加子元素到结尾
removeChild()	移出子元素
replaceChild()	替换子元素
insertChild()	在……之前插入
createElement()	创建元素
createAttribute()	创建属性
creatTextNode()	创建文本节点
getAttribute()	获取属性
setAttribute()	设置属性

dom常用属性	说明
innerHTML	读取或设置HTML内容
parentNode	获取父节点
childNodes	获取子节点
attributes	获取属性节点集合

节点树

节点到底是什么东西？
HTML dom将HTML文档视为一个树结构
树结构有一个根节点，document对象就是我们的根节点
文档中的节点类型
1. 文档声明
2. 元素
3. 文本
4. 属性
5. 注释
6. 文档

上下层节点

属性	描述
parentNode	获得父级节点
childNodes	获得子节点集合
firstNode	获得第一个节点
lastNode	获取最后一个节点
firstElementChild	获取第一个子元素
lastElementChild	获取最后一个子元素
childr	获取所有子元素集合

平行节点

属性	描述
previousSibling	上一个兄弟节点
nextSibling	下一个兄弟节点
previousElementSibling	上一个兄弟元素
nextElementSibling	下一个兄弟元素

特殊的元素获取

属性	描述
document.body	获取body元素
document.head	获取head元素
document.documentElement	获取html元素