任务一：根据id属性获取元素
任务实现：
<body>
<ul>
<li id="flag">鱼香肉丝</li>
<li>宫保鸡丁</li>
<li>糖醋里脊</li>
<li>凉拌黄瓜</li>
</ul>
<script>
// 根据id属性获取元素
var Obox = document.getElementById('flag');
console.log(Obox);
</script>
</body>
任务二：根据标签名获取元素
任务实现：
<body>
<ul>
<li>鱼香肉丝</li>
<li>宫保鸡丁</li>
<li>糖醋里脊</li>
<li>凉拌黄瓜</li>
</ul>
<script>
// 根据标签名获取元素
var lis = document.getElementsByTagName('li');
console.log(lis);
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
console.log(Array.isArray(lis));
</script>
任务三：根据name属性获取元素
任务实现：
<body>
<p>请选择你最喜欢的水果(多选)</p>
<input type="checkbox" name="fruit" value="苹果">苹果
<input type="checkbox" name="fruit" value="香蕉">香蕉
<input type="checkbox" name="fruit" value="西瓜">西瓜
<script>
var fruits = document.getElementsByName('fruit');
// 输出获取到的集合
console.log(fruits);
// 通过索引的方式访问集合中的第2个元素并输出
console.log(fruits[1]);
</script>
</body>
任务四：根据类名获取属性
任务实现：
<body>
<ul>
<li class="woman">小红</li>
<li class="man">小明</li>
<li class="man">小强</li>
<li class="woman">小兰</li>
</ul>
<script>
// 根据类名woman获取元素
var women = document.getElementsByClassName('woman');
// 根据类名man获取元素
var men = document.getElementsByClassName('man');
// 输出类名为womon的第1个元素
console.log(women[0]);
// 输出类名为man的第1个元素
console.log(men[0]);
</script>
</body>
任务五：根据CSS选择器获取元素
任务实现：
<body>
<div class="play">过山车</div>
<div class="play">旋转木马</div>
<div class="play">摩天轮</div>
<div class="play">观影院</div>
<script>
// 获取class为play的第1个div
var firstPro = document.querySelector('.play');
console.log(firstPro);
// 获取class为play的所有div
var allPro = document.querySelectorAll('.play');
console.log(allPro);
</script>
</body>
任务六：获取基本结构元素
任务实现：
<body>
<script>
// 获取body元素
var bodyEle = document.body;
console.log(bodyEle);
// 获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
</body>
任务七：实现动态标题栏
任务实现：
<script>
var n = 0;
function title() {
n++;
if (n == 4) {
n = 1;
}
if (n == 1) {
document.title = "动态标题栏";
}
if (n == 2) {
document.title = "个人主页";
}
if (n == 3) {
document.title = "Dom的应用";
}
setTimeout("title()", 1000);
}
title();
</script>
原创视频
