JS学习笔记3－DOM知识点2

1.DOM详解

 1.1案例详解

nodeType/nodeName/nodeValue:   

<div id="box" value="111">你好</div>
<script>
    var ele = document.getElementById("box");//元素节点
    var att = ele.getAttributeNode("id");//属性节点
    var txt = ele.firstChild;//文本节点 


   // console.log(ele); //<div id="box" value="111">你好</div>
   // console.log(att); // id="box"
   // console.log(txt); //"你好"

    //nodeType
    // console.log(ele.nodeType);//1
    // console.log(att.nodeType);//2
    // console.log(txt.nodeType);//3


    // //nodeName
    // console.log(ele.nodeName);//DIV
    // console.log(att.nodeName);//id
    // console.log(txt.nodeName);//#text


    // //nodeValue
    // console.log(ele.nodeValue);//null
    // console.log(att.nodeValue);//box
    // console.log(txt.nodeValue);//你好


</script>

1.2行内式的方法绑定：

  账号：<input type="text" onblur="fn(this)"/><br><br>
    密码：<input type="password" onblur="fn(this)"/>

    <script>
        //需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
        //步骤：
        //1.获取事件源
        //2.绑定事件
        //3.书写事件驱动程序

        //3.书写事件驱动程序
        function fn(aaa){
            html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window
           console.log(this);
            只有传递的this才指的是标签本身。
           console.log(aaa);
           console.log(this.value);


            if(aaa.value.length < 6 || aaa.value.length>12){
                aaa.className = "wrong";
            }else{
                aaa.className = "right";
            }
        }
    </script>

1.3两张绑定方法不能混用，用什么赋值，就用什么取值。

<div id="box" title="主体" class="asdfasdfadsfd">XXXX</div>

<script>

    //属性绑定的两种方式不能交换使用，赋值和获取值必须使用用一种方法。
    var div = document.getElementById("box");
    //元素节点.属性（元素节点[属性]）:绑定的属性值不会出现在标签上。
    div.aaaa = "w11";

    div['ddd']='3333';
    
    //get/set/removeAttribut: 绑定的属性值会出现在标签上。
    div.setAttribute("bbbb","2222");

    console.log(div.getAttribute("bbbb"));
    console.log(div.bbbb); //不能得到set绑定的属性值

</script>

1.4 style属性设置和获取

  style是一个对象，不能获取内嵌和外链。

  1.样式少的时候使用

  2.style是对象

  3.值是字符串，没有设置值是“”；

  4.命名规则，驼峰命名。和css不一样

  5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）

  6.box.style.cssText = “字符串形式的样式”；

<div class="box" style="width: 100px;height: 100px;background-color: pink;">我爱你中国</div>

<script>
    
    var box = document.getElementsByTagName("div")[0];
   
   // 1.样式少的时候使用
    console.log(box.style.backgroundColor);//pink

    //2.style是对象
    console.log(box.style);  //CSSStyleDeclaration {}
    console.log(typeof box.style); //object

    //3.值是字符串，没有设置值是“”；
    console.log(box.style.lineHeight); // ""
    console.log(box.style.border);   //""
    //4.命名规则，驼峰命名。和css不一样
    console.log(box.style.backgroundColor);
   // 5.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）
    console.log(typeof box.className); //string
    console.log(box.className); //box

    //6.box.style.cssText = “字符串形式的样式”；
    console.log(box.style.cssText);
    box.style.cssText = "width: 200px; height: 200px; background-color: red;line-height:200px;text-align:center;"

</script>

1.5 判断每个字符串是否以某个字符串开头

var str = "abcdefg";

    //判断str是否以a为开头？
    var num = str.indexOf("abce");
    //只有返回值为0，那么字符串才是以参数为开头
    //如果查询不到，返回值为-1；
    alert(num);

1.6 window对象

   //window是bom的顶级对象。通常情况下，可以省略
   // window.alert(1);
   // alert(2);
   // prompt();
   // confirm();
   //成员变量也是window的一个属性而已
     var aaa = 1;
     alert(aaa); //1
     alert(window.aaa); //1 
     alert(aaa === window.aaa); //true
     alert(window);  //[object window]

    //自定义函数也是window的一个方法
    function fn(){
        console.log(1);
        console.log(1);
        console.log(1);
        console.log(1);
    }
    console.log(window.fn);

