本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
Dom对象
API基本认知
DOM
DOM是文档对象模型
作用:操作网页内容，可以开发网页内容特效和实现用户交互
DOM树
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
作用：文档树直观的体现了标签与标签之间的关系
Dom对象
获取元素
获取单个元素
返回的是网页元素对象
document.querySelector('css选择器');
<body>
<div></div>
<script>
const div = document.querySelector('div');
console.log(div);//结果： <div></div>
</script>
</body>
选择匹配多个元素
返回的是含网页对象的数组
document.querySelectorAll('css选择器');
<body>
<div></div>
<div></div>
<div></div>
<script>
const div = document.querySelectorALL('div');//结果：NodeList(3)
console.log(div);
</script>
操作元素内容
innerText:获取元素文本
innerHTML:获取元素内容（文本+标签）
innerText 和 innerHTML 都是用来获取网页标签内容 innerText只获取文本内容，不会获取标签 innerHTML获取文本内容＋标签
并且在使用innerText 和 innerHTML时，前者会将标签当做字符串打印出来
后者则会将标签解析成网页元素
<body>
<div>
<a href="">eat</a>
</div>
<script>
const div = document.querySelector('div');
console.log(div.innerText); //eat
console.log(div.innerHTML);// <a href="">eat</a>
</script>
</body>
操作元素属性
常用属性修改
还可以通过 JS 设置/修改标签元素属性
// 语法:
对象.属性 = 值
//获取链接元素
const a = document.querySelector('a');
//修改链接对象的属性
a.href = 'https://www.baidu.com/';
操作元素样式属性
应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。
// 语法:
对象.style.样式属性 = 值
const div = document.querySelector('div');
div.style.backgroundColor = 'skyblue';
自定义属性
在html5中推出来了专门的data-自定义属性;在标签上一律以data-开头;
在DOM对象上一律以dataset对象方式获取
<div data-id="5" data-name="芒果">5</div>
<script>
const div = document.querySelector('div');
let id= div.dataset.id;//id = '5';
let name = div.dataset.name;//name = '芒果'
</script>
定时器-间歇函数
setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
1.开启定时器
setInterval(函数, 间隔时间)
2.关闭定时器
let 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)
// 语法
// 开启定时器
setInterval(函数, 间隔时间)
// 匿名函数写法:
setInterval(function () {
console.log('你想吃肉么？');
}, 1000)
// 具名函数写法
function fn(){
console.log('你想吃肉啊？');
}
// setInterval(函数名, 间隔时间) 函数名不要加小括号
setInterval(fn, 1000);
setInterval('fn()', 1000);
关闭定时器
let timer = setInterval(function(){
console.log('eating');
}, 1000);
console.log(timer)// 返回的是id号
// 关闭定时器
clearInterval(timer);
