欢迎使用CSDN-markdown编辑器

0803 课堂笔记

DOM操作

JavaScript由3部分组成

ECMAScript DOM BOM

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

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

W3c dom 标准被分为了3个部分
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()	移除子元素
replaceChile()	替换子元素
insertBefore()	在…之前插入
createElement()	创建元素
createAttribute()	创建属性
createTextNode()	创建文本节点
getAttribute()	获取属性
setAttribute()	设置属性

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

节点数

节点到底是什么东西？

HTMl DOM将HTML文档视为一个树结构，树结构有一个跟，document对象就是我们的根节点

文档中的节点类型
1. 文档申明
2. 元素
3. 文本
4. 属性
5. 注释
6. 文档

上下层节点

属性	描述
parentNode	获得父级节点
childNodes	获得子节点集合
firstChild	获得第一个子节点
lastChild	获得最后一个子节点
firstElementChild	获得第一个子元素
lastElementChild	获得最后一个子元素
children	获得所有子元素节点集合

平行节点

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

特殊的元素获取

属性	描述
document.body	获得body元素
document.head	获得head元素
document.documentElement	获得根元素