1.7 DOM元素的创建

//第一种创建方式：document.write();
    document.write("<li>我是document.write创建的</li>");
    var btn = document.getElementsByTagName("button")[0];
    var ul = document.getElementsByTagName("ul")[0];
    btn.onclick = function () {
       document.write("<li>我是document.writessss创建的</li>");
    }

    //第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
    ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"


     //第三种：利用dom的api创建元素
    var newLi = document.createElement("li");
    newLi.innerHTML = "我是createElement创建的";
    //    console.log(newLi);
    //在父元素的最后面添加元素。
     ul.appendChild(newLi);
    //指定位置添加
    // var li1 = document.getElementById("li1");
    // ul.insertBefore(newLi,li1);

1.8 DOM元素的操作

     document.write();不常用，因为容易覆盖原来的页面。
     innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
     document.createElement;也是比较多的，指定数量的时候一般用它。

    var ul = document.getElementsByTagName("ul")[0];
    var li1 = document.getElementById("li1");

    //创建，添加，删除，替换
    var li2 = document.createElement("li");
    li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
    ul.appendChild(li2);
    //用insertBefore添加
    var li3 = document.createElement("li");
    li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
    //父节点.insertBefore(新节点，参照节点);
    ul.insertBefore(li3,li1);

    //删除，替换
    // ul.removeChild(li3);
    //父节点.replaceChild(newNode,oldNode);
    // ul.replaceChild(li3,li2);

    // //克隆node.cloneNode(true);深层复制。
    // for(var i=0;i<=3;i++){
    //     var newLi = li3.cloneNode(true);
    //     ul.appendChild(newLi);
    // }

1.9 BOM的内置对象和方法体验

    <a href="javascript:;">点击我可以穿件一个新的页面</a>
    <a href="javascript:;">点击我可以关闭本页面</a>
    <div>点击我跳转到百度</div>
    <script>
        新窗口 = window.open(地址,是否开新窗口,新窗口的参数);
        var a1 = document.getElementsByTagName("a")[0];
    //  var a2 = document.getElementsByTagName("a")[1];
        a1.onclick = function () {
//          window.open("http://www.jd.com","_blank");
            var json = {"name":"helloworld","fullscreen":"no","location":"no","width":"100px","height":"100px","top":"100px","left":"100px"};
//          var newWin = window.open("demo.html","_self",json);
            var newWin = window.open("demo.html","_blank",json);
            newWin.moveTo(500,500);

//        name：新窗口的名称，可以为空
//        featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
//        fullscreen= { yes/no/1/0 } 是否全屏，默认no
//        channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
//        toolbar= { yes/no/1/0 } 是否显示工具条，默认no
//        location= { yes/no/1/0 } 是否显示地址栏，默认no
//        directories = { yes/no/1/0 } 是否显示转向按钮，默认no
//        status= { yes/no/1/0 } 是否显示窗口状态条，默认no
//        menubar= { yes/no/1/0 } 是否显示菜单，默认no
//        scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
//        resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
//        width=number 窗口宽度（像素单位）
//        height=number 窗口高度（像素单位）
//        top=number 窗口离屏幕顶部距离（像素单位）
//        left=number 窗口离屏幕左边距离（像素单位）
        }
//
//        //关闭本页面
//        a2.onclick = function () {
//            window.close();
//        }


        var div = document.getElementsByTagName("div")[0];
        div.onclick = function () {
            location.href = "http://www.baidu.com";
//            window.open("http://www.baidu.com","_blank");
        }
//        console.log(location.href    )    //
//        console.log(location.hash    )    //    返回url中#后面的内容，包含#
//        console.log(location.host    )    // 主机名，包括端口
//        console.log(location.hostname)    // 主机名
//        console.log(location.pathname)    // url中的路径部分
//        console.log(location.protocol)    // 协议 一般是http、https
//        console.log(location.search	)     // 查询字符串


        //navigator
//        console.log(navigator.userAgent);
//        console.log(navigator.platform);

        //回退
        //history.go(-1);
//        history.back();


    </script>

