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元素