zoukankan      html  css  js  c++  java
  • js学习之BOM和DOM

    1. 浏览器的原理

    1.1 浏览器的多线程

    (1)  解析js引擎线程

    (2)  UI渲染线程

    (3)  事件发起线程

    (4)  发起请求的线程

    (5)  定时器的线程

    1.2 同步异步

    (1)  前面事情的干完才能干后面的事情,例如吃完饭才能喝水。

    (2)  前面的事情可以不干完,就干后面的事情,然后后面的事情干一半,可以回到前面的事情接着干,例如吃一口饭,喝一口水,然后再吃饭,再喝水。

    1.3 浏览器执行JS的过程

      第一阶段 载入阶段 默认:同步

    (1)  获取html的内容进行解析

    (2)  生成DOM树,将html文件转化为html的结构树(DOM树)放到浏览器执行的内存环境中。

    DOM树:
    html head meta title script body

    (3)  从html---> head---> meta---> title----> script(把js文件从服务器下载到浏览器本地来,下载完成后开始使用js解释器,进行解析,解析完成后进行执行,执行完成后)---> body

    (4)  解析完成

    (5)  渲染:下载图片,下载图标

    (6)  载入阶段结束

      第二阶段 事件阶段 默认:异步  onload

    (1)  js中访问DOM树:通过document对象进行访问   var n = document.getElementById("div1")

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="13js的基本类型.js"></script>
    </head>
    <body>
        <div id = "d1">div1</div>
        <div id = "d2">div2</div>
    </body>
    </html>
    // 使用document对象来访问DOM树
    var a = document.getElementById("d1");  // 操作DOM获取节点
    console.log(a);
    var b = document.getElementById("d2");
    console.log(b);        

    原因是:当js在head里面,而获取div在body里面,按照载入阶段的同步执行原理,当执行到head里面,发现js,解析js的时候,会执行js代码,根本就获取不到元素,因此都是null。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!-- <script src="13js的基本类型.js"></script> -->
    </head>
    <body>
        <div id = "d1">div1</div>
        <script src="13js的基本类型.js"></script>
        <div id = "d2">div2</div>
    </body>
    </html>
    // 使用document对象来访问DOM树
    var a = document.getElementById("d1");
    console.log(a);
    var b = document.getElementById("d2");
    console.log(b);        

    原因是:html中移动js代码到body中,加载完div1后执行js代码,所以div1能显示,div2不能显示

    如果js还是写在head中,还想让js能获取body里面所有的东西,可以使用延迟加载和异步加载的形式

     

    2. js操作浏览器信息

    window可以操作全局变量

    // DOM BOM 操作浏览器元素
    // windows对象来操作:全局对象 全局的方法
    console.log(window.age);
    var age = 12;
    console.log(window.age);  # 一般用法就是省略windows,其实全局变量都是存储在windows对象里面,当做一个属性
    console.log(age)

    2.1  DOM操作

    (

    2.2 BOM操作

    (1) 弹窗操作 alert()  同步执行

    alert("这里就是弹窗显示的内容");

    (2) 弹窗操作 confirm() 带有返回值的弹窗

    // 这种方式的弹窗会有返回值
    var v = confirm("confirm弹窗,有个返回值");
    console.log(v);

    (3) 弹窗操作 prompt() 输入值的弹窗

    // 这种方式的弹窗会有返回值
    var v = prompt("输入你的姓名:");
    console.log(v);

    (4) 获取浏览器导航栏的信息,输入网址的地方

    window.location

    window.location.reload(); 刷新页面的功能

    window.location.href; 获取页面的url

    window.replace(); 跳转界面

    跳转页面例子

    var v = confirm("是不是想跳转到百度");
    if(v == true){
        window.location.reload();
        window.location.replace("http://www.baidu.com")
    };

    修改代码顺序,就跳转不成功了。点击确定,一直加载弹窗

    var v = confirm("是不是想跳转到百度");
    if(v == true){
        // window.location.reload();
        window.location.replace("http://www.baidu.com");
        window.location.reload();
    };

    这种写法也是,点击确定跳转到百度页面,取消则一直弹窗

    var v = confirm("是不是想跳转到百度");
    if(v == true){
        // window.location.reload();
        window.location.replace("http://www.baidu.com");
    }
    else{
        window.location.reload();
    }

    原因是:刷新页面后,就要重新走一遍,页面加载,同步执行一遍,所以会出现这种持续弹窗的情况。

    加载到新的界面后,就无法回退到原来的界面,window.location.replace()

    (5)  控制浏览器的前进和后退

    window.history.go() 快速的前进和后退  1 前进一个 -1 后退一个 2 前进两个 -2 后退两个  跳转前的页面数据还在

    history 浏览器

    window.history

    window.history.forward() 前进

    window.history.back() 后退 

    跳转后原来页面的数据不在,就是一个页面

    (6) 获取浏览器的信息

    window.navigator

    window.navigator.userAgent

    (7) 获取浏览器的分标率

    window.screen

     

    (8) 计时器

    js代码

    function get_name(){
        alert("我是魔鬼")
    }
    # 时间默认值是毫秒,一秒等于3000毫秒:setInterval是循环执行,表示每隔3000毫秒,执行一次get_name函数
    var t1 = setInterval(get_name,3000);
    # 退出的语句是 clearsetInterval(t1)

    html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="12计时器.js"></script>
    </head>
    <body>
        
    </body>
    </html>

    效果

     

    function get_name(){
        alert("我是魔鬼")
    }
    # setTimeout()表示从加载出网页后,直到3000毫秒执行一次get_name函数,不循环,只执行一次
    var t1 = setTimeout(get_name,3000);
    # 退出的语句是 clearsetTimeout(t1)

     js代码:每隔3秒钟,控制台执行一次函数

    var num = 0;
    function get_name(){
        console.log("num=" + ++num)
    }
    
    var t1 = setInterval(get_name,3000);

    效果:

    ++a 和 a++的区别,++a是先自增,假设 int a = 1,  int b = ++a + 1,那么 a=2,b=3   假设 int a = 1, int b = 1 + a++,那么a=2,b=2

    ++a 是先增后,再执行表达式,++a是先执行表达式,再自增

     

     先循环执行10s,到了10s停止函数

    var num = 0;
    function get_name(){
        console.log("num=" + ++num)
    };
    
    var t1 = setInterval(get_name,1000);
    
    function end(){
        clearInterval(t1)
    };
    
    var t2 = setTimeout(end,50000);
  • 相关阅读:
    我的SWT与数字图像处理总结(1)—重点Image类的介绍
    我的SWT与数字图像处理总结(2)—使用JFreeChart生成灰度直方图
    使用Wiz编写和发布博客园(cnblogs)博客
    RCP之病人信息系统开发总结(2):项目结构分析和重要类分析
    Java与XML(一):采用DOM操作XML文件
    Java实例开发0502 简单的HTTP服务器端
    RCP之病人信息系统开发总结(1):数据库设计
    我的SWT与数字图像处理总结(3)—SWT如何得到图像某个位置的像素值和相应的RGB的值
    对象的保存和载入
    Java与XML(二):使用Dom4j 操作 XML 文件
  • 原文地址:https://www.cnblogs.com/meloncodezhang/p/11962683.html
Copyright © 2011-2022 走看看