2.1 定时器

  用途：setInterval()循环定时器；周而复始的执行（循环执行）
  用途：setTimeout() 炸弹定时器；用完以后立刻报废（只执行一次）

    setTimeout(function(){
        console.log(1);
    },5000)
      
    定义方法1(匿名函数)
   setInterval(function () {
       console.log(1);
   },1000);

   //定义方法2
   setInterval(fn,1000);
   function fn(){
       console.log(2);
   }

    定义方法3
   setInterval("fn(3)",1000);
   function fn(aaa){
       console.log(aaa);
   }

2.2 定时器高级

   //返回值，清除定时器。
        var num = 1;

        //setInterval他的返回值就是定时器的名字
        var timer = setInterval(function () {
            console.log(num);
            num++
            if(num===10){
                //如何停止定时器呢？？？
                clearInterval(timer);
            }
        },500);

2.内置对象

1.1  Date

   //第一种
    var date1 = new Date();
    console.log(date1);

    //第二种
    var date2 = new Date("2016/09/06 00:00:00");
    console.log(date2);

    //后两种兼容性不好，不推荐使用
    //第三种
    var date3 = new Date('Wed Jan 27 2016 12:00:00 GMT+0800 (中国标准时间)');

    //第四种
    var date4 = new Date(2016, 1, 27);

    console.log(date1.getDate()          )       //获取日 1-31
    console.log(date1.getDay ()          )       //获取星期 0-6（0代表周日）
    console.log(date1.getMonth ()        )       //获取月 0-11（1月从0开始）
    console.log(date1.getFullYear ()	 )      //获取完整年份（浏览器都支持）
    console.log(date1.getHours ()	     )       // 获取小时 0-23
    console.log(date1.getMinutes ()	     )     //获取分钟 0-59
    console.log(date1.getSeconds ()	     )     //获取秒  0-59
    console.log(date1.getMilliseconds () )       //获取毫秒 （1s = 1000ms）
    console.log(date1.getTime ()	     )      //返回累计毫秒数(从1970/1/1午夜)


    //获取当前时间距离1970/01/01的毫秒值

    var date11 = Date.now();
    var date22 = +new Date();
    var date33 = new Date().getTime();
    var date44 = new Date().valueOf();

    console.log(date11);
    console.log(date22);
    console.log(date33);
    console.log(date44);

1.2  String/Number/Boolean

1.2.1 String类

 //简单数据类型无法绑定属性和方法
    var str = "abc";

    var strObj = new String("abc");
    strObj.aaa = 111;
    console.log(strObj); //String {"abc", aaa: 111}
    console.log(typeof strObj); //object
    console.log(strObj.aaa);  //111

    str.aaa = 111;
    console.log(str.aaa); //undefined
    console.log(str.length); //3
    console.log(str.indexOf("c")); //2

1.2.2给索引查字符(charAt/charCodeAt)

1.charAt，获取相应位置字符（参数： 字符位置）

注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与string.length 之间，该方法将返回一个空字符串。

2 charCodeAt获取相应位置字符编码（参数：字符位置）

charAt()方法和charCodeAt()方法用于选取字符串中某一位置上的单个字符

区别：charCodeAt()方法，它并不返回指定位置上的字符本身，而是返回该字符在Unicode字符集中的编码值。如果该位置没有字符，返回值为NaN.

字符/字符编码 = Str.charAt/charCodeAt(索引值);

1.2.3 给字符查索引（indexOf/lastIndexOf）

1. indexOf，从前向后索引字符串位置（参数： 索引字符串）

从前面寻找第一个符合元素的位置

2. lastIndexOf，从后向前索引字符串位置（参数：索引字符串）

从后面寻找第一个符合元素的位置

找不到则返回-1

索引值 = str.indexOf/lastIndexOf(想要查询的字符);

1.2.4编码和解码（了解）

URI (UniformResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

encodeURIComponent()函数可把字符串作为 URI 组件进行编码

decodeURIComponent()函数可把字符串作为 URI 组件进行解码

 

1.2.5字符串的链接

新字符串 = str1.concat(str2)； 链接两个字符串

1.2.6字符串的截取

1. slice，截取字符串（参数：1，截取位置【必须】，2终结点）

字符串 = str.slice（索引1，索引2); 两个参数都是索引值。

(1).（2,5）  正常包左不包右。

