JS基础DOM二

style属性


    
    

DOM元素的创建方式总结

第一种创建方式,document.write,可以识别标签,在script中写html和css,跟script写的位置有关系。script写哪就创建在哪,不常用,容易覆盖原来的页面

document.write("
  • 我是document.write创建的
  • ");

    第二种innerHTML,也可以识别标签,用的比较多,绑定属性和内容比较方便,节点嵌套创建用它比较方便

      var li3 = document.getElementsByTagName("li")[0];
      li3.innerHTML += "
  • 我是innerHTML创建的
  • ";

    第三种:利用domAPI创建元素,也是用的比较多的,创建指定数量的时候一般用它

      var li4 = document.createElement("li");
      li4.innerHTML = "我是createElement创建出来的";
      //在父元素的最后添加
      li3.appendChild(li4);
      //指定位置添加
      var li5 = li4.cloneNode(false);
      li5.innerHTML = "我是cloneNode创建出来的"
      li3.insertBefore(li5,li4);//插入到哪个元素的前面
    

    window对象

    window是BOM的顶级对象,通常情况下可以省略

        window.alert("11");
        window.prompt("111");
        
        //成员变量也是window的属性
        var  aa = "1";
        console.log(aa === window.aa);
    
        //自定义函数也是window的一个方法
        function aaa() {
          console.log("111");
        }
        window.aaa();
    

    open,close

        //window.open(地址,是否开新窗口,新窗口参数)
        var a1 = document.getElementsByTagName("a")[0];
        var a2 = document.getElementsByTagName("a")[1];
        a1.onclick = function () {
          var json = {"name":"helloworld","fullscreen":"no","location":"no","width":"100px","height":"100px","top":"100px","left":"100px"};
          window.open("http://www.jd.com","_self",json);
    
    //        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 窗口离屏幕左边距离(像素单位)
        }
        //window.close关闭当前页面
        a2.onclick = function () {
          window.close();
        }
    

    location

        //location,做页面跳转
        var div = document.getElementsByTagName("div")[0];
        div.onclick = function () {
          location.href = "https://www.baidu.com";
        }
    
    //    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

        //navigator
        console.log(navigator.userAgent);//浏览器支持的系统
        console.log(navigator.platform);//系统
    

    history

        //history,历史记录管理
        history.go(1);//前进   history.forwardo()也是前进
        history.go(-1);//后退  history.back()也是回退
        history.go(0);//刷新
    

    定时器

    setInterval,循环定时器,周而复始的执行
    setTimeout,炸弹定时器,用完以后立即报废,只执行一次

    定义方法

        var a = 0;
        //定义方法1匿名函数,一般情况下都用这个
        setInterval(function () {
          console.log(a++);
        },1000);
    
        //定义方法2函数名
        setInterval(aaa,1000);
        function aaa() {
          console.log(1);
        }
    
        //定义方法3
        setInterval("sss(111)",1000);
        function sss(ssss) {
          console.log(ssss);
        }
    

    销毁定时器

        //setInterval的返回值就是定时器的名字
        var num = 1;
        var timer = null;
        time = setInterval(function () {
          console.log(num++);
          if (num > 10) {
            clearInterval(timer);
          }
        },500);
    

    绑定事件的第二种方法

    第一种绑定事件的方法,当事件被重复绑定的时候,会被覆盖掉

        var  button = document.getElementsByTagName("button")[0];
    
        //onclick事件绑定会被覆盖掉
        button.onclick = function () {
          console.log("12345");
        }
        button.onclick = function () {
          console.log("67890");
        }
    

    事件绑定第二种方法:事件监听器,原事件被执行的时候,后面的事件照样被执行,不会被覆盖(更适合团队开发)

        //1.事件源去调用
        //2.参数1是不带on的触发事件
        //3.参数2是事件名(执行函数)
        //4.参数3是事件名(捕获或者冒泡)
    
        button.addEventListener("click",fn1);
        button.addEventListener("click",fn2);
        button.addEventListener("click",fn3);
        function fn1() {
          console.log("12345");
        }
        function fn2()  {
          console.log("67890");
        }
        function fn3()  {
          console.log("123456789");
        }
    

    addEventListener实现原理

      /**
         *
         * @param type 事件名
         * @param fn 执行函数
         * @param element 给哪个元素绑定
         */
        function customAddEventListener(type,fn,element) {
    
          var str = "on" + type;
          //执行方法的时候就先判断事件是否被绑定完,然后在去绑定,就能判断之前的事件是否被绑定过
          var oldEvent = element[str];
          element[str] = function () {
            //不能直接调用,因为还不知道这个元素之前还有没有绑定同样的事件
            //进行判断,如果有就先把之前的执行完再执行,如果没有接直接执行
            //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
            //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
            if (oldEvent) {
                oldEvent();
            }
            fn();
          };
        }
    

    你可能感兴趣的:(JS基础DOM二)