Javascript之DOM、BOM学习笔记

什么是DOM:文档对象模型（简称dom，获取的dom元素是一个对象），是w3c组织推荐的处理可扩展标记语言（HTML或者xml）的标准编程接口

 

对于JavaScript，为了让JavaScript操作HTML，JavaScript有一套自己的dom编程接口，可以改变网页的内容、结构、样式

对于HTML，dom让html形成了一棵dom树，包含文档、元素、节点

 

一、获取元素

1.获取页面元素：

1.1根据ID获取（getElementById（''））：

  <!-- id对大小写敏感 -->
  var nowtime=document.getElementById('now');

 

1.2根据标签名获取（getElementsByTagName（''）)

        //1.返回 获取元素对象的集合 伪数组的形式存储
        //2.如果页面中没有这个元素 返回的则是空的伪数组形式  HTML Collection[]
        var lis = document.getElementsByTagName('li');

        //3.获取父元素里面的指定标签子元素  Element.getElementsByTagName('标签名')  父元素必须是指定单个元素
        var father = document.getElementById('father');
        console.log(father.getElementsByTagName('li'));  //HTML Collection(4)[li,li,li,li]

1.3根据类名获取（getElementsByClassName('')、querySelector(' ')、querySelectorAll(' ')）

12         // 1.31  document.getElementsByClassName('类名')    根据类名返回元素对象集合
        var byClassName=document.getElementsByClassName('one');

        // 1.32  querySelector （‘选择器’）  返回指定选择器的第一个元素对象   里面选择器加符号  类.box   id #box
        var frist = document.querySelector('.one');
        var frist1 = document.querySelector('#nav');
        // 1.33  querySelectorAll()   返回指定选择器的所有元素对象集合
        var all = document.querySelectorAll('.one');

1.4 获取特殊元素（body，html)：

          //获取body元素：document.body   返回body对象
          var body = document.body;

         //获取html元素： document.documentElement   返回html元素对象
          var element = document.documentElement;

二、事件基础：

<script>
          //1.事件三部分： 事件源 事件类型 事件处理程序
          //事件源  事件被触发的对象
          var login = document.getElementById('login');
          //
          //事件处理程序  通过一个赋值的方式完成
          login.onclick = function(){
              alert('请输入账号密码');
          }
          //事件执行步骤：获取事件源  绑定事件  添加事件处理程序
      </script>

 三、 操作元素：

1.修改元素内容：（element.innerText、element.innerHTML)

 

  JavaScript的DOM操作可以改变网页内容、结构和样式。我们可以用此操作元素改变元素里面的内容、属性

          // 1. element.innerText   不识别html标签  去除换行和空格
          div.innerText = '<strong>变秃了</strong>也变强了'    //<strong>变秃了</strong>也变强了
          //  2. element.innerHTML  识别html标签，保留空格和换行
          div.innerHTML = '<strong>变秃了</strong>也变强了'    //变秃了加粗

          //这两个属性可读写的，获取元素里面的内容
          var p = document.querySelector('p');
          console.log(p.innerText);
          console.log(p.innerHTML);

 

1.innerText运行结果：

 

 2.innerHTML运行结果：

 

2.修改元素属性：

          //1.获取元素
          var kobe = document.getElementById('kobe');10      
     　　　　var image = document.querySelector('img');
         //2.注册事件 处理程序
          kobe.onclick = function(){
　　　　　　　　//修改元素属性，图片路径
              image.src = 'images/kobe.jpeg';
              image.title = '曼巴科比';
          }

 

