DOM对象

Document Object Model文档对象模型
将标记语言的各个组成部分封装为对象

Document: 整个文档对象
Element: 元素对象
Attribute: 属性对象
Text: 文本对象
Comment: 注释对象

JavaScript通过DOM，就能够对HTML进行操作了。

改变HTML元素的内容
改变HTML元素的样式（CSS）
对HTML DOM事件作出反应
添加和删除HTML元素

DOM是w3c(万维网联盟)的标准
DOM定义了访问HTML和XML文档的标准
w3c DOM标准被分为3个不同的部分：

核心DOM：针对任何结构化文档的标准模型
1. Document: 整个文档对象
2. Element: 元素对象
3. Attribute: 属性对象
4. Text: 文本对象
5. Comment: 注释对象
XML DOM：针对XML文档的标准模型
HTML DOM：针对HTML文档的标准模型
1. Image: <img>
2. Button: <input type='button'>

获取Element

Element:元素对象
获取：使用Document对象的方法来获取
- getElementById: 根据id属性值获取，返回一个Element对象
- getElementsByTagName: 根据标签名称获取，返回Element对象数组
- getElementsByName: 根据name属性值获取，返回Element对象数组
- getElementsByClassName: 根据class属性值获取，返回Element对象数组

常见HTML Element对象的使用

<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
    var img = document.getElementById("light");
    // alert(img);
    img.src = "../imgs/on.gif";

    var divs = document.getElementsByTagName("div");
    /*
           style: 设置元素css样式
           innerHTML: 设置元素内容
     */
    for (let i = 0; i < divs.length; i++) {
        divs[i].style.color = 'red';
        divs[i].innerHTML = "呵呵";
    }

    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = true;
    }

    // var clss = document.getElementsByClassName("cls");
    // for (let i = 0; i < clss.length; i++) {
    //     alert(clss[i]);
    // }

</script>
</body>