DOM
web API基本认知
获取DOM对象
设置/修改DOM元素内容
设置/修改DOM元素属性
定时器-间歇函数
学习目标:
1,能够获取DOM元素并修改元素属性
2,具备利用定时器间歇函数制作焦点图切换的能力
1,Web API 基本认识
作用和分类
什么是DOM
DOM树
DOM对象
1.1,作用和分类
作用:就是使用JS去操作html和浏览器
分类:DOM(文档对象模型),BOM(浏览器对象模型)
1.2,什么是DOM
DOM(Document Object Model———文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API
白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用:开发网页内容特效和实现用户交互。
小结:
1,Web API阶段我们学习那两部分?
-
DOM
-
BOM
2,DOM是什么?有什么作用? -
DOM是文档对象模型
-
操作网页内容,可以开发网页内容特效和实现用户交互
1.3,DOM树
DOM树是什么?
- 将HTML文档以树状结构直观的表现出来,我们称之为文档树或DOM树
描述网页内容关系的名词
- 作用:文档树直观的体现了标签与标签的关系
1.4,DOM对象(重要)
DOM对象:浏览器根据HTML标签生成的JS对象
-
所有的标签属性都可以在这个对象上面找到
-
修改这个对象的属性会自动映射到标签身上
DOM的核心思想
- 把网页内容当做对象来处理
document 对象
-
是DOM里提供的一个对象
-
所以它提供的属性和方法都是用来访问和操作网页内容的
列:document.write()
网页所有内容都在document里面
小结:
1,DOM树是什么?
- 将HTML文档以树状结构直观的表现出来,我们称之为文档树或DOM树
- 作用:文档树直观的体现了标签与标签之间的关系
2,DOM对象怎么创建的?
- 浏览器根据html标签生成的JS对象(DOM对象)
- DOM的核心就是把内容当对象来处理
3,document是什么?
-
是DOM里提供的一个对象
-
网页所有内容都在document里面
2,获取DOM元素
根据CSS选择器来获取DOM元素(重点)
其他获取DOM元素方法(了解)
1,根据CSS选择器来获取DOM元素(重点)
1.1,选择匹配的第一个元素
语法:
document.querySelector('css选择器')
参数:
包含一个或多个有效的css选择器字符串
返回值:
css选择器匹配的第一个元素,一个HTMLElement对象。
如果没有匹配到,则返回nul
多参看文档:https://developer.mozilla.org/zh-CN、docs/web/API/Document/querySelector
1.2,选择器匹配的多个元素
语法:
document.querySelectorAll('css 选择器')
参数:包含一个或多个有效的css选择器 字符串
返回值:css选择器匹配的Nodelist对象集合
document.querySelectorAll('ul li')
思考:
1,获取一个DOM元素我们使用谁?
- querySelector()
2,获取多个DOM元素我们使用谁?
- querySelectorAll()
3,querySelector()方法能直接操作修改吗?
- 可以
4,querySelectorAll()方法能直接修改吗?如果不能可以怎么做到呢?
- 不可以,只能通过遍历的方式一次给里面的元素做修改
document.querySelectorAll('css 选择器')
得到的是一个伪数组
- 有长度有索引号的数组
- 但是没有pop()push()等数组方法想要得到里面的每一个对象,则需要遍历(for)的方法获得。
注意事项:哪怕只有一个元素,通过querySelectorSll()获取过来的也是一个伪数组,里面只有一个元素而已
2,其他获取DOM元素方法(了解)
//根据id获取一个元素
document.getElemntById('nav')
//根据标签获取一个类元素 获取页面 所有div
document.getElementsByTagName('div')
//根据 类名获取元素 获取页面 所有类名为w的
document.getElemntsByClassName('w')
小结:
1,获取页面中的标签我们最终常用那两种方式?
-
querySelectorAll()
-
querySelector()
2,他们两者的区别是什么?
-
querySelector()只能选择一个元素,可以直接操作
-
querySelectorAll()可以选择多个元素,得到的是伪数组,需要遍历得到的每一个元素
3,他们两者小括号里面的参数有神马注意事项?
-
里面写CSS选择器
-
必须是字符串,也就是必须加引号
3,设置/修改DOM元素内容
document.write()方法
对象.innerText属性
对象.innerHTML属性
1,document.write()
-
只能将文本内容追加到前面的位置
-
文本中包含的标签会被解析
2,元素innerText属性
-
将文本内容添加/更新到任意标签位置
-
文本中包含的标签不会被解析
//innerText 将文本内容添加/ 更新到任意标签位置
let info = document.getElementById('info')
//info.innerText = '你好~~~'
info.innerText = '<h4>你好~~~</h4>'
3,元素.innerHTML 属性
-
将文本内容添加/更新到任意标签位置
-
文本中包含的标签会被解析
//2,innerHTML 属性
box.innerHTML = '<h3>你好<br>我叫表白
</h3>'
小结:
1,设置/修改DOM元素内容有哪3种方式?
-
document.write()方法
-
元素.innerText属性
-
元素.innerHTML属性
2,三者的区别是什么&#x