运行结果：

 

 

 3.修改表单属性（type、value、checked、selected、disabled）：

          //1.获取元素
          var button = document.querySelector('button');
          var input = document.querySelector('input');
         //2.注册事件   处理程序
          button.onclick = function(){
          input.value = '宝贝，该交作业了';
          //button点击后禁用不能再点击disabled
          button.disabled = true;
        //   this.disabled = true 也可以，this当前事件函数的调用者即button

 

运行结果：

 

 4.修改样式属性：(element.style 行内样式操作  element.className类名样式操作）

        var box = document.querySelector('div');
        box.onclick = function(){
            //修改样式属性，产生的行内样式，css权重比较高
            this.style.backgroundColor = 'black';

             //className类名样式操作，添加的change包含各种样式属性操作

             this.className = 'change';原本有first直接添加会覆盖掉,

             this.className = 'first change';

5.显示和隐藏文本内容：

         //获取元素
         var text = document.querySelector('input');
        //注册事件  获取焦点事件
         text.onfocus = function(){
             if(text.value == '百度一下'){
                 text.value = '';
             }
             //修改样式颜色
             this.style.color='#333';
             
         }
         //失去焦点
         text.onblur = function(){
            if(text.value == ''){
                text.value = '百度一下';
             }
             this.style.color = '#999';
         }

6.获取，设置，移除自定义的属性值（element.getAttribute('属性值')、element.setAttribute('属性','值')、removeAttribute(’属性’)　　　

         //获取元素属性值
         var test = document.querySelector('div');
         //1.element.属性,获取内置属性值，元素本身自带
                alert(test.id);
         //2.element.getAttribute('属性值')，主要获取自定义的属性
                alert(test.getAttribute('id'));
                alert(test.getAttribute('index'));

        //设置元素属性值
        var test = document.querySelector('div');
        //1.element.属性 = '值'
        div.id = 'study';
        //2.element.setAttribute('属性','值')，主要自定义的属性
        test.setAttribute('index',2);

        //移除属性 
        test.removeAttribute('index');

 

四、节点操作：

1.父节点（node.parentNode) 、子节点（node.children)、第一个和最后一个子元素、兄弟节点

         var son = document.querySelector('.son');
        //得到离元素最近的父级节点，如果找不到父级节点就返回null
         console.log(son.parentNode);

 

  　　　var father = document.querySelector('.father');
        //获取所有的子元素节点
       console.log(father.children);

 

       var father = document.querySelector('.father');
        //获取第一个子元素和最后一个
       console.log(father.children[0]);
       console.log(father.children[length-1]);

 

       //1.nextSibling 下一个兄弟节点包括元素节点 或者 文本节点等等，找不到返回null
       node.nextSibling     node.previousSibling
       //2.nextElementSibling 得到下一个兄弟元素节点,找不到返回null
       node.nextElementSilbling   node.previousElementSibling

 2.创建节点、添加节点  、删除节点、复制节点  

      //1.创建节点 元素节点
      var li = document.createElement('li');
//2.添加节点 node.appendChild（child)node 父级 后面追加元素，类似数组的push
      var ul = document.querySelector('ul');
      ul.appendChild(li);
      //3.添加节点 node.insertBefore(child,指定元素);
      ul.insertBefore(li,ul.children[0]);
　　　　　//4.删除节点 node.removeChild(child) 从dom中删除一个子节点，返回删除的节点
　　　　　　ul.removeChild(ul.children[0]);
//5.复制节点 node.cloneNode();括号里面为空或者false 浅拷贝 只复制标签不复制里面内容
　　　　　　　　括号里面为true 深拷贝 复制标签复制里面内容
　　　　　　　　node.cloneNode()  node.cloneNode(false)  node.cloneNode(true)
　　　　　　

 3.简单版发布留言案例：

           //获取事件源

          var button = document.querySelector('button');

          var ul = document.querySelector('ul');

     　　　var text = document.querySelector('textarea');

       //点击后

     　　　button.onclick = function(){

         　　if(text.value==''){

             　　alert('您还没有留言');

             　　return false

         　　}else{

             //留言后创建新的li存放留言内容

            var li = document.createElement('li');

            //li获取留言内容      并且添加删除链接     javascript:;可以阻止链接跳转 

            li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";

            //每次留言放到最前位置

            ul.insertBefore(li,ul.children[0]);

            //获取所有的删除链接，并且点击时删除留言li

            var as = document.querySelectorAll('a');

            for (let i = 0; i < as.length; i++) {

                as[i].onclick = function(){

                    ul.removeChild(this.parentNode);

 4. 三种动态创建元素区别 

       document.write     是直接将内容写入页面的内容流，文档执行完毕后页面全部重绘

      innerHTML           是将内容写入某个dom点，不会导致页面重绘，创建多个元素（拼接字符串3100毫秒左右）慢，采用数组形式6毫秒左右快

      createElement()   创建多个元素效率稍低17毫秒

       总结：不同浏览器下，innerHTML效率比createElement高

五、事件高级

 1.注册事件  

     //传统方法,唯一性
         div.onclick = function(){}
     //事件监听注册事件 eventTarget.addEventListener(type,listener[,useCapture])
     //type：事件类型字符串   listener：事件处理函数，事件发生时，调用该监听函数 
          useCapture:可选参数布尔值，默认false
         div.addEventListener('click',function(){
             alert(11);

 2.删除事件

//1.传统方法,唯一性
div.onclick = null;
//2.事件监听注册事件 eventTarget.removeEventListener(type,listener[,useCapture])
//type：事件类型字符串   listener：事件处理函数，事件发生时，调用该监听函数
  useCapture:可选参数布尔值，默认false
div.removeEventListener('click',function(){});
//3.eventTarget.detachEvent(eventNameWithon,callback)
div.detachEvent('onclick',function(){});

 3.事件流

//事件流：从页面接收事件的顺序。三大阶段：捕获阶段  当前目标阶段  冒泡阶段
addEventListener第三个参数（默认false），true捕获阶段，false或者省略 冒泡阶段（常用）
//有些事件是没有冒泡，onblur、onfocus、onmouseenter、onmouseleave
div.addEventListener('click',function(){},true(false));

 4.阻止默认行为、阻止冒泡

            button.addEventListener('click',function(e){
             //阻止默认行为。让链接不跳转，让按钮不提交preventDefault()方法
            e.preventDefault();
            //阻止冒泡    
            e.stopPropagation();

 

 5.事件委托：不是每个子节点都设置事件监听器， 而是设置在其父节点上，然后利用冒泡原理影响设置每个子结点

6.禁止选中文字和右键菜单

//contextmenu 禁用右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        //selectstart  禁止选中文字
        document.addEventListener('selectstart',function(){
            e.preventDefault();

7.获得鼠标在页面的坐标

            document.addEventListener('click',function(e){
            //1.client鼠标在可视区的xy坐标
            console.log(e.clientX);
            console.log(e.clientY);
            //2.page 鼠标在页面文档的xy坐标
            console.log(e.pageX);
            console.log(e.pageY);
            //3.screen 鼠标在电脑屏幕的xy坐标
            console.log(e.screenX);
            console.log(e.screenY);

8.跟着鼠标移动而移动案例（放大镜）

<style>
      img{
          width:100px;
          height: 100px;
          /* 绝对定位 */
          position: absolute;
      }
    </style>
</head>
   <body>
        <img src="images/kobe.jpeg" alt="">
     <script>
         var image = document.querySelector('img');
         //随着鼠标移动而移动
       document.addEventListener('mousemove',function(e){
           var x = e.pageX;
           var y = e.pageY;
        //让照片离left top的距离等于鼠标到页面xy的距离
           image.style.left = x+'px';
           image.style.top = y+'px';

 9.常用的键盘事件、键盘事件对象：

    //三个按键执行顺序 keydown--keypress--keyup
    //keyup 按键弹起时触发
    document.addEventListener('keyup',function(){})
    //keypress 按键按下时触发  不能识别功能键，ctrl,shift 左右箭头
    document.addEventListener('keypress',function(){})
    //keydown 按键按下时触发 
    document.addEventListener('keydown',function(){})

 

 

   //键盘事件对象的keyCode属性得到对应键的ASCII码值,Keypress不识别功能键
   //keyup和keydown不区分大小写(开发常用），aA都是65;keypress区分大小写 a97,A65
   document.addEventListener('keyup',function(e){
     console.log(e.keyCode);

 

  10、按s聚焦搜索案例：

  //京东输入案例，按s聚焦搜索框
  var serch = document.querySelector('input');
  document.addEventListener('keyup',function(e){
    if(e.keyCode == 83){
      serch.focus();

 

 

CSS

一、什么是BOM：

BOM是浏览器对象模型。提供了独立于内容而与浏览器窗口进行交互的对象，核心是window

 二：window对象常见事件：

1.页面加载事件（load 、DOMContentLoaded）

    //1.load页面加载  等页面内容全部加载完毕，才执行事件
    document.addEventListener('load',function(){})
    //2.DOMContentLoaded  dom加载完毕执行事件
    document.addEventListener('DOMContentLoaded',function(){})

 

2.调整窗口大小事件（resize)

      //调整窗口大小事件
    window.addEventListener('resize',function(){
      //当前屏幕宽度
      console.log(window.innerWidth);

 

三、定时器：

1.定时器之setTimeout、clearTimeout、setInterval、clearInterval

 

    //window.setTimeout (调用函数，延迟时间);给函数设置一个定时器，到时间后调用函数
    //window可以省略，延迟时间单位毫秒，省略默认0
    //也叫回调函数（广告五秒后消失案例）
       setTimeout(function(){},2000(2s));

    var button = document.querySelector('button');
    var timer = setTimeout(function(){},2000(2s));
    button.addEventListener('click',function(){
//clearTimeout(timeoutID 定时器名字)方法取消先前通过调用setTimeout()建立的定时器
        clearTimeout(timer);

     //setInterval(调用函数，延时时间)；每隔延时时间重复调用函数
     setInterval(function(){},2000);

    var begin = document.querySelector('.begin');
    var clear = document.querySelector('.clear');
    var timer = null;     //全局变量，null是空对象
    begin.addEventListener('click',function(){
       //setInterval(调用函数，延时时间)；每隔延时时间重复调用函数
      timer = setInterval(function(){},1000);
    })
    clear.addEventListener('click',function(){
      //清除之前建立的定时器，window.clearInterval(intervalID);
      clearInterval(timer);

 

 2.发送短信案例：（用setInterval、clearInterval)

  <input type="text">
  <button>发送验证码</button>
  <script>
   var button = document.querySelector('button');
   var time = 60 ;   //剩下的秒数
   button.addEventListener('click',function(){
            button.disabled=true;  //按钮失效
     var timer= setInterval(function(){
          if(time==0){
            //按钮还原并且消除定时器
            clearInterval(timer);
            button.disabled=false;
            button.innerHTML='发送验证码';
            time =60;   //从60重新开始
          }else{
            button.innerHTML=time+'后重新发送验证码';
            time--;
          }
        },1000)
   })

 

四、JS执行队列：

1.js执行机制：

先同步任务执行完，再执行异步任务

同步任务：在主线程执行，形成一个执行栈

异步任务：三种类型1.普通事件：click，resize 2.资源加载 load error  3.定时器 setInterval、setTimeout

 

五、

location对象:

1.location.href         获取或者设置整个URL

   location.search    返回参数

2.location对象的方法（assgin、replace、reload）

              button.addEventListener('click',function(){
            //可以跳转页面，记录浏览历史，可以实现后退功能
            //location.assign('http://www.baidu.com');
            //替换当前页面，不记录浏览历史，不可以实现后退功能
            //location.replace('http://www.baidu.com');
            //重新加载页面，相对于刷新F5    如果参数为true强制刷新crtl+f5
            location.reload();

 

navigator对象：

常用的是userAgent，该属性返回客户端发送服务器的user-agent头部的值

history对象：

            button.addEventListener('click',function(){
            //后退功能
            history.back();
            //前进功能
            history.forward;
            //参数1前进一个页面  -1后退一个页面
            history.go();

 

 六：网页特效：

1.偏移量offset: