什么是WebAPI
应用编程接口（Application Programming Interface）简称API。
什么是DOM
DOM对象
获取DOM对象
1.根据css选择器来获取dom对象,如果没有获取成功，就返回null.
语法:document.querySelector('css选择器')
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<h2 id="myh2">我是h2</h2>
</div>
<script>
let doms = document.querySelector('a')
doms.style.color = 'red'
// console.log(doms);
//也可以使用类名选择,一定要加. 不然会报错
let mode = document.querySelector('.mya')
mode.style.color = '#0a0'
console.log(mode);
</script>
</body>
1-2.选择多个元素,
语法document.querySelectorAll('css选择器')
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a <span>广州黑马程序员中心</span></a>
<h2 id="myh2">我是h2</h2>
</div>
<span>我还是span</span>
<script>
// document.querySelectorAll('选择器'),获取所有满足条件的元素
let spans = document.querySelectorAll('span')
// 此时spans是伪数组,要操作元素需要遍历
for (let i = 0; i < spans.length; i++) {
spans[i].style.color = '#0a0'
}
// console.log(spans);
//document.querrySlector('选择器'),可以直接操作元素
// let h2 = document.querySelector('#myh2')
// h2.style.color = 'red'
</script>
</body>
哪怕只有一个元素，通过querySelectorAll获取来的也是一个伪数组，里面只有一个元素而已
2.其他获取DOM元素方法
<body>
<span class="mya">span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<a href="" class="mya">我也是a</a>
<h2 id="myh2">我是h2</h2>
<h2 id="myh2">我也是h2</h2>
<script>
// 通过id获取元素,不用加#号
//docunment.getElementById('nav')
let myh2 = document.getElementById('myh2')
//根据标签获取一类元素，获取页面所有div
document.getElementsTagName('div')
//根据类名获取元素，获取页面中所有类名为w的
document.getElementsByClassName('w')
</script>
</body>
注意，小括号里面写css选择器，必须是字符串，也就是必须加引号
设置/修改DOM元素
//永远都指示追加操作，且只能位置</body>结束标签前
document.write('Hello World!');
document.write('<h3>你好，世界!</h3>')
<body>
<div id="info"></div>
<script>
//innerText 将文本内容添加/更新到任意标签位置
let info = document.getElementById('info')
//intro.innerText = '你好，你好'
info.innerText = '<h4>你好，你好</h4>'
console.log(info);
//此时页面打印出的是<h4>你好，你好</h4>，html标签不能被解析
</script>
</body>
//.innerHTML,为元素设置标签之间的文本内容，会解析标签
span.innerHTML = '<em>干啥呢</em>'
//会解析标签。干啥呢是斜体的
<style>
span {
display: block;
width: 100px;
margin-top: 100px;
padding: 10px 20px;
border: solid #f00 1px;
text-align: center;
}
</style>
</head>
<body>
<button>随机抽取</button>
<span>这是渲染位置</span>
<script>
//随机点名
let names = ['杰哥', '彬彬', '阿伟', '华强', '瓜摊老板']
// 获取元素才能赋值
let btn = document.querySelector('button')
let span = document.querySelector('span')
// 为按钮添加单击事件
btn.addEventListener('click', function () {
/* 生成随机索引， */
let i = parseInt(Math.random() * names.length)
// 根据索引获取姓名
let name = names[i]
// 将姓名渲染到知道元素中
span.innerText = name
})
// console.log(span);
</script>
</body>
设置/修改DOM元素属性
语法
：对象.属性 = 值
//`1.获取元素
let pic = document.querySelector('img')
//2.操作元素
pic.src = '图片路径'
pic.title = '这是一个图片'
2.设置/修改元素样式属性
语法:对象.style.样式属性 = 值
<body>
<button>加啊</button>
<p>我是p元素，我可以动态添加样式</p>
<script>
// 取元素
let btn = document.querySelector('button')
let p = document.querySelector('p')
// 单击按钮
btn.addEventListener('click', function () {
// 给p元素加颜色，和字体大小
p.style.color = 'red'
p.style.fontSize = '22px'
})
</script>
</body>
注意：
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要时不用忘记加css单位，如px等
就先这样吧
