1-6 编程练习
小伙伴们,今天我们学习了dom的查找方法,按要求补充下面的代码!
要求:通过ID选取的方法获取到html文件中的div元素,并让它们依次的在页面中弹出!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DOM的查找方法</title>
</head>
<body>
<div id="div1">第一个元素</div>
<div id="div2">第二个元素</div>
<div id="div3">第三个元素</div>
<script>
//补充代码
</script>
</body>
</html>
任务
第一步:通过ID选取的方法获取到每个div,并用变量进行接收
第二步:当打开页面时,依次弹出这几个变量
Tips:小伙伴们,看一下你们获取到的结果是不是dom对象呢?
参考代码:
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var arr = [div1, div2, div3];
for (i = 0; i < arr.length; i++) {
alert(arr[i].innerHTML);
}
思考:
这种方式只能弹出[object HTMLDivElement],并没有弹出HTML源代码,JS对其进行了自动转换!如果实现弹出HTML源代码的功效呢?