这是我参与更文挑战的第10天，活动详情查看：更文挑战

DOM对象简介

什么是DOM？

DOM(Document Object Model文档对象模型)是一套规范文档内容的通用型标准。

DOM对于JS来说是一种可以操作HTML文档的一种重要手段。利用DOM可以完成对HTML文档内所有元素的获取、访问、标``签属性和样式的设定等操作。

DOM HTML节点树

DOM HTML指的是DOM中为操作HTML文档提供的属性和方法，其中文档表示HTML文件，文档中的标签称为元素，文档中的``所有内容称为节点（可以看出节点包括元素）。一个HTML文件可以看做是所有元素组成的一个节点树，各元素节点``之间有级别的划分。

节点可分为：标签节点（也就是元素），文本节点，属性节点，注释节点。
节点之间有如下关系：
1. 根节点：<html>标签是整个文档的根节点，有且只有一个。
2. 子节点：指的是某个节点的下层节点。比如：<html>下的<head>节点。
3. 父节点：指的是某个节点的上层节点。
4. 兄弟节点：两个节点属于同一个级别。比如：<head>和<body>节点

常见的节点类型

ELEMENT_NODE     元素节点   
ATTRIBUTE_NODE   属性节点
TEXT_NODE        文本节点
COMMENT_NODE     注释节点
DOCUMENT_NODE    文档节点

给一个具体例子看如何使用，如下：

    <div id = "test"></div>
    <script>
        var test = document.getElementById('test');
        console.log(test.nodeType === Node.ELEMENT_NODE); //结果为ture
        console.log(document.nodeType === Node.DOCUMENT_NODE); //结果为ture
    </script>

HTML元素操作

获取操作的元素

利用doucument对象的方法

1. document.getElementById()        返回对拥有指定Id的第一个对象的引用
2. document.getElemensByName()      返回带有指定名称的对象集合
3. document.getElementsByTagName()   返回带有指定标签名的对象集合
4. document.getElementsClassName()   返回带有指定类名的对象集合（不支持IE6~8）

来看具体例子
<div id = "box">box</div>
    <div class = "bar">bar</div>
    <div name = "main">main</div>
    <script>
        //获取指定id的第一个对象的引用
        console.log(document.getElementById('box'));
        //获取所有指定名字的对象集合
        console.log(document.getElementsByName('main'));
        //获取所有指定标签名的对象集合
        console.log(document.getElementsByTagName('div'));
        //获取所有指定类名的对象集合
        console.log(document.getElementsByClassName('bar'));
    </script>

可以看出document.getElementById()方法返回的是一个对象，而其他三个方法返回的对象集合，若要获取它们其中的某个对象可以通过下标的方式获取。（下标默认是0）。

var box = document.getElementById('box');
        var divs = document.getElementsByTagName('div');
        console.log(box === divs[0]);

可以看到结果为true，这也验证了document.getElementById()的作用。

JavaScript——DOM对象详解1