欢迎使用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 获得根元素