1,变量声明
const 常量优先 ; 如果后面要修改,再改为let
建议数组和对象使用const来声明,基本数据类型一般用let
2,API 作用和分类
作用:使用js去操作html和浏览器
分类:DOM(文档对象模型),BOM(浏览器对象模型)
3,什么是DOM
DOM是用来呈现以及与任意HTML或XML文档交互的API,即是浏览器提供的一套专门用来操作网页内容的功能
作用:开发网页内容特效和实现用户实现
(1)DOM树
DOM树将HTML文档以树状结构直观地表现出来
DOM树直观地体现了标签与标签之间的关系
(2)DOM对象
DOM对象:浏览器根据html标签生成的js 对象
1,所有的标签属性都可以在这个对象上面找到
2,修改这个对象的属性会自动映射到标签身上
DOM核心思想:把网页当作对象来处理
document对象:
1,是DOM里提供的一个对象
2,所以他提供的属性和方法都是用来访问和操作网页内容的
3,网页所有内容都在document里面
4,获取DOM对象
1.根据CSS选择器来获取DOM元素
(1)选择匹配的第一个元素,可以直接修改
返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象;
(2)选择匹配的多个元素,不能直接修改
document.querySelectAll( ' CSS选择器 ' )
返回值: CSS选择器匹配的 NodeList 对象集合
结果:得到一个伪数组,没有pop( )等方法
2,其他获取DOM元素方法(了解)
(1)根据id获取一个元素
document.getElementById( 'nav')
(2)根据标签获取一类元素 ,获取页面 所有的div
document.getElementByTagName( 'div')
(3)根据类名获取元素,获取页面所有类名为w的
document.getElementByClassName( 'w')
5,操作元素内容
目标:能够修改元素的文本更换内容
1,对象.innerText属性
将文本内容添加/更新到任意标签位置
显示纯文本,不解析标签
2,对象.innerHTML属性
将文本内容添加/更新到任意标签位置
会解析标签,多标签建议使用模块字符
6,操作元素属性
1,常用属性
最常见的属性:href , title ,src等
语法:对象.属性 = 值
2,样式属性
2.1 通过style属性操作CSS
对象.style. 样式属性 = 值(操作css属性需要遵循驼峰命名法
修改的样式比较少的情况下有优势
生成的是行内样式表,权重比较高
2.2 操作类名(className)操作CSS
适合于修改的样式比较多的情况,比较简洁
会覆盖原来的类名
2.3 通过classList 操作类控制CSS
为了解决className容易覆盖以前的类名,通过classList方式来追加和和删除类名,不替换以前的类名
3,表单元素属性
表单属性中添加就有效果,移除就没有效果,一律用布尔值表示,
如果为true代表添加了该属性,如果为false代表移除了该属性
disabled(禁用) , checked(勾选) , selected(下拉菜单)
4,自定义属性
在html5中推出来了专门的date-自定义属性
在DOM对象上一律以dataset对象方式获取
7,定时器-间歇函数
定时器函数可以根据时间自动重复执行某些代码
定时器函数可以开启和关闭定时器