zoukankan html css js c++ java

Web前端教程3-JavaScript教程

1. JavaScript介绍
- 1.1. JS嵌入页面的方式
2. JS基本语法
3. JS函数
4. 条件循环
5.JS中的数组
6. JS的字符串
- 6.1. 字符串的处理方法
7. 定时器
8. 变量作用域
9. 封闭函数
10. 闭包
- 10.1. 闭包的作用
11. 内置对象
12. 面向对象
13. 垃圾回收
14.DOM
15. DOM事件
16. 应用：轮播图

1. JavaScript介绍

前端三大块

HTML：页面结构
CSS: 页面表现，元素大小，颜色，位置，隐藏或者显示，部分动画效果
JavaScript：页面行为，部分动画效果，页面和用户的交互(一般不用JS，而是用JQuery)

其他插件：

Ajax：读取数据，无需刷新

1.1. JS嵌入页面的方式

<script type="text/javascript" src="../js/setting.js"></script>

2. JS基本语法

2.1. 变量类型

JS是一种弱类型语言，它的变量类型由它的值来决定

5种基本数据类型：number, strign ,boolean, undefined, null
1中复合类型： object

定义变量如下：

var a = 123;
var d;  //这个是undefined

2.2. 获取元素方法

方法1：（不推荐）

/* title是属性 */
/* 问题是：这个语句是按照上下顺序执行的 */
document.getElementById('div1').title="我看到了！";

<div di="div1" class='div1' title='这是div元素哦'>这是一个div元素</div>

方法2：

/* 当整个文档加载完之后，再执行这个语句 */
window.onload = function(){
  document.getElementById('div1').title="我看到了！";
}

2.3. 操作元素属性

可以参考任何标签的属性，包括linkdeng

操作方法主要分为两种：

.的操作
[]操作

属性的写法

htm属性和js属性要一直
class属性写成className
style属性里面的属性，有横杠的改成驼峰式font-size改成oA.style.fontSize

操作方法1的写法

<script type="text/javascript">
  window.onload = function(){
    /* 写属性 */
    document.getElementById('div1').href="www.baidu.com";
    /* 没有title属性会自动添加 */
    var oA = document.getElementById('div1');
    oA.title="666";

    /* 读属性 */
    alert(oA.id);

  }
</script>
.....
<div id="div1">这是一个div元素</div>

操作方法2的写法

<script type="text/javascript">
window.onload = function(){

  var oA = document.getElementById('div1');

  var attr ='color';
  /* 三种方法完全一致 */
  oA.style.color='red';
  oA.style[attr]='red';
  oA['style'][attr]='red';
}
</script>
.....
<div id="div1">这是一个div元素</div>

2.4. innerHTML的使用

<script type="text/javascript">
window.onload = function(){

  var oA = document.getElementById('div1');

  /* 用处1：可以读取这个标签包裹的元素 */
  /* 输出：这是一个div元素 */
  alert(oA.innerHTML)

  /* 用处2：可以塞文字 */
  oA.innerHTML = "666";
}
</script>
.....
<div id="div1">这是一个div元素</div>

3. JS函数

3.1. 函数的定义

<script type="text/javascript">
  // 定义函数
  function func_name(){
    Operations;
  }
  // 调用函数1:直接调用
  // 调用函数2：在控件中调用
  func_name();
</script>
...
<input type="button", name="", onclick="func_name()">

技巧：统一js代码再同一块中:实现JS和HTML分离

<script type="text/javascript">
window.onload = function(){
  var oBtn01 = document.getElementById('btn01');
  var oBtn02 = document.getElementById('btn02');

  /* 注意不要写括号 */
  oBtn01.skin01;
}

function skin01(){
  var oLink = document.getElementById('link1')
  oLink.href = '1.css'
}
</script>
...
<input type="button", name="", value='皮肤01' id="btn01">
<input type="button", name="", value='皮肤02' id='btn02'>

3.2. 变量和函数预解析

JS解析过长分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将Function定义的函数提前，并且将var定义的变量声明提前(赋值不提前)，将它复制为underfined

方便JS的读写

<script type="text/javascript">
  // 变量的预解析
  alert(a);  //a的声明提前，因为没有赋值所以弹出undefined，a的值未定义

  alert(c);  //会报错，c没有声明

  var a = 10;
  // 函数的预解析
  my_akert();  // 函数的预解析，这个弹出hello

  function my_akert(){
    alert('hello')!
  }
