DOM : 文档对象模型

(全称 : Document Object Model | 简称 : DOM)

通过三点认识DOM核心

1 . DOM 描绘一个层次化的节点树 . 允许开发人员 (添加 . 修改 . 移除) 使得JavaScript操作HTML页面 . 不是在操作字符串 . 而是在操作节点 . 极大的降低了我们编程难度

2 . DOM对很多东西做了抽象 . 给我们开发人员提供了丰富的API : [ 获取元素 . css样式 . 事件 . 动画 . 元素尺寸 . 元素位置 . 等等... 节点操作每个知识体系都非常庞大 . 千丝万缕]

DOM的结构 . 类似于一棵树. 所以把DOM也叫作DOM树 . DOM树是由很多DOM节点组成的

文档 : 一个页面就是一个文档 . DOM 中使用 document 表示

元素 : 页面中的所有标签都是元素 . DOM 中使用 element 表示

节点 : 网页中的所有内容都是节点 . 包含( 标签 . 属性 . 文本 . 注释等等..)
DOM树节点分为这几种

元素节点 1
属性节点 2 
文本节点 3
注释节点  8   
document 文档节点 9
DocumentFragment 文档片段接口 11

image.png

DOM节点属性

nodeName   : 元素节点的标签名 . 以大写字母的形参表示 . 只读 (不能修改)
nodeValue  : 文本节点和注释节点的内容 . 可读可写
nodeType   : 节点的类型 (最有用的) 能帮助我们区分节点 只读
attributes : 元素节点的属性集合 (只能修改属性值) name 属性名 | value 属性值

获取 document 对象模型里面的文档对象

分为两种 : get / query

首先讲解 : get 获取的几种方式

get系列是动态获取每次使用时会重新获取

get方法获取元素 : ID 类名

document.getElementById("ID名");

示例:

image.png

注意: 我们都知道网页上的ID名就像身份证一样只会出现一次
所以我们获取元素也只有一个就是获取元素本身

get方法获取元素 : class 类名

document.getElementByIdClassName("class类名")

示例:

image.png

注意:网页中标签class的类名会出现很多相同的
这里要注意此时获取的是页面中多个标签元素
因为它们的clss类名相同会形成一个数组数组里存放了网页中所有的相同的class类名

get方法获取元素 : name类名

document.getElementByIdName("name类名")

示例

image.png

注意: 网页上的相同name的值会出现多次
所以Name所获取的元素会有多个
因此变量addr指向的是内存空间里面的一个数组
数组存放了所有name名称为指定的name的元素

get方法获取元素 : 标签名

document.getElementByIdTagName("标签")

示例

image.png

注意:因为一个网页上的同一类的标签会出现多次 . 所以TagName(标签名)获取的元素会有多个 . 此时变量 content指向的是内存空间的一个数组 . 数组里面存放了网页所有标签为div的元素

好啦 ~~ 咱们get获取讲完了... 如果有不足的地方请留下您的建议

接下来咱们讲query 获取的方式

query 获取之选择器获取很奇特

query系列是静态获取

咱们先讲第一种

document.querySelector("标签,ID名,class类名") // 等多种...;

示例 :

image.png

注意 : 这里query 获取的只能是一个元素
如果有多个标签和类名相同获取的是页面中第一次出现的那个元素

如果想获取多个怎么办呢?
别着急一定有方法的~

第二种获取多个元素的方法

document.querySelectorAll("标签,ID名,class类名"); // 等多种...

示例 :

image.png

注意 : 这里 All 选择器选中的元素是多少就是多少
如果是多个元素返回的是一个数组
即便只选择到了一个元素 . 返回的也是一个数组

get 和 query 的获取的区别

image.png

get 和 query 的获取的节点区别

image.png

后续一定更加精致不喜勿喷
留下您最好的建议给予我这个{ 新手 }最好的帮助
今日打卡 : 2020.05.22

DOM : 文档对象模型