DOM
DOM document object model 文档对象模型
作用就是将标记语言的各个组成部分封装为对应的对象。
DOM树（上图右下角）
DOM的作用：
DOM：
DOM中获取元素对象
// 1，根据id获取var img = document.getElementById('h1');// 封装成element对象alert(img);
//根据标签获取 var divs = document.getElementsByTagName('div');for(let i = 0;i< divs.length;i++){console.log(divs[i]);}
// 获取元素 根据namevar ins = document.getElementsByName('hobby');alert(typeof divs);alert(typeof ins);Array.from(ins).forEach(e =>{console.log(e);});
//根据class 获取elementvar divs = document.getElementsByClassName('cls');Array.from(divs).array.forEach(element => {console.log(element);});对于getElements...的方法，获取的就是Element方法，而不是数组，要是用数组属性forEach遍历的话就需要使用Array.form()方法转化为数组。
在 JavaScript 中，
getElementsByTagName、getElementsByClassName和getElementsByName等方法返回的都是类数组对象（HTMLCollection或NodeList），它们并不具备数组的一些方法（比如forEach、map、filter等）。这些类数组对象的元素是 DOM 元素，具有length属性和索引访问能力，但不具备数组的其他功能。
类数组对象（例如
HTMLCollection和NodeList）可以使用普通的for循环遍历，是因为它们实际上具有 数组的某些特性，但并不是完全的数组。具体来说，类数组对象是一个包含有length属性的对象，并且可以通过索引访问其元素。基于这一点，普通的for循环能够正常工作。
DOM查询参考手册属性方法 完成元素操作
1.获取元素对象
2.获取到元素对象后，查询手册找到能够对该元素对象操作的方法
3.在HTML中，每一个标签都是一个元素对象。
var divs = document.getElementsByClassName('cls');//改变值var div1 = divs[0];div1.innerHTML = "上海浦东"
Case-DOM
效果图
演示code
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM</title><style>#center{width: 65%;margin: 0 auto;}</style>
</head>
<body><div id="center"><img src="imgjs/off.gif" id="img0"><br><br><div class="cls">北京方恒时尚中心</div> <br><div class="cls">天津陆家嘴金融广场</div> <br></div><input type="checkbox" name="hobby" > 看电影<input type="checkbox" name="hobby" > play games<input type="checkbox" name="hobby" > 旅行
</body>
<script>// Case// 1.点亮灯泡 改变src属性值var img_ = document.getElementById('img0');img_.src = "imgjs/on.gif";//2. 将所有div标签后加上verygoodvar divs = document.getElementsByTagName('div');for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color='red'>very good !</font>"; //必须是双引号}//3.所有复选框都被选择var kuangs = document.getElementsByName('hobby');for (let index = 0; index < kuangs.length; index++) {const element = kuangs[index];element.checked = true;}
</script>
</html>
