1.0 获取元素

3.1根据ID名获取

  1. document.getElementById('id名')//返回的是 一个元素对象（满足条件的第一个元素对象）
  2. 补充：console.dir();//打印的是返回的元素对象 更好的查看里面的属性和方法

3.2 根据标签名获取

  1. document.getElementsByTagName('标签名') //返回的是 带有指定标签名的对象的集合（以伪数组的形式存储的，数组元素是元素对象）
  2. 注意：1、因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
  3.      2、得到的对象是动态的
  4.      3、如果页面中只有一个li 返回的还是伪数组的形式
  5.      4、如果页面中没有这个元素 返回的是空的伪数组的形式

3.2 根据class名获取

  1. document.getElementsByClassName("abc");
  2. // 获取过来的元素对象 是放在一个伪数组里 如果想对元素进行操作 那么必须从数组里边获取出来才可以
  3. // 有一个返回值 返回值就是这个伪数组     
  4. // 通过类名 获取元素对象的时候 ie8及以下 不兼容

3.3通过HTML5新增的方式获取

  1.  1、获取单个的元素对象
  2.  document.querySelector(可以写 标签名、类名、id名、css的选择器)// ie7及以下 不兼容
  3. 例：console.log(document.querySelector("div"));
  4. // 注意：(只获取当前页面满足id名的第一个元素对象)
  6.  2、获取多个的元素对象
  7.  document.querySelectorAll(可以写 标签名、类名、id名、css的选择器) // 有一个返回值 返回值就是这个伪数组
  8.   // 获取过来的元素对象 是放在一个伪数组里 如果想对元素进行操作 那么必须从数组里边获取出来才可以
  9.       console.log(document.querySelectorAll("#box"));
  10.       console.log(document.querySelectorAll("div"));
  11.       console.log(document.querySelectorAll(".abc"));

3.4 特殊元素获取

  1.     1、获取body元素：document.body//返回body元素对象
  2.     2、获取html元素：document.documentElement//返回html元素对象

4.0 事件基础—触发响应机制

4.1事件三要素

  1. 1、事件源：事件被触发的对象 谁(比如按钮)
  2. 2、事件类型:如何触发 什么事件(比如鼠标点击onclick)
  3. 3、事件处理程序:通过一个函数赋值的方式完成
  4. 例子：// 点击一个按钮，弹出对话框
  5.  var btn = document.getElementById("btn");
  6.       btn.onclick = function () {
  7.         alert("哦拉吾游");
  8.       };

4.2 事件的执行步骤

  1. 1、获取事件源
  2. 2、注册事件(绑定事件)
  3. 3、添加事件处理程序(采用函数赋值形式)
  4. 例子：//点击div 控制台输出 我被选中了
  5.       var div = document.querySelector("div");
  6.       div.onclick = function () {
  7.         console.log("我被选中了");
  8.       };

5.0操作元素

5.1 改变元素内容(获取或设置)

  1. element.innerText:从起始位置 到 终止位置的内容，但会去除html标签以及空格和换行
  2. element.innerHTML:从起始位置 到 终止位置的内容，包括html标签以及空格和换行

5.2 案例

  1. 例子：// 当我们点击了按钮，div里面的文字会发生变化
  2.       <button>显示当前系统时间</button>
  3.       <div>某个时间</div>
  4.       <script>
  5.       var btn = document.querySelector("button");//获取btn
  6.       var div = document.querySelector("div");//获取div
  7.       btn.onclick = function () {//绑定点击事件
  8.         div.innerHTML = getDate();
  9.       };
  10.       //获取当前日期
  11.       function getDate() {
  12.         var date = new Date();
  13.         var year = date.getFullYear();
  14.         var month = date.getMonth() + 1;
  15.         var dates = date.getDate();
  16.         var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  17.         var day = date.getDay();
  18.         return (
  19.           "今天是：" + year + "年" + month + "月" + dates + "日 " + arr[day]
  20.         );
  21.       }
  22.       </script>

