前言：js的基础就是为了浏览器web端服务，所以有必要知道一下web端的api也就是接口，结合那个web-API的ppt来看。
-
dom ：文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
-
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- dom 就是document文档的意思，一个页面就是一个文档，里面的各个标签，包括html和a标签，这些都是它的元素，所有的标签都是元素，
getElentById获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElentById获取元素</title>
</head>
<body>
<div id="time">2021-12-22</div>
<script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
// 2. get 获取 element元素by 通过 驼峰命名法
// 3. 参数 id 是大小写敏感的字符串，所以记得加 ''
// 4. 返回的是一个元素对象
const getElement = document.getElementById('time')
console.log(getElement);
// 查看标签对象的类型 ，所有的标签都是对象。
console.log(typeof getElement); // object
// 5.console.dir打印我们返回的元素对象 根号的查看里面的属性和方法
console.dir(getElement)
</script>
</body>
</html>
getElementByTagName获取某些元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementByTagName获取某些元素</title>
</head>
<body>
<ul>
<li>知否应是红绿肥瘦</li>
<li>知否应是红绿肥瘦</li>
<li>知否应是红绿肥瘦</li>
<li>知否应是红绿肥瘦</li>
<li>知否应是红绿肥瘦</li>
</ul>
<ol id="ol">
<li>聪明绝顶</li>
<li>聪明绝顶</li>
<li>聪明绝顶</li>
</ol>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的,它把八个li都给合在了一起
const lis = document.getElementsByTagName('li')
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采用遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
const ol = document.getElementsByTagName('ol')
console.log(ol); //它是个伪数组，里面只有【ol】所以去里面找它的子元素li没有，
//它不能自己找自己
// 3.如果页面中只有一个li 返回的还是伪数组的形式
// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
// 5.element.getElementByTagName('标签名');父元素必须是指定的单个元素，所以必须是ol[0]指定ol的第一个。
//不可以
// console.log(ol.getElementsByTagName('li'));
console.log(ol[0]); //ol的第0个里面是它所有的li和它自己。
console.log(ol[0].getElementsByTagName('li'));
// 我们一般用id挑选,感觉就是要找到唯一性，不然它咋整啊
const oll = document.getElementById('ol')
console.log(oll.getElementsByTagName('li'));
</script>
</body>
</html>