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

1、引言

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

 

2、导入

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

 

3、重点内容

　　① 什么是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;
    }

 

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

4、总结

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