</script>

3.3. 匿名函数

没有函数名的函数

<script type="text/javascript">
  window.onload = function (){
    var oDiv = document.getElementById('div1');

    oDiv.onclick = function (){
    alert('hello');
    }
  }
</script>

3.4.函数的参数

传入多个参数

<script type="text/javascript">
  window.onload = function (){

    var oDiv = document.getElementById('div1');

    function changestyle(styl,val){
      oDiv.style[styl] = val;
    }

    changestyle('color', gold);
    changestyle('backgound', red);
    changestyle('width', 300px);
  }
</script>
.....
<div id="div1">这是一个div元素</div>

返回值

实现两个输入框，值进行相加的操作

<script type="text/javascript">
window.onload = function (){

  var oInput01 = document.getElementById('input01');
  var oInput02 = document.getElementById('input02');
  var oBtn = document.getElementById('btn');


  oBtn.onclick = function (){
    var val01 = oInput01.value;
    var val02 = oInput02.value;
    var rs = add(val01,val02);
    alert(rs)
  }

  function add(a,b){
    var c = parseInt(a) + parseInt(b)
    return c;
  }

}
</script>
.....
<input type="text" name="" value="" id="input01">
<input type="text" name="" value="" id="input02">
<input type="button" name="" value="相加" id="btn">

<input type="text" id="input01">
<input type="text" id="input02">
<input type="button" value="相加" id='btn'>

return关键字

返回结果
结束运行，return后面的语句都不会执行
阻止默认行为

4. 条件循环

运算符

算术运算符： +，-，*，/， %
条件运算符： ==, >=,<=, !=, &&(and), ||(or), |(not)

if-else

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .box{
         300px;
        height: 300px;
        backgound:gold;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var a1 = document.getElementById('box');
        var btn = document.getElementById('btn');
        var a = 100;

        // 单条件语句
        btn.onclick = function(){
          if (a1.style.display == "none"){
            a1.style.display == "block";
          }
          else{
            a1.style.display == "none";
          }
        }

        // 多条件语句--建议用switch-case写
        if (a>50){
          a = 50;
        } else if (a>30){
          a=30;
        } else {
          a=0;
        }

      }
    </script>
  </head>
  <body>
    <div id="div1">这是一个div元素</div>
    <input type="button" name="" value="相加" id="btn">
    <div class="box" id="box"></div>
  </body>
</html>

switch-case

var a ==6;
switch(a){
  case 1:
    alert('1');
    break;
  case 2:
    alert('2');
    break;
  default:
    alert('0000');
    break;
}

for,while

for(var i=0;i<len;i++){
  operations;
}

5.JS中的数组

5.1. 创建数组的方式

/* 定义方法1: 面向对象法 */
var aRr01 = new Array(1,2,3,4,'abc');
/* 定义方法2:建议使用  */
var aRr02 = [1,2,3,4,'abc'];

/* 获取数组长度 */
var alen = aRr02.length;
/* 也可以设置长度 */
aRr02.length = 10；

/* 获取某个元素，从0开始的角标 */
var aval = aRr02[2];

/* 定义多维数组 */
var aRr03 = [[1,2,3],[4,5,6],['a','b','c']];

var aval02 = aRr03[1][2];

5.2. 数组方法

var aRr01 = [1,2,3,4];

// 数组连接字符串
var sTr01 = aRr01.join('-'); //输出1-2-3-4
var sTr02 = aRr01.join('');//输出1234

aRr01.push(5); //从尾部增加了一个成员：1,2,3,4,5
aRr01.pop(); //从尾部删除了一个成员 1,2,3,4

aRr01.unshift(0);  //从头部增加了一个成员
aRr01.shift();  //从头部删除了一个成员

aRr01.reverse(); // 将元素倒装，4,3,2,1

aRr01.indexOf(2); // 只返回元素2第一次出现的index值

aRr01.splice(2,1,7,8,9); // 从第2个元素开始，删除1个元素，然后在此位置增加7,8,9

5.3. 遍历数组

for循环
foreach方法

