DOM 即文本对象模型，是 W3C 推荐的处理可拓展标记语言的标准编程接口，通过这些接口可以改变网页的内容，结构，样式
文档：一个页面就是一个文档，DOM 中用 document 表示
元素：页面中所有的标签都是元素，DOM 中用 element 表示
节点：网页中所有内容（标签，属性，文本，注释）都叫节点，DOM 中用 node 表示
DOM 获取元素有很多方法，下面一一说明
一：document.getElementById()
此方法用于返回一个匹配特定的 ID 元素，由于元素的 ID 大部分情况下要求是独一无二的，所以getElementById() 这个方法成为了一个高效查找特定元素的方法，返回的结果是一个元素对象
（由于文档页面要从上往下加载，所以要先有标签元素才能获取，因此 script 放在了标签的下方）
<body>
<p id="p">这是一个P标签</p>
<script>
var ele=document.getElementById('p'); //获取id为p的元素
console.log(ele); // 输出结果为元素对象
console.log(typeof ele); //类型为object对象
</script>
</body>
有一个新方法为 console.dir()，这个方法可以输出对象的所有属性和方法，用法如下
<body>
<p id="p">这是一个P标签</p>
<script>
var ele=document.getElementById('p');
console.dir(ele)
</script>
</body>
二：document.getElementsByTagName()
有些标签内部有很多相同的标签，例如 li 标签，我们利用这个方法可以获取带有指定标签名的对象的集合（以伪数组的形式存储，有长度有索引号，可以根据索引号来单独输出，可以遍历），注意这个方法名为 elements，刚才的方法为 element，如果页面中没有要获取的这个元素，则返回结果为空的伪数组的形式
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ele=document.getElementsByTagName('li');
console.log(ele);
console.log(ele[0]);
</script>
</body>
如果想要依次输出伪数组里的元素对象，可以采用遍历的方式
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ele=document.getElementsByTagName('li');
for(var i=0;i<ele.length;i++)
{
console.log(ele[i]);
}
</script>
</body>
三：element.getElementsByTagName()
上面第二个方法的拓展，用于返回指定父元素下的指定标签名的子元素对象的集合，应注意父元素不可以是伪数组的形式，必须是单个对象
例如一个页面有 ul 标签也有 ol 标签，但是我只需要得到 ul 标签下的 li 标签，就可以用此方法
（注意如果直接输出 ele.getElementsByTagName('li') 就会报错，因为得到的 ele 是一个伪数组，但 ele[0] 得到的就是一个元素对象，因为此代码中只有一个 ul，所以是 ele[0]）
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
<script>
var ele=document.getElementsByTagName('ul');
console.log(ele[0].getElementsByTagName('li'));
</script>
</body>
但是更普遍的做法是给父元素设置 id 属性，使用 getElementById 获取父元素对象，这样得到的直接就是一个对象，不必担心出错
<body>
<ul id="uull">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
<script>
var ele=document.getElementById('uull');
console.log(ele.getElementsByTagName('li'));
</script>
</body>
四：document.getElementsByClassName()
该方法为H5新增的方法，，根据类名返回某些元素对象的集合（以伪数组形式存储）
<body>
<p class="ppp">这是第一个p标签</p>
<p class="ppp">这是第二个p标签</p>
<ul class="ppp">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ele=document.getElementsByClassName('ppp')
console.log(ele);
</script>
</body>
五： document.querySelector( 选择器 )
返回指定选择器的第一个元素对象，注意这里的选择器要带符号，例如 .aaa #aaa
<body>
<p class="ppp">这是第一个p标签</p>
<p class="ppp">这是第二个p标签</p>
<ul id="uull">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ele1=document.querySelector('.ppp')
var ele2=document.querySelector('#uull')
var ele3=document.querySelector('li')
console.log(ele1);
console.log(ele2);
console.log(ele3);
</script>
</body>
六： document.querySelectorAll( 选择器 )
返回指定选择器下的所有元素对象的集合
<body>
<p class="ppp">这是第一个p标签</p>
<p class="ppp">这是第二个p标签</p>
<ul id="uull">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ele1=document.querySelectorAll('.ppp')
var ele2=document.querySelectorAll('li')
console.log(ele1);
console.log(ele2);
</script>
</body>
七：获取特殊元素
我们如何获取 html 元素与 body 元素呢？
获取 body 元素：document.body
获取 html 元素：document.documentElement
<body>
<script>
var ele1=document.body;
var ele2=document.documentElement;
console.log(ele1);
console.log(ele2);
</script>
</body>
