JavaScript 基础第七天（DOM的开始）

一、引言

　　JavaScript的内容分为三个部分，这三个部分分别是ECMAScript、DOM、BOM三个部分组成。所谓ECMAScript就是JavaScript和核心基础语法，DOM是文档对象模型，最后剩下的BOM则是浏览器对象模型。这三个部分相辅相成组成了现在的JavaScript。

二、导入

　　前面几天我们学习就是有关有ECMAScript即基础语法部分，从今天开始我们将开始接触文档对象模型，做好准备。let's Go！

三、重点内容

　　① 什么是DOM：

　　DOM= Document Object Model，文档模型对象，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。（我承认这是百度的）。我的理解是我们为了方便的去控制页面上的元素先把页面封装成一个对象，因为和文档有关所以叫做文档对象。如果这样还不好理解你可暂时把它理解成就是一个有很多枝叶的大树就好了。我们学习DOM就是为了学习一些操作页面元素的API。

　　② 节点：

　　既然我们把它理解成一棵树那么树上就会有很多的枝叶，那么这些枝叶又是什么呢？这些枝叶我们称作为节点，因为数量很多所以又包括元素、属性、文本三部分。可以说在文档上的一切基本都是节点。

　　③ 页面元素的获取：

　　我们想要操作页面元素的API那首先是不是应该获取呢？那获取的方式又有什么呢？

　　　　a.getElementById:

<input type="text" value="默认的文字" id="txt"/>
<input type="button" value="按钮" id="btn"/>
<script>
    // 第一种获取页面元素的方式  getElementById
    var txt =   document.getElementById("txt");
    console.log(txt);
    console.log(txt.value);
    txt.value="这是修改后的文字";

    var btn = document.getElementById("btn");
    console.log(btn);
    console.log(btn.value);

 　　　　b.getElementByTagName:

<input type="text" value="123"/>
<input type="text" value="456"/>
<input type="text" value="789"/>
<input type="text" value="abc"/>
<input type="text" value="mmmm"/>
<input type="text" value="kkk"/>

<script>
    // 获得页面元素的第二种方式  通过标签名

  var inputs =   document.getElementsByTagName("input");
    console.log(inputs);
    for(var i=0;i<inputs.length;i++){
//        console.log(inputs[i].value);
        inputs[i].value = "aaaaa";
    }
</script>

　　　　在这里需要注意的是通过getElementByTagName获得的内容是一个数组，即使只有一个元素也会是用数组表示。

　　　　c.getElementByClassName:

<div class="dv"></div>
<p class="dv"></p>
<div class="dv"></div>
<p class="dv"></p>
<span class="dv"></span>
<script>
    // 第三种获取页面元素的方式
    var eles = document.getElementsByClassName("dv"); //获得的也是一组数据
    console.log(eles);

　　　　这个方式不推荐使用因为在兼容上会有一定的问题。

　　④ 事件：

　　　　我们在获取了页面的元素后就需要对元素进行一定的操作了，我们通过给指定元素设置指定方式的方法来进行一定的操作。那么什么事件呢？事件就是文档或者浏览器窗口发生的一些特定的交互瞬间。 它分为两个部分触发和响应。

　　⑤ 事件的三要素：

　　　　a.事件源

　　　　b.事件名称

　　　　c.事件处理程序

　　⑥ 注册事件：

　　　　在指定方法前我们就需要注册事件，注册事件又分为以下的三种：

　　　　　　a.行内式：直接在对应的标签上注册事件。

<a href="images/2.jpg" id="a2" onclick="turn2();return false;"><img src="images/2-small.jpg" alt=""/></a>

 　　　　　  b.内嵌式：利用匿名函数的方式

<a href="images/1.jpg" id="a1" ><img src="images/1-small.jpg" alt=""/></a>
<a href="images/2.jpg" id="a2" ><img src="images/2-small.jpg" alt=""/></a>
<br/>
<img src="images/placeholder.png" alt="" width="600" id="img"/>
<script>
    var img = document.getElementById("img");
    var a1 = document.getElementById("a1");
    var a2 = document.getElementById("a2");
    a1.onclick = function(){
        img.src = this.href;
        return false;
    }
    a2.onclick = function(){
        img.src = this.href;
        return false;
    }

　　　　　　　需要注意的是在这里还有一种方式是给时间设置监听者，但这里我们先不做介绍。

四、总结

　　　　今天的内容就介绍这么多，主要的理解方面还是放在DOM的认识以及使用上。