window.onload = function (){

  for(var i=0;i<aLi.length;i++){
    aLi[i].style.backgound='gold';
  }

  var arr = [5,7,9];
  // 函数由我们创建，不由我们调用，数组有几个元素，就会执行几次
  // 每次执行时，以实参形式传递进来
  // 浏览器在回调函数中传递三个参数
  //    1. value--当前正在遍历的元素： 5,7,9
  //    2. index--当前正在遍历的元素索引： 0,1,2
  //    3. arr ---当前正在遍历的数组
  arr.foreach(function(value, index, arr){
        console.log("value=" + value + ", index = " + index + ", array = " + arr);
    });
}

5.4. 获取元素的第二种方法

通过document.getElementByTagName获取的是一个选择集，不是数组，但是可以通过下标方式操作选择集中的dom元素

window.onload = function (){

  /* 选择特定的li元素 */
  var oList = document.getElementById('list01');
  /* aLi是一个选择集，而不是数组，获取文档中所有的li元素 */
  var aLi = oList.getElementByTagName('li');

  for(var i=0;i<aLi.length;i++){
    aLi[i].style.backgound='gold';
  }

}

<ul id='list01'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul id='list02'>
  <li>5</li>
  <li>6</li>
</ul>

5.4. 数组去重

var aList = [1,2,3,3,4,5,2,3,1,5,4,3,2,2,1];

var aList2=[];

for(vari=0;i<aList.length;i++){
  if(aList.indexOf(aList[i]==i)){
    aList2.push(aList[i]);
  }
}

5.6. 实例: 计算器

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>测试</title>
    <script type="text/javascript">
      window.onload = function(){
        var a1 = document.getElementById('input01');
        var a2 = document.getElementById('input02');
        var op = document.getElementById('fuhao');
        var btn = document.getElementById('btn');

        btn.onclick = function(){
          var v1 = a1.value;
          var v2 = a2.value;
          var fuhao = op.value;

          // 判断输入框是否为空
          if (v1 == '' || v2 == ''){
            alert('不能为空');
            return;
          }
          // 判断输入为数字
          if(isNaN(v1) || isNaN(v2)){
            alert('请输入数字');
            return;
          }

          switch(fuhao){
            case '0':
              alert(parseFloat(v1) + parseFloat(v2));
              break;
            case '1':
              alert(parseFloat(v1) - parseFloat(v2));
              break;
            case '2':
              alert(parseFloat(v1) * parseFloat(v2));
              break;
            case '3':
              alert(parseFloat(v1) / parseFloat(v2));
              break;
          }

        }

      }

    </script>
  </head>
  <body>
    <h1>计算器</h1>
    <input type="text" name="" value="" id="input01">
    <select class="" name="" id="fuhao">
      <option value="0">+</option>
      <option value="1">-</option>
      <option value="2">*</option>
      <option value="3">/</option>
    </select>
    <input type="text" name="" value="" id="input02">
    <input type="button" name="" value="计算" id="btn">
  </body>
</html>

6. JS的字符串

JS的组成

ECMAscript javascript的语法（变量，函数，循环语句的语法）
DOM文档对象模型，操纵html和css
BOM浏览器对象模型，操作浏览器的方法

6.1. 字符串的处理方法

字符串合并+
parseInt()将数字字符串转化为整数
parseFloat()将数字字符串转化为小数
split('')把一个字符串分割成字符串组成的数组
charAt(index)获取字符串中的某个字符
indexOf(value)查找字符串是否含有某字符
substring(start,end)截取字符串用法
str.split('').reverse().join('');字符串反转
toUpperCase()字符串转大写
toLowerCase()字符串转小写

7. 定时器

属于BOM，浏览器的用处

定时器的作用

制作动画
异步操作
函数缓冲和节流

用处1：异步操作

/* 定时器：
setTimeout      只执行一次定时器
clearTimeout    关闭只执行一次的定时器
setInterval     反复执行的定时器
clearInterval   关闭反复执行的定时器 */


/* 等1000毫秒才弹出来 */
setTimeout(myalert, 1000);

function myalert(){
  alert('Hello');
}

同时我们可以自定义弹框

<style type="text/css">

  .pop_con{
    display: none;
  }
  .pop{
    400px;
    height: 300px;
    background-color: #fff;
    border: 1px solid #000;
    position: fixed;
    left: 50%;
    top:50%;
    margin-left: -200px;
    margin-top: -150px;
    /* z-index用于设置成层级 */
    z-index=9999;
  }

  .mask{
    position: fixed;
     100%;
    height: 100%;
    background-color: #fff;
    left: 0;
    top: 0;
    /* 设置透明 */
    opacity: 0.3;
    filter:alpha(opacity=30);
    z-index=9990;
  }
