本篇主要介绍dom内容、dom 节点、节点属性以及获取html元素的方法。
目录 1. 介绍 dom：介绍dom，以及对dom分类和功能的说明。
2. dom 节点：介绍dom节点分类和节点层次。
3. html dom 节点属性：介绍html dom节点属性，如：innerhtml、innertext、nodename、nodevalue以及nodetype等。
4. 获取 html 元素节点方法：介绍文档节点(document)、元素节点可以通过getelementbyid、getelementsbyname、getelementsbyclassname以及getelementsbytagname方法获取元素节点。
1. 介绍 1.1 dom 解释 说明：dom全称 document object model，即文档对象模型。将文档抽象成一个树型结构，文档中的标签、标签属性或标签内容可以表示为树上的结点。
1.2 dom 分类 按照操作对象的不同，可分为core dom、xml dom 和 html dom。
core dom：核心dom，针对任何结构化文档的标准模型。
xml dom：用于xml文档的标准模型，对xml元素进行操作。
html dom： 用于html文档的标准模型，对html元素进行操作。
1.3 dom 功能 ① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素
2. dom 节点 文档中的所有内容都可表示为一个节点(node)，如：html里整个文档、每个标签、每个标签的属性和文本都可作为一个节点。
2.1 节点分类 ① 文档节点(document)：整个xml、html文档
② 元素节点(element)：每个xml、html元素
③ 属性节点(attr)：每个xml、html元素的属性
④ 文本节点(text)：每个xml、html元素内的文本
⑤ 注释节点(comment)：每个注释
注意：这里的document节点为总称，具体可分为xmldocument和htmldocument，同理element也可分为xmlelement和htmlelement。
2.2 html dom 节点层次 节点彼此都有等级关系：父节点、兄弟节点、子节点等等。
2.2.1 示例： html文档转换为html dom节点树
2.2.2 示例图介绍： 1)
元素和元素的父节点为元素。 2)
元素和元素为兄弟节点。 3)
元素为元素的子节点。  
3. html dom 节点属性 介绍html dom节点属性，如：innerhtml、innertext、nodename、nodevalue以及nodetype等。
3.1 innerhtml：以html代码格式获取或设置节点的内容 说明：以html格式赋值给innerhtml属性时，会以html的形式呈现。比如：node.innerhtml= 将会显示一个按钮。
示例：
document.getelementbyid('div').innerhtml=; // 设置div元素的innerhtml为一个按钮document.getelementbyid('div').innerhtml; // => ：以html格式返回节点的内容
3.2 innertext：获取或设置节点的文本内容 说明：以文本字符串的形式获取或设置节点的内容。
示例1：
赋值html格式内容 将会以字符串显示。
示例2：
获取内容时，只会获取文本内容。
document.getelementbyid('div').innertext; // => 文本1 文本2
3.3 nodename：获取节点名称，只读属性 说明：
节点类型 nodename
文档节点(document) 返回 #document
元素节点(element) 返回 大写元素名称
属性节点(attr) 返回 属性名称
文本节点(text) 返回 #text
示例：
console.log( document.nodename ); // => #document：文档节点console.log( document.body.nodename ); // => body：元素节点console.log( document.getelementbyid('div').nodename ); // => div：元素节点console.log( document.getelementbyid('div').attributes.style.nodename ); // => style：属性节点
3.4 nodevalue：获取或设置节点的值 说明：文档节点、元素节点此属性返回null，并且为只读。
节点类型 nodevalue
文档节点(document) 只读，返回null
元素节点(element) 只读，返回null
属性节点(attr) 获取或设置属性的值
文本节点(text) 获取或设置文本的值
示例：
console.log( document.nodevalue ); // => null：文档节点console.log( document.body.nodevalue ); // => null：元素节点console.log( document.getelementbyid('div').nodevalue ); // => null：元素节点console.log( document.getelementbyid('div').attributes.style.nodevalue ); // => width:200px;height:100px;border:1px solid black;：style属性的值document.getelementbyid('div').attributes.style.nodevalue = ' width:200px;height:200px'; // 设置style属性的值
3.5 nodetype：返回节点类型，只读属性 说明：
节点类型 nodetype
文档节点(document) 9
元素节点(element) 1
属性节点(attr) 2
文本节点(text) 3
示例：
console.log( document.nodetype ); // => 9：文档节点console.log( document.body.nodetype ); // => 1：元素节点console.log( document.getelementbyid('div').nodetype ); // => 1：元素节点console.log( document.getelementbyid('div').attributes.style.nodetype ); // => 2：属性节点
4. 获取 html 元素节点方法 文档节点(document)、元素节点可以通过getelementbyid、getelementsbyname、getelementsbyclassname以及getelementsbytagname方法获取元素节点。
4.1 getelementbyid(id) ：获取指定id的元素 参数：
①id {string} ：元素id。
返回值：
{htmlelement} 元素节点对象。若没有找到，返回null。
注意：
① html元素id是区分大小写的。
② 若没有找到指定id的元素，返回null。
③ 若一个父节点下面有多个相同id元素时，默认选取第一个(而不是层级最高的)。
示例：
document.getelementbyid('div'); // => 获取id为div的元素
4.2 getelementsbyname(name) ：返回一个包含指定name名称的的元素数组 参数：
① name {string} ：name名称。
返回值：
{array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。
示例：
document.getelementsbyname('btn'); // 返回一个name为btn的元素数组
4.3 getelementsbyclassname(classname) ：返回一个包含指定class名称的的元素数组 参数：
① classname {string} ：class名称。
返回值：
{array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。
示例：
document.getelementsbyclassname('show'); // 返回一个class包含show的元素数组
4.4 getelementsbytagname(elementname) ：返回一个指定标签名称的的元素数组 参数：
① elementname {string} ：标签名称。如：div、a等等
返回值：
{array} 符合条件的元素数组。若没有找到符合条件的，返回空数组。
示例：
document.getelementsbytagname('div'); // 返回一个标签为div的元素数组
==================================系列文章==========================================
本篇文章：4.1 html dom 介绍
web开发之路系列文章