总结：innerText和innerHTML的区别

  • 获取内容时的区别：
    innerText会去除空格和换行，而innerHTML会保留空格和换行
  • 设置内容时的区别：
    innerText不会识别html，而innerHTML会识别

5.3常见元素的属性操作

1、innerText、innerHTML
2、src、href
3、id、alt、title

  1. 案例1：
  2. //修改元素属性 src
  3.      // 1. 获取元素  2. 注册事件  3.处理程序
  4.       var ldh = document.getElementById("ldh");
  5.       var zxy = document.getElementById("zxy");
  6.       var img = document.querySelector("img");
  7.       zxy.onclick = function () {
  8.         img.src = "images/zxy.jpg";
  9.         img.title = "张学友思密达";
  10.       };
  11.       ldh.onclick = function () {
  12.         img.src = "images/ldh.jpg";
  13.         img.title = "刘德华思密达";
  14.       };
  1. 案例2：
  2. //根据不同时间，页面显示不同图片，同时显示不同的问候语
  3.      // 1. 获取元素
  4.       var img = document.querySelector("img");
  5.       var div = document.querySelector("div");
  6.       // 2.得到当前的小时数
  7.       var date = new Date();
  8.       var h = date.getHours();
  9.       //3.判断小时数改变图片和文字信息
  10.       if (h < 12) {
  11.         img.src = "./images/s.gif";
  12.         div.innerHTML = "亲，上午好，好好写代码";
  13.       } else if (h < 18) {
  14.         img.src = "./images/x.gif";
  15.         div.innerHTML = "亲，下午好，好好写代码";
  16.       } else {
  17.         img.src = "./images/w.gif";
  18.         div.innerHTML = "亲，晚上好，好好写代码";
  19.       }

5.4表单元素的属性操作

  1. DOM可以操作表单元素属性：type、value、checked、selected、disabled
  2. 可以通过value来修改表单里面的文字内容(不能用innerHTML属性，因为这个是普通盒子比如div盒子里的内容)
  3. 如果想要某个表单被禁用 不能再点击 用disabled(比如 想要按钮button禁用)
  1.  btn.disabled=true;
  2.      this.disabled=true;//this指向 事件函数的调用者
  3.  例子1：// 1. 获取元素
  4.       var btn = document.querySelector("button");
  5.       var input = document.querySelector("input");
  6.       // 2. 注册事件 处理程序
  7.       btn.onclick = function () {
  8.         input.value = "被点击了";
  9.         // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
  10.         // btn.disabled = true;
  11.         this.disabled = true;
  12.       };

5.5仿京东显示密码

  • 点击按钮将密码框切换为文本框，并可以查看密码明文
  1. css:
  2.       .box {
  3.         position: relative;
  4.         width: 400px;
  5.         border-bottom: 1px solid #ccc;
  6.         margin: 100px auto;
  7.       }
  8.       .box input {
  9.         width: 370px;
  10.         height: 30px;
  11.         border: 0;
  12.         outline: none;
  13.       }
  14.       .box img {
  15.         position: absolute;
  16.         top: 2px;
  17.         right: 2px;
  18.         width: 24px;
  19.       }
  21. html:
  22.       <div class="box">
  23.       <label for="">
  24.         <img src="./images/close.png" alt="" id="eye" />
  25.       </label>
  26.       <input type="password" id="pwd" />
  27.       </div>
  29. script:
  30.       //1、获取元素
  31.       var eye = document.getElementById("eye");
  32.       var pwd = document.getElementById("pwd");
  33.       //2、注册事件 处理程序
  34.       var flag = 0;
  35.       eye.onclick = function () {
  36.         //点击一次之后，flag一定要变化
  37.         if (flag == 0) {
  38.           pwd.type = "text";
  39.           eye.src = "./images/open.png";
  40.           flag = 1; //赋值操作
  41.         } else {
  42.           pwd.type = "password";
  43.           eye.src = "./images/close.png";
  44.           flag = 0;
  45.         }
  46.       };