</style>


<div class="pop_con" id="pop">
  <div class="pop">
    <h3>提示信息</h3>
    <a href="#" id="shutoff">关闭</a>
  </div>

  <div class="mask"></div>
</div>

window.onload = function (){
  var oPop = document.getElementById('pop');
  var oShut = document.getElementById('shutoff');

  setTimeout(showpop,40000);

  function showpop(){
    oPop.style.display:block;
  }

  oShut.onclick = function(){
    oPop.style.display = 'none';
  }
}

关闭定时器

// 执行一次的定时器
var timer = setTimeout(function(){
  alert('hello');
},4000);

// 刚执行就关闭
clearTimeout(timer);

var timer2 = setInterval(function(){
  alert('hello');
},2000);

clearInterval(timer2);

7.1. 动画

<style type="text/css">
  .box{
    100px;
    height:100px;
    background-color: gold;
    position: fixed;
    left: 20px;
    top: 20px;
  }
</style>

<script type="text/javascript">
  window.onload = function(){
    var oBox = document.getElementById('box');

    var left = 20;

    var timer = setInterval(function(){
      left++;
      oBox.style.left = left + 'px';

      if(left>700){
        clearInterval(timer);
      }
    },30);
  }
</script>


<div class="box" id="box"></div>

7.2. 制作时钟

    <script type="text/javascript">
      window.onload = function(){
        var oDiv1 = document.getElementById('div1');

        function timego()){
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth()+1;
        var date = now.getDate();
        var week = now.getDay();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();

        oDiv1.innerHTML = '当前时间是' + year + '年' + month + '月' + date + '日' +
        toweek(week) + hour + ':' + minute + ':'+ second;

      }

      timego();

      setInterval(timego,1000);


      }

      function toweek(num){
        switch(num){
          case 0:
              return '星期天';
              break;
          case 1:
              return '星期一';
              break;
          case 2:
              return '星期二';
              break;
          case 3:
              return '星期三';
              break;
          case 4:
              return '星期四';
              break;
          case 5:
              return '星期五';
              break;
          case 6:
              return '星期六';
              break;
        }
      }

    </script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

结果是

当前时间是2019年3月12日星期二11:53:34

7.3. 制作倒计时

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>测试</title>
    <script type="text/javascript">
      window.onload = function(){
        var oDiv = document.getElementById('div1');

        function timeleft(){
        var now = new Date();
        var future = new Date(2019,10,30,24,0,0); // 实体从服务器获取
        var left = parseInt((future-now)/1000); //转为秒
        var day = parseInt(left / 86400);
        var hour = parseInt((left%86400)/3600);
        var mintue = parseInt(((left%86400)%3600)/60);
        var second = left%60;

        if (left<=0){
          window.location.href = "http://www.baidu.com";
        }

        oDiv.innerHTML = '距离2019年11月30日晚上24点还有--' + day + '天' + hour +
        '时' + mintue + '分' + second + '秒';

      }

      timeleft();
      setInterval(timeleft,1000);

      }

    </script>
  </head>
  <body>
    <div class="" id="div1">

    </div>
  </body>
</html>

8. 变量作用域

全局变量-函数外部顶一顶额变量，函数内部外部都可以访问，它的值可以共享，可以随意改它的值
局部变量-函数内部定义的变量，函数内部可以访问，外部无法访问，内部访问变量时，先在内部查找是否有这个变量，有的话就用内部的，没有的话就去外部找

9. 封闭函数

函数变量化

这种方式只能在函数定义后面调用

var myalert = funtion(){
  alert('hello');
}

myalert();

/*
封闭函数的定义 (function(){...})();
1. 省去函数名
2. 局部变量不会影响其他变量（相同名字） */

var str = "abc";

(function (){
  var str = '欢迎访问我的主页';

  var myfunc = function(){
    ...;
  }

  myfunc;

  alert(str);
})();

10. 闭包

函数嵌套，函数里面再定义函数，内部函数可以引用外部函数的参数和变量，变量存在闭包里面不会被回收

<script type="text/javascript">
  function aa(b){
    var a=12;
    function bb(){
      alert(a);
      alert(b);
    }

    return bb;

  }

  var cc = aa(24);  // cc=bb

  cc();

</script>

同时闭包也可以改成封闭函数

