Js——DOM基础

DOM：文档对象模型

是一套标准编程接口，通过DOM这套接口来操作html元素

节点类型

元素节点

属性节点

文本节点

网页效果：操作元素节点 、属性节点、文本节点，以及修改元素样式

document对象

DOM通过document对象，为开发者提供了大量接口（api）来操作DOM树

获取节点

document.getElementByld()   // 一般不用

document.getElementsByClassName() // 一般不用

document.querySelector()

document.querySelectorAll()

domObject.innerHTML：获取和设置元素内所有内容

事件类型

click（点击事件 + on）、mouseenter（鼠标移入元素）、mouseleave（鼠标移出元素）

当......时候，做......事情

设置样式

element.style.color

element.style.backgroundColor

通过click、mouseenter、mouseleave事件控制样式

设置属性

element.src

element.id

点击数字列表切换图片

通过class属性设置样式

element.className

点击原始、设置激活的背景色

练习

1、实现一个点击数字列表，切换图片的效果

2、实现一个轮播图效果