5.6 样式属性操作

  • 样式属性操作:可以通过 JS 修改元素的大小、颜色、位置等样式
  • element.style:行内样式操作（适合于样式比较少，或者功能简单的情况）
    元素对象.style.样式属性=’值’；
    注意：1、样式属性采用驼峰命名法：如backgroundColor
    2、js修改style样式操作，产生是是行内样式，css权重比较高
  • element.className:类名样式操作（适合于样式比较多，或者功能复杂的情况）
    注意：class是个保留字，因此使用className来操作元素类名属性
    className会直接更改元素的类名，会覆盖原先的类名，如果想要保留原先的类名，可以使用多类名选择器：this.className=’原先的类名 现在的类名’

6.0案例

6.1 修改样式属性

  1. css:
  2.      div {
  3.         width: 200px;
  4.         height: 200px;
  5.         background-color: pink;
  6.       }
  7. html:
  8.      <div></div>
  9. script:
  10.       var div = document.querySelector("div");
  11.       div.onclick = function () {
  12.         // div.style.属性 属性采用驼峰命名法
  13.         // div.style.backgroundColor='purple'
  14.         this.style.backgroundColor = "purple";
  15.         this.style.width = "250px";

6.2关闭淘宝二维码

  1. html: <div class="box">
  2.       淘宝二维码
  3.       <img src="images/tao.png" alt="" />
  4.       <i class="close-btn">x</i>
  5.     </div>
  7. script: 
  8.       // 核心思路：利用样式的显示与隐藏display:none/block
  9.       var btn = document.querySelector(".close-btn");
  10.       var box = document.querySelector(".box");
  11.       btn.onclick = function () {
  12.         box.style.display = "none";
  13.       };

6.3 循环精灵图

  1.  var lis = document.querySelectorAll("li");
  2.       for (var i = 0; i < lis.length; i++) {
  3.         //让索引号乘以44 就是每个li大的背景y坐标 index就是我们的y坐标
  4.         var index = i * 44;
  5.         // lis[i].style.backgroundPosition = "0 -44px";
  6.         lis[i].style.backgroundPosition = "0 -" + index + "px";
  7.       }

6.4显示隐藏文本框内容

  1.  <input type="text" value="手机" />
  2. script:
  3.       var text = document.querySelector("input");
  4.       text.onfocus = function () {
  5.         // console.log("得到焦点");
  6.         if (this.value === "手机") {
  7.           this.value = "";
  8.         }
  9.         //获得焦点需要把文本框里面的文字颜色变深
  10.         this.style.color = "#333";
  11.       };
  12.       text.onblur = function () {
  13.         // console.log("失去焦点");
  14.         if (this.value === "") {
  15.           this.value = "手机";
  16.         }
  17.         //失去焦点需要把文本框里面的文字颜色变浅
  18.         this.style.color = "#999";
  19.       };

6.5 通过className更改元素样式

  1. var test = document.querySelector("div");
  2.       test.onclick = function () {
  3.         // this.style.backgroundColor = "purple";
  4.         // this.style.color = "#fff";
  5.         // this.style.fontSize = "25px";
  6.         // this.style.marginTop = "100px";
  7.         // this.className = "change"; //相当于把当前的类名改为了change 会覆盖原先的类名
  8.         this.className = "first change"; //如果想要保留原先的类名 可以使用多类名选择器
  9.       };

6.6 密码框案例

  1. html:
  2.       <input type="text" /><img src="./images/mess.png" alt="" /><span>请输入6-16位的密码</span>
  3. script：
  4.       var inp = document.querySelector("input");
  5.       var img = document.querySelector("img");
  6.       var span = document.querySelector("span");
  7.       inp.onblur = function () {
  8.         console.log(inp.value);
  9.         if (inp.value.length < 6 || inp.value.length > 16) {
  10.           img.src = "./images/wrong.png";
  11.           span.innerHTML = "请输入正确位数的密码";
  12.           span.style.color = "red";
  13.         } else {
  14.           img.src = "./images/right.png";
  15.           span.innerHTML = "输入正确";
  16.           span.style.color = "green";
  17.         }
  18.       };

7.0 常见的鼠标事件

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发