2.DOM

2.DOM

2.1 获取页面元素

2.1.1 根据ID获取

console.dir(b);打印返回元素对象 更好查看属性和方法

语法：var element = document.getElementById(id);id是个字符串要加引号

<div id="a">132</div>
    <script>
      var b = document.getElementById('a');
      console.dir(b);//打印返回元素对象 更好查看属性和方法
    </script>

2.1.2 根据标签名获取

语法：var element = document.getElementsByTagName(‘标签名’);

注意：返回的是一个集合，以伪数组的形式存储。（当前页面的所有该标签）

如要获取某个父元素下的子元素，则

   <ul>
      <li>3</li>
      <li>4</li>
    </ul>
    <ol id="as">
      <li>1</li>
      <li>2</li>
      <li>2</li>
    </ol>
  <script>
     var a=document.getElementsByTagName('ol');
     console.log(ol[0].getElementsByTagName('li'));//li li li
        //或者
     var a=document.getElementsByID('as');
     console.log(a.getElementsByTagName('li'));//li li li
    </script>

2.1.3 HTML5新增

在使用前注意兼容问题

语法：var a = document.getElementsByClassName('类名');返回的是一个元素的集合

语法： var a = document.querySelector()；返回的是一个元素对象

             //getElementsByClassName('类名')
<div class="box">12</div>
  <script>
    var a = document.getElementsByClassName('box');
  </script>

            // querySelector:返回指定选择器的第一个元素对象
<div class="box">12</div>
<div class="box">123</div>
  <script>
    var a = document.querySelector('.box');//如若是ID，则'.'换成'#'
  </script>

2.1.4 获取body，html元素

语法：doucument.body;获取body，返回的是元素对象 ；document.documentElement;获取html

2.2 事件基础

事件三要素：事件源 事件类型 事件处理类型

事件源：事件被触发的对象；

事件类型：如何触发 例如鼠标点击（onclick）等；

事件处理程序：通过 一个函数来完成某操作；

 <button id="btn">12</button>
  <script>
    var a=document.getElementById('btn');
    a.onclick=function(){
      alert('456');
    }
  </script>

2.3 操作元素

2.3.1 改变元素内容

1：element.innerText ，修改里面的内容，不识别html标签

2：element.innerHTML，可以识别html标签，推荐

示例1：输出当前时间

 <button id="btn">显示当前时间</button>
 <div>某个时间</div>
  <script>
    var a=document.querySelector('button');
    var b=document.querySelector('div');
    a.onclick=function(){
     b.innerText = GetDate();
      };
      function GetDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = [
          "星期天",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        var day = date.getDay();
        return (
          "今天是：" + year + "年" + month + "月" + dates + "日" + arr[day]);
      }
  </script>

示例2：加粗字体

<div>某个时间</div>
    <script>
      var b = document.querySelector("div");
      b.innerHTML = "<strong>某</strong>个时间";
    </script>

并且可以使用console.log(element.inner…)；来获得元素值

   <p>
      456
      <span>123</span>
    </p>
    <script>
      var p = document.querySelector("p");
      console.log(p.innerText);//控制台输出：456 123
      console.log(p.innerHTML);//控制台输出：456
                               //           <span>123</span>
    </script>

注意：innerText去除html标签和空格，而innerHTML不会

2.3.2 改变元素属性

2.3.2.1 获取元素属性

1：语法：element.属性

2：语法：element.getAttribute('属性')

  <div class="box" index="1" id="56">12</div>
  <script>
    var div=document.querySelector("div");

  // 获取属性值
    console.log(div.getAttribute("index"));//1，获取属性index
    console.log(div.index);//undefined
     console.log(div.id);//56
  </script>

2.3.2.2 修改元素属性

1：语法：element.属性='值'

2：语法：element.getAttribute('属性','值') 也可以修改元素自带的属性

注意：修改元素属性class不一样

//1
<img src="*****" alt="" title="44444" />
    <script>
      var img = (document.querySelector("img").onclick = function () {
        img.src = "********";//修改img的src属性
        img.title = "55555";//修改img的title属性
      });
    </script>
//2
 <div class="box" index="1" id="56">12</div>
  <script>
    var div=document.querySelector("div");

    div.setAttribute("index","45");
    console.log(div.getAttribute("index"));//45

区别:

1.element.属性获取内置属性值（元素本身自带的属性）

2.element.getAttribute('属性')主要获取自定义的属性，我们程序员自定义的属性

2.3.2.3 移除元素属性

语法：element.removeAttribute("属性");

<div class="box" index="1" id="56">12</div>
  <script>
    var div=document.querySelector("div");
    div.removeAttribute("index");
  </script>

注意：移除的是自定义属性

2.3.3改变元素样式

1.element.style 行内样式操作 修改样式少使用

2.element.className 类名样式操作 修改样式较多使用

