<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="tabBox" id="tabBox">
<ul class="tab" id="tab">
<li>第1个页卡</li>
<li>第2个页卡</li>
<li>第3个页卡</li>
</ul>
<div>
第一个要展示的内容
<ul class="news">
<li>热门新闻</li>
<li>热门新闻</li>
<li>热门新闻</li>
<li>热门新闻</li>
<li>热门新闻</li>
<li>热门新闻</li>
</ul>
</div>
<div>
第二个要展示的内容
<ul class="detail">
<li>电影</li>
<li>电影</li>
<li>电影</li>
<li>电影</li>
<li>电影</li>
</ul>
</div>
<div>
第三个要展示的内容
</div>
</div>
</body>
<script>
/*===========获取元素tabBox================*/
// 第一种方法
// let tabBox=document.getElementById('tabBox');
// console.log(tabBox);
// 第二种方法
// getElementsByClassName和getElementsByTagName获取的是元素的集合
// let tabBox=document.getElementsByClassName('tabBox')[0];
// console.log(tabBox);
// 第三种方法
// querySelector 获取的是一个元素对象,哪怕页面中有多个符合的，也只能取一个
// querySelectorAll 获取的是一个集合，那么只有一个符合，也是一个集合，集合中只有一项
// let tabBox=document.querySelector('.tabBox');
// console.log(tabBox);
// let tabBox=document.querySelectorAll('.tabBox')[0];
// console.log(tabBox);
// 获取tabBox下的所有li
// getElementsByTagName是获取指定上下文后代中所有的标签名为N的元素集合
// let tabBox=document.querySelector('.tabBox');
// let li=tabBox.getElementsByTagName('li');
// console.log(li);
// 获取tab下的三个li
// let tab=document.querySelector('.tab');
// let navli=tab.getElementsByTagName('li');
// console.log(navli);
// let navList=document.querySelectorAll('.tab li');
// console.log(navList);
// let divList=document.querySelectorAll('.tabBox>div');
// console.log(divList);
</script>
</html>
