Web api基础知识一

作用：就是使用js去操作HTML和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

DOM：是浏览器提供的一套专门用来操作网页内容的功能

DOM的作用是开发网页特效和实现用户交互

DOM对象：浏览器根据HTML标签自动生成的js对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

获取dom元素

语法：document.querSelector获取一个元素

document.querSelector('css选择器')

CSS选择器匹配的NodeList 对象集合

CSS选择匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null。

document.querSelectorAll获取数组

document.querSelectorAll('css选择器')

得到的是一个伪数组：

有长度有索引号的数组

但是没有pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（如for) 的方式获得。

设置文本内容

document.write----只能在body标签中写内容很少用

//文本中包含的标签会被解析
document.write('Hello world!')

dom.innerText="你好"----设置标签的文本内容

//innerText  将文本内容添加/更新到任意标签位置
let info =document.getElementById('info')
//intro.innerText ='嗨~我叫李雷！'
info.innerText ='<h4>嗨~我叫李雷！</h4>'

dom.innerHTML----设置标签的文本内容，还可以设置标签：

dom.innerHTML=<a>链接</a>

//innerHTML属性
box.innerHTML = '<h3>前端程序员的头发都很多</h3>'

三者的区别：

document.write()-----只能追加到body中

元素：innerText 属性只识别内容，不能解析标签

元素：innerHTML 属性能够解析标签

设置元素的样式

语法：对象.属性 = 值

//1. 获取元素
let pic = document.querySelector('img')
//2. 操作元素
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'

设置/修改元素样式属性

1.通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值

let box = document.querySelector('.box')
//2. 修改背景颜色
box.style.backgroundColor = 'red'
box.style.width = '300px'
box.style.marginTop = '50px'

注意：

1.修改样式通过style属性引出

2.如果属性有 - 连接符，需要转换为小驼峰命名法

3.赋值的时候，需要的时候不要忘记加css单位

2.操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：

//active 是一个css类名
元素.className = 'active'

3.通过classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

设置表单属性

定时器

1.开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数

!! 间隔时间单位是毫秒

function repeat() {
	console.log('前端程序员，就是头发多咋滴~~')
}
//每隔一秒调用repeat函数
setInterval(repeat,1000)

2.关闭定时器

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)

Web API基础知识一