这是我参与「第四届青训营 」笔记创作活动的第4天。
Web API基本认知
- 作用：使用JS去操作html和浏览器，其中APIs分为DOM（文档对象模型）和BOM（浏览器对象模型）
DOM (Document Object Model )
- DOM是浏览器提供的一套专门用来操作网页内容的功能；其中可以开发网页特效和实现用户交互；
- DOM树
- 从上到下是Document-html-head(body)；
- DOM对象
- 浏览器根据html标签生成的js对象，所有的标签属性都可以在这个对象上面找到，并且修改这个对象的属性会自动映射到标签身上；
- DOM的核心思想是把网页内容当做对象来处理；
- 获取DOM对象
- 根据CSS选择器来获取DOM元素，其语法为:
document.querySelctor('css选择器')； - 其中括号内参数可以包含一个或多个有效的css选择器；
- 返回值：css选择器只能匹配的第一个元素；
- 选择匹配多个元素
- 其语法为：
Document.querySlectorAll（'css选择器'），通过该语法可以得到多个元素，但其值是放在数组字面量里面的伪数组；
- 改变CSS样式
-语法规则：
对象名.style.属性名 = 属性值
- 如果属性名有短横线，将其属性名更改为小驼峰命名法，即
对象名.style.backgroundColor，其中在css中显示的是行内样式。
- 修改元素样式
- （className）：如果需要更改的样式很多，那么将所有的样式写进类里面进行修改。其语法为：
元素.className = 类名； - （classList）：追加类其语法为：
元素.classList.add（）/classList.remove（），不影响以前的类只是更改或者添加/移除一些样式； 元素.classList.toggle（）切换类，如果元素有一个名为'one'的类，使用前面提到的语法则将one这个类去掉，如果元素没有名为'one'的类则添加上这个类；
- 表单属性修改
- 其语法为：
<input type = "text" value = "请输入">，其中还可以追加属性为disabled，checked,selected是布尔类型的值，获取该元素后将其属性赋值为false或者true即可以显示效果；
定时器-间歇函数
- 每隔一段时间需要自动执行一段代码，不需要手动去触发，类似于数据库中的触发器；语法为：
let 变量名 = setInterval(函数，间隔时间)； - 关闭定时器
- clearInterval(变量名)
