DOM day_01(7.7) dom的介绍和核心操作

DOM: Document Object Model 文档对象模型

HTML CSS: 本质是 JS 的语法糖

浏览器的功能分两种:

1.把 HTML 和 CSS 这种语法糖写法, 转换成 JS 的对象

2.把JS对象 渲染到页面上

一、DOM树

把 HTML代码, 通过图的方式进行展示. 外观像一颗树

• 节点: node. html中每个元素都称为节点. 因为作用不同 有 不同的节点分类名

初识dom

整个HTML, 在浏览器上会被解析成 document 对象，浏览器上最终显示的内容, 本质是个JS对象， 而 HTML 作为语法糖, 只能进行简单的页面配置，学习DOM的目的: 抛开语法糖, 直接操作页面本身的 本质代码. 可以更加灵活的操作页面。

DOM作用

 DOM的重点作用: 弥补 HTML 不具备的能力 -- 动态

 目的: 把时间放在 id=time 的元素里打印

二、元素的读取

1.固定元素读取

 DOM的核心操作就两件事:
     1. 找到要操作的元素 -- 官方提供了超多方案
     2. 操作元素的属性

 2.css选择器读取元素

利用css 选择器 是 万能查找元素的方案 

querySelectorAll: 通过选择器查找符合条件的全部元素
    // 返回值的原型是 NodeList, 是类数组/伪数组
    // 但是: 其中有 forEach 方法可以用来遍历

三、class操作

在实际开发中, 样式有两种 style(使用少) 和 class(使用多)

通过修改className，改变点击事件后的样式

classList

 classList: 把class属性封装后得到的对象
 其原型中带有各种方法, 可以便捷的操作 class

1.add: 增加/添加 新的class值

 优点: 相较于自己修改className, 使用方法更加的安全可靠

2.remove:删除

3. toggle:切换

练习

先确定样式

写入DOM，DOM的核心操作: 先找到你要操作的元素, 操作他

三、DOM的一些应用

1.菜单的展开隐藏

练习

 

2.页数指示点

总结

DOM: 文档对象模型

HTML 本质是 JS的语法糖, 浏览器会把他转换成document 对象，HTML只能担负静态页面的展示，DOM 直接操作JS对象, 可以弥补来完成动态的内容展示（弥补HTML做不到的事情 ）

其核心操作就两步:

1.查找到元素

（1）固定元素的查找: head body documentElement-html

（2）按照关系查找

• children: 所有子元素
• parentElement: 父元素
• nextElementSibling: 下一个兄弟元素

（3）按照特征查找

• id: getElementById
• 标签名: getElementsByTagName

（4）利用css选择器查找（万能）

• querySelector: 返回值是元素
• querySelectorAll: 返回值是类数组, 需要遍历

2.操作元素的属性

（1）style: 内联样式

（2）class:

• className: 就是class属性本体
• classList: 对class进行了封装得到的对象, 其中有很多操作class的方法

（3）事件: 都是on开头的属性

• onclick : 点击事件