<script type="text/javascript">

var cc = (function(b){
            var a=12;
            function bb(){
              alert(a);
              alert(b);
              }

              return bb;
            })(24);

</script>

10.1. 闭包的作用

可以在循环中存索引值

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>测试</title>
    <script type="text/javascript">
      window.onload = function(){
        var aLi = document.getElementsByTagName('li');

        for(var i=0;i<aLi.length;i++){
          // 一般循环无法保存i，此时的i是4
          // 通过闭包存i
          (function(i){
            aLi[i].onclick = function(){

            alert(i);
          }
          })(i);
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </body>
</html>

私有变量计数器，外部无法访问，避免全局变量的污染

11. 内置对象

对象	方法	说明
document	document.referrer	获取上一个跳转页面的地址
locaiton	window.location.href window.location.search window.location.hash	获取或者重定url地址获取地址参数部分获取页面锚点或者哈希值
Math	Math.random Math.floor Math.ceil	获取0-1的随机数向下取整向上取整

<script type="text/javascript">

  var data = window.location.search;
  // 在网址输入“..../？a=123” 的时候输出 “？a=123”
  alert(data);

  var hash = window.location.hash;
  // 在网址输入“....#=123” 的时候输出 “#=123”
  alert(hash);

</script>

12. 面向对象

12.1. JS面向对象

将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法， js对象类似字典

但是JS没有类，类是通过函数实现的

内建对象
宿主对象
自定义对象

12.2. 自定义对象：创建对象的方法

单体：

<script type="text/javascript">

  var Tom = {
    name: 'tom',
    age: 18,
    showname: function(){
      alert('my name is ' + this.name);
    },
    showage: function(){
      alert('my age is ' + this.age);
    }
  }

  alert(Tom.name);
  Tom.showname();

</script>

工厂模式（少用）

通过一个函数创建对象

<script type="text/javascript">

  function Person(name, age){

    var o = new Object(); // 创建空对象
    o.name = name;
    o.age = age;
    o.showname = function(){
      alert('my name is ' + this.name);
    };
    o.showage = function(){
      alert('my age is ' + this.age);
    }

    return o;

  }

  var tom = Person('tom',18);
  tom.showname();

</script>

使用工厂方式创建的对象，使用的都是object，导致无法区分多种不同类型的对象

构造函数: 类型python类

构造函数就是用一般函数创建的，区别是加了new

构造函数的执行流程：

一旦调用构造函数，马上创建一个新的对象
将新建的对象设置为函数中的this
逐行执行函数的代码
将新建的对象作为返回值返回

使用同一个构造函数的对象，称为同一类对象，也称为该类的实例

<script type="text/javascript">

  function Person(name, age){

    this.name = name; // this为新建的对象，tom, jack，向新建对象添加属性
    this.age = age;

    this.showname = function(){  // 为对象添加方法
      alert('my name is ' + this.name);
    };
    this.showage = function(){
      alert('my age is ' + this.age);
    }

  }

  var tom = new Person('tom',18);
  var jack = new Person('jack',20);
  tom.showname();

  console.log(tom instanceof Person); // true
  console.log(tom instanceof Object); //
  alert(tom.showname == jack.showname); // false, 浪费资源

</script>

问题：每一个对象的方法都有一个新的方法，浪费资源

原型模式：比构造函数更高效

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype, 这个属性对应原型对象

当函数以普通函数调用时，prototype没用
当函数以构造函数调用时，它所创建的对象都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__访问
当调用属性和方法时，首先在本身寻找，有就用，没有就去prototype原型寻找，没有就去原型对象的原型去找，直到找到Object原型

<script type="text/javascript">

  function Person(name, age){

    this.name = name;
    this.age = age;
  }

  // prototype上绑定的方法可以被所有person对象公用
  // prototype为原型对象，所有同一个类的实例都可以访问到这个原型对象，
  // 可以将共有的内容设置到这个原型对象中
  Person.prototype.showname = function(){
    alert('my name is ' + this.name);
  }

  Person.prototype.showage = function(){
    alert('my age is ' + this.age);
  }

  // toString是在打印对象的时候自动的内容，我们可以重写这个方法让它打印更详细的信息
  // console.log(tom);   person[name=“tom”, age=20]
  Person.prototype.toString = function(){
    return "person[name = " + this.name + ", age=" + this.age + "]";
  }

  var tom = new Person('tom',18);
  var jack = new Person('jack',20);

  console.log(tom.__proto__ == Person.prototype);  // true
  console.log(tom.hasOwnProperty("name")); // false，只有本身有属性才会true，这个方法在原型里
  alert(tom.showname == jack.showname); // true， 更加高效

</script>

继承

<script type="text/javascript">

  // 定义父类
  function Fclass(name, age){

    this.name = name;
    this.age = age;
  }

  Fclass.prototype.showname = function(){
    alert('my name is ' + this.name);
  }

  Fclass.prototype.showage = function(){
    alert('my age is ' + this.age);
  }

  // 定义子类，继承父类
  function Sclass(name, age, job){
    // 继承属性：call或者apply
    // call：改变当前函数执行的this
    // apply和call的用法一样，只是语法不同： Fclass.apply(this, [name, age]);
    Fclass.call(this, name, age);
    this.job = job;
  }

  // 继承方法： prototype
  Sclass.prototype = new Fclass();

  Sclass.showjob = function(){
    alert('my job is ' + this.job);
  }

  var tom = new Sclass('tom',20,'engineer');
  tom.showage();

</script>

12.3. 自定义对象：this的用法

this就是object.window，指向的是一个对象，称为函数执行的上下文对象
根据函数调用方式的不同，this会指向不同的对象
- 以函数形式调用时，this为window
- 以方法形式调用时，this为调用方法的对象，比如

    <script type="text/javascript">

      var name ="全局";

      function fun(){
        // console.log(this.name);  // 这种方式永远是"全局"
        console.log(this.name);    // 随着调用的对象不同而变化
      }

      var obj = {
        name: "sun",
        sayName: fun
      };

     var obj2 = {
        name: "kkk",
        sayName: fun
      };

      console.log(obj.sayName == fun); // true，同一个函数
      fun();          // 以函数调用的时候，this指向对象（上下文），为Object.window
      obj.sayName();  // 以方法调用的时候，this为Object.object（“sun”）
      obj2.sayName();  // 以方法调用的时候，this为Object.object（“kkk”）
    </script>

结果是

true
全局
sun
kkk

12.4. 宿主对象：Array：见5

13. 垃圾回收

就像人生活的时间长了，程序运行过程中也会产生垃圾，垃圾过多后，会导致程序运行速度过慢，需要垃圾回收机制
在JS中有自动垃圾回收机制，不需要也不能进行垃圾回收的操作

手动回收的方法：设置为null

var a = new Obect();

a = null;

14.DOM

14.1. DOM简介

DOM： Document Object Model文档对象模型
- 文档：一个HTML网页文档
- 对象：网页的每个部分都转为对象，比如body, head, h1..都转为对象（就可以通过面向对象对他进行操作）
- 模型：用来表示对象之间的关系，方便获取对象

14.2. 节点

节点是构成网页的基本节点，比如body, head, h1..
节点的类型不同，属性和方法也不同
- 文档节点：整个HTML文档
- 元素节点： HTML的HTML标签
- 属性节点：元素的属性
- 文本节点： HTML标签中的文本内容
节点的属性

节点	节点名称	节点类型	节点值
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

浏览器已经为我们提供了文档节点对象，这个对象时window属性，可以在网页中直接使用，文档节点（document）代表的是整个网页

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>测试</title>
    <script type="text/javascript">
      // 获取button对象
      var btn = document.getElementById("btn");
      // 修改button的属性
      btn.innerHTML = "你好啊";

    </script>
  </head>
  <body>
    <button id='btn'>我是按钮</button>
  </body>
</html>

14.3. 事件

事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间
JS和HTML之间的交互式通过事件实现的
对于WEB应用来说，有下面这些代表性的事件：点击，移动，按键等

<script type="text/javascript">
  window.onload = function(){
      var btn = document.getElementById("btn");
      console.log(btn);
      btn.onclick = function(){
        alert('hello');
      }
  }
</script>
....
<input type="button" name="" value="我是按钮" id="btn">

14.4. 文档加载

也就是说需要使用window.onload = function(){}

14.5. DOM查询

获取元素节点

通过document对象调用

方法	说明
getElmentById()	通过唯一id获取元素节点对象，返回对象
getElementsByTagName()	通过标签名获取一组元素节点对象，返回数组
getElementByName()	通过name获取一组节点对象，返回数组