注意：JS里的样式采取驼峰命名法

 <script>
      var div = document.querySelector('div');
      div.onclick = function () {
        //第一种写法
      this.style.backgroundColor = 'pink';//this指的是调用该函数的调用者
      //第二种写法
      div.style.backgroundColor = 'pink';
    }
  </script>

说明：盒子原本设置的背景颜色样式为紫色

 <style>
   .change {
     width: 200px;
     height: 200px;
     background-color: blue;
   }
 </style>
 <div>023</div>
<script>
     var div = document.querySelector('div');
     div.onclick = function () {
        this.className='*****';//直接给盒子添加了一个名为change的类，原来的类会被覆盖
   }
 </script>

注意：若要保留原来的类，则 this.className='*****'需要把原来的类名也要加上

2.4 节点操作

2.4.1 父节点（parentNode）

  <div class="box">
      <span class="erweima"></span>
    </div>

    <script>
      var erweima = document.querySelector(".erweima");
      var box = document.querySelector(".box");//获取box

      var box1 = erweima.parentNode;//通过parentNode获取box
      console.log(box);
      console.log(box1);
//两个输出结果一样
    </script>

注意：父节点操作得到的是离元素最近的父级节点

2.4.2 子节点

 <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等，不推荐
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

2.4.2.1 子节点操作

 <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script> 

2.4.3 兄弟节点

语法：

1：node.nextSibling :返回当前元素的下一个兄弟节点

2：node.previousSibling：返回当前元素的上一个兄弟节点

3：node.nextElementSibling :返回当前元素的下一个兄弟元素节点

4：node.previousElementSibling :返回当前元素的上一个兄弟元素节点

<div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

注意：语法3、语法4仅支持ie9以上的版本

2.4.4 创建、添加节点

语法：

1：document.createElement('tagName')；由tagName指定html元素

2：node.appendChild(child)；node 父级 child 是子级

3： node.insertBefore(child, 指定元素)；将一个节点添加到父节点指定节点前面

<ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>

2.4.5 删除节点

语法：

1： node.removeChild(child)；node 父级 child 是子级，删除父节点中的子节点

<button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;//删除完了之后，禁用删除按钮
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

2.4.6 复制节点

语法：

1： node.cloneNode(); 返回一个调用该方法的节点的一个副本

    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

注意：

1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容

2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

2.4.7 三种创建动态元素方法

区别：

1.document.write() 直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面全部重绘

2.inner.HTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结果较复杂，且不会重绘页面

3.document.createElement 创建多个元素效率低一点点，但是结构更清晰

2.5 方法监听注册事件（推荐）

2.5.1 事件侦听注册事件

语法：addEventListener(type, listener, listener);

type: 表示监听事件类型的大小写敏感的字符串。

listener: 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。

listener：一个指定有关 属性的可选参数对象。

<button>方法监听注册事件</button>
  <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
            // 2. 事件侦听注册事件 addEventListener 
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>

注意：

(1) 里面的事件类型是字符串 必定加引号 而且不带on
(2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）

2.6 删除事件

语法：

1：Element.onclick=null;传统方式删除事件

2:eventTarget.removeEventListener(type,listener[,useCapture]);事件侦听删除事件

 <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
    </script>

2.7 事件流

请看示例代码：

 <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

2.8 事件对象

请参考示例代码：

<div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;
                console.log(e);


            }
            // div.addEventListener('click', function(e) {
            //         console.log(e);    })
     
    </script>

1.event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看

2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

3.事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键

4.这个事件对象我们可以自己命名 比如 event 、 evt、 e

5.事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.evet;

2.8.1 事件对象常用属性、方法

返回触发事件对象示例代码:

  <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

            })
    </script>

阻止默认行为代码示例：

 <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })
            // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 我们可以利用return false 也能阻止默认行为 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>

阻止冒泡代码示例：

<div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

2.9 事件委托

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

示例：

dy>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('2');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

2.10 常用鼠标事件

示例：

 <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>

2.11 常用键盘事件

1. keyup 按键弹起的时候触发
2. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
3. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
4. keyCode属性可以得到相应键的ASCII码值

 <script>
        // keyup
        // document.onkeyup = function() {
        //         console.log('我弹起了');
        //     }
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })
        // keypress 
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
            // keydown 
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })

        //keyCode
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }

        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);

        })
    </script>

注意：

1.三个事件的执行顺序 keydown – keypress – keyup

s’, function() {
console.log(‘我按下了press’);
})
// keydown
document.addEventListener(‘keydown’, function() {
console.log(‘我按下了down’);
})

    //keyCode
    document.addEventListener('keyup', function(e) {
        // console.log(e);
        console.log('up:' + e.keyCode);
        // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
        if (e.keyCode === 65) {
            alert('您按下的a键');
        } else {
            alert('您没有按下a键')
        }

    })
    document.addEventListener('keypress', function(e) {
        // console.log(e);
        console.log('press:' + e.keyCode);

    })
</script>

==注意：==

==1.三个事件的执行顺序  keydown -- keypress -- keyup==

==2.keyup 和keydown事件不区分字母大小写，keypress区分字母大小写==