APIs---Day01

1. Web API的基本认知

1.1 变量的声明

1.2 作用和分类

1.3 什么是DOM

1.4 DOM树

1.5 DOM对象

在html中叫标签；在JS中叫对象

2.获取DOM对象

2.1 根据CSS选择器来获取DOM元素

<div>123</div><p id="nav">导航栏</p><ul><li>首页</li><li>关于我们</li><li>联系我们</li></ul><script>//获取第一个元素const box = document.querySelector('div');console.dir(box);//这个是利用id选择器const nav = document.querySelector('#nav');console.log(nav);//获取第一个ul 里面的li的第一个孩子const li = document.querySelector('ul li:first-child');console.log(li);</script>

2.2 其他获取DOM元素方法

3. 操作元素的内容

3.1 元素 .innerText属性

<div class="box">我是文字的内容</div><script>//第一步先获取元素const box = document.querySelector('.box');//第二步修改元素的内容console.log(box.innerText);// 实际上加粗标签是不会生效的，识别不了box.innerText = '<strong>我是新内容</strong>';

3.2 元素 .innerHTML属性

<div class="box">我是文字的内容</div><script>//第一步先获取元素const box = document.querySelector('.box');//第二步修改元素的内容console.log(box.innerHTML);box.innerHTML = '<strong>我是新内容</strong>';</script>

 <h1 class="one">???</h1><h2 class="two">???</h1><h3 class="three">???</h2><script>//1.先建立数组const arr = ['张三', '李四', '王五', '赵六'];//获取随机数const random = Math.floor(Math.random() * arr.length);//2.获取h1元素const h1 = document.querySelector('.one');//3.把随机数组中的值赋值给h1h1.innerHTML = arr[random];arr.splice(random, 1);</script>

4.操作元素的属性

4.1 操作元素常用属性

4.2操作元素样式属性

4.2.1 通过style属性操作CSS

对于body的话可以直接引用

4.2.2操作类名className操作CSS