3种DOM方法获取元素的学习

首先理解一下DOM（文档对象模型）。

其中D就是document,文档；O记是object,对象；M就是model，模型。

DOM是一套对文档的内容进行抽象和概念化的方法。

W3C推出的标准化DOM可以让任何一种程序设计语言对任何一种标记语言编写出来的任何一份文档进行操控。

`DOM`是一种 `API`(应用编程接口)。

API就是一组已经得到有关各方共同认可的基本约定。相当于API的例子如摩尔斯码、国际时区、化学元素周期表等。

在今天，虽然有不同的浏览器，基于webkit的safari和chrome，基于Gecko的firefox，甚至是基于trident的IE浏览器都内置了对DOM的支持。

document对象的主要功能主要是操作浏览器窗口内的网页内容上

对象,object，在js里有三种类型。

用户自定义对象，user-defined object（程序员自行创建的对象）
内建对象,native object（内建在js语言里面，如Array、Math、Date）
宿主对象，host object（浏览器提供）

提到DOM就不得不提一下BOM，对比记忆。

window对象对应浏览器窗口本身，是最基础的对象，也是一种宿主对象。window对象的属性和方法就是BOM（浏览器对象模型），也就是说将它称为window object model窗口对象模型也不是不可以的哦，BOM提供window.open和window.blur.....

让我想起来了那种弹窗广告

M，模型，表示某种事物的表现形式。

DOM把一份文档表示为一棵树。
根元素html，下面head和body，head 里面meta,titile,link,等……body里面的就是显示到页面上的，hn系列,p，div，ul > li等

把文档称为节点树，🌲包括：
1.元素节点（标签，如body,head,ul,等）
2.文本节点（网页上展现出来的大多都是文字，大多数都是文本提供，不能独立存在，包含在元素节点里）
3.属性节点（在开始标签内，不能独立存在，包含在元素节点内）

获取元素

1.getElementById

注意：小驼峰式书写（第一个单词的首字母不大写，其他的首字母都要大写）

id就像是我们的身份证号码，可以有黑娃，没有身份证号码的人存在，但是有只能有一个id名，且是唯一的，这个文档内不能有第二个一样id的元素存在。所以通过id名可获得文档内指定的那一个元素。但是文档里的元素取id也不用每个都有，一般在网页中，作为一个入口，一个大的版块最外层的元素取一个id,分区分块，后期写css样式表的时候，方便快速找到指定的元素。

使用：

<body>
    <div class="demo1" id="test1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <p></p>
    <h2></h2>

    <script>
        alert( document.getElementById("test1"));
    </script>
</body>

2.getElementsByTagName

注意：Elements，由于获得所有这个标签名的元素 ,所以elements是复数形式，返回的是一个数组

使用：

<body>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <p>文字</p>

    <script>
        alert(typeof document.getElementsByTagName("div"));
        alert(document.getElementsByTagName("div").length);
    </script>
</body>

返回的值为object ，4。文档中每个元素都是一个对象，得到的是数组，类型还是对象。数组有长度这个属性。及时是只有一个div，返回的也是数组，要使用还是得通过使用数组的方式。获得的就是文档内所有的div元素，可以理解成获得的是一个数组，要是要使用还要通过数组的形式使用指定那一个元素。

类型有字符串，数值，函数，布尔值，对象

输入：在body里输入div#food>ul>li*4按tab键得到：

<div id="food">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

要想得到ul里面有多少个li

var foods = document.getElementById("food");

var items = foods.getElementByTagName("*");

alert(items.length);

3.getElementsByClassName

(较新的浏览器才支持)

返回的也是一个数组