(2). ( 2 )   从指定的索引位置剪到最后。

(3).（-3）   从倒数第几个剪到最后. (负数就表示倒数第几个）

(4).（5,2）  前面的大，后面的小，空。

2. substr，截取字符串（参数：1，截取位置【必须】，2截取长度）

字符串 = str.substr（参数1，参数2); 1索引值,2长度。

第一个参数为从索引位置取值，第二个参数返回字符长度。

(1).（2,4）    从索引值为2的字符开始，截取4个字符。

(2).（1）     一个值，从指定位置到最后。

(3).（-3）    从倒数第几个剪到最后.

(4). 不包括前大后小的情况。

3. substring 同slice

字符串 = str.substring（参数1，参数2); 两个参数都是索引值。

  不同1：参数智能调转位置。

  不同2：参数负值，将全部获取字符串。

   （1）.（2,5）    正常包左不包右。

    (2).   ( 2 )      从指定的索引位置剪到最后。

    (3).  （-3）    获取全部字符串.

    (4).  （5,2）   前面的大，后面的小，不是空。（2,5）

1.2.7 特殊方法简介

trim()     //只能去除字符串前后的空白

replace()  //替换   str.replace(/aaa/gi,“bbb”);

split()    //字符串变数组

3.Math

Math.abs();       取绝对值

Math.floor();      向下取整

Math.ceil();       向上取整

Math.round();     四舍五入取整

Math.random();   随机数0-1

4.1 addEventListenner的兼容绑定

    var btn = document.getElementsByTagName("button")[0];

    //第一种事件绑定的方法容易被层叠。
    btn.onclick = function () {
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }

    btn.onclick = function () {
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }


    //addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
    //第二种事件绑定的方法不会出现层叠。（更适合团队开发）
    btn.addEventListener("click",fn1);
    btn.addEventListener("click",fn2);
    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }

    //调用这是事件源，参数1事件名(不带on) ，参数2事件名(执行函数) 参数3事件名(捕获或者冒泡)

4.2.addEventListenner（原理）

  var btn = document.getElementsByTagName("button")[0];

//    btn.addEventListener("click",fn1);
//    btn.addEventListener("click",fn2);
    fn("click",fn1,btn);
    fn("click",fn2,btn);
    fn("click",fn3,btn);


    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }
    function fn3(){
        console.log("111111。");
    }

    //原理（了解）（自己封装一个）(click)
    function fn(str,fn,ele){
        //判断位置要注意：如果进入绑定事件本身，那么该事件已经本绑定了
        //所以获取旧的事件必须在新的事件绑定之前
        var oldEvent = ele["on"+str];
        ele["on"+str] = function () {
            //不能直接执行函数，因为我们还不知道以前有没有绑定我同样的事件
            //进行判断，如果以前有过绑定事件，那么把以前的执行完毕在执行现在的事件，如果没有就直接执行
            //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
            //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
            if(oldEvent){
                //因为oldEvent本身他就是函数本身，那么后面加一个();就是执行函数
                oldEvent();
                fn();
            }else{
                //没有绑定过事件
                fn();
            }
        }
    }

4.3 addEventListenner兼容性

<script>
    var btn = document.getElementsByTagName("button")[0];

    //火狐谷歌IE9+支持addEventListener
    btn.addEventListener("click",fn1);
    btn.addEventListener("click",fn2);

    //IE678支持attachEvent
    btn.attachEvent("onclick",fn1);
    btn.attachEvent("onclick",fn2);

    //兼容写法
    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法，如果支持那么调用，如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下，用此代码
                ele["on"+str] = fn;
            }
        }
    }


    EventListen.addEvent(btn,fn1,"click")
    EventListen.addEvent(btn,fn2,"click")



    function fn1(){
        console.log("九尺龙泉万卷书，上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下，枉为男儿大丈夫。");
    }

</script>

4.4 addEventListenner 移除事件

  function fn(){
        alert(1);
    }
   
    btn.onclick = function () {
        alert(1);
    }
    btn.addEventListener("click",fn);
    btn.attachEvent("onclick",fn);


    1. btn.onclick = null; //第一种移除方法

   
    2. btn.removeEventListener("click",fn);//第二种移除方法
       btn.detachEvent("onclick",fn); －－针对attachEvent