文档对象模型，是w3c组织推荐的处理可扩展标记语言的标准编程接口。利用DOM可以完成对HTML文档内所有元素的获取，访问，标签属性和样式的设置等操作。
DOM中将HTML文档视为树结构，所有被称之为文档树模型，把文档映射成树形结构
文档：一个页面就是一个文档元素：页面中的所有标签都是元素节点：网页中的所有内容，在文档树中都是节点（如元素节点，属性节点，文本节点，注释节点等）DOM会把所有的节点都看作是对象，这些对象拥有自己的属性和方法。在开发中要操作页面上的某个部分（如控制一个div元素的显示或者隐藏，修改div元素的内容）需要先获取到该部分对应的元素，在对其进行操作。
getElementById（）方法由document对象提供的用于查找元素的方法。该方法返回的是拥有指定id 的元素（无就返回null，有多个就返回undefined）。
<body> <div id = "box">你好</div> <script> var Obox = document.getElementById('box'); console.log(Obox); /结果是 ： <div id = "box">你好</div> console.log(typeof Obox); / Object console.dir(Obox); /结果是：div#box </script> </body>console.dir()方法用来在控制台中查看对象的属性和方法。
element是指代单个对象，类似一个占位。 根据标签名获取有两种方式：①通过document对象获取元素和通过element对象获取：
document.getElementsByTagName(‘标签名’)；element.getElementsByTagName(‘标签名’)；这里的element必须是单个元素对象，不能是一个集合。 element是元素对象的统称，通过元素对象可以查找该元素的子元素或后代元素，实现局部查找元素的效果。 document对象是从整个文档中查找元素。 1. 由于相同标签名的元素可能有多个，因此上述方法返回的不是单个元素对象，而是一个集合，且这个集合是一个伪数组。 2. 使用getElementByTagName()方法获取到的集合是动态集合，当页面增加了标签时，这个集合中也会自动增加元素。一般用于获取表单元素，使用document.getElementsByName()方法。name 的值不要求必须是唯一的， 多个元素也可以有同样的名字，如表单中的单选框和复选框。
var fruits = document.getElementsByName('fruits'); fruits[0].checked = true;返回的也是一个集合对象，可以讲元素中的checked属性值设置为true。
HTML中为document对象新增了getElementsByClassName(),querySlelctor和querySelectorAll()。 在使用时需要考虑到浏览器的兼容性问题。
根据类名获取 document .getElementByClassName()方法，用于通过类名来获取某些元素集合。 <body> <span class = "one">英语</span> <span class = "one">语文</span> <span class = "two">数学</span> <span class = "two">物理</span> <script> var Ospan1 = document.getElementByClassName('one'); var Ospan2 = document.getElementByClassName('two'); Ospan1[0].style.fontWeight = 'bold'; Ospan2[1].style.background = 'red'; </script> </body>使用上述方法得到的是同class的集合，可以修改集合中单个的元素样式，而不修改整个class。 2. querySelector 和querySelectotAll() querySelector（）方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法用于返回指定选择器的所有元素对象集合。
var firstBox=document.querySelector('.box');/获取class为box的第一个div var nav = document.queryselector'#nav'); / 获取id为nav的第一个div var li = document.querySelector('li');/获取众多li中的第一个li元素上述代码说明，再利用这两个方法获取操作的元素时，直接书写标签名或CSS选择器名称即可。根据类名获取元素时在类名前面加上‘ .’，根据id获取时加上‘#’。
html元素是指整个html文档中的所有元素。
Te：为按钮绑定单击事件
<body> <button id = 'btn'>单击</button> <script> var btn = document.getElementById('btn'); bt.onclik = function(){ alert('弹出'); } </script> </body>DOM操作可以改变网页内容、结构、样式。
直接元素 . 属性 = 值 来进行操作。
Te:
var ele = documen.querySelector('#box'); ele.style.width = '100px'; ele.style.transform = 'rotate(7deg)';效果相当于在CSS中添加以下样式：
#box{width:100px;transform:roate(7deg)};