前端技术——6——JavaScript-BOMDOM对象

Posted kaoa000

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端技术——6——JavaScript-BOMDOM对象相关的知识,希望对你有一定的参考价值。

BOM——浏览器对象,使javascript有能力与浏览器对话,包括Window对象、History对象、Location对象。

window对象

Window对象是内置对象,已经实例化为window,alert()即是window对象的方法,完整的写法是window.alert()。还包括:
confirm():有两个按钮,确定、取消,alert只有确定。确定返回值true,取消返回值false。
propmt():有一个文本输入框,确定返回输入框的内容,取消返回值为null。
open():打开一个新的浏览器窗口或查找一个已命名的窗口。
close():关闭浏览器窗口。
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式,设定定时器。
clearInterval():取消由setInterval()设置的定时器。
setTimeout():在指定的毫秒数后调用函数或计算表达式。
clearTimeout():取消由setTimeout()方法设置的timeout。
scrollTo():把内容滚动到指定的坐标。

定时器举例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="clock">
<input type="button" value="begin" onclick="begin_click();">
<input type="button" value="end" onclick="end_m();">
<script>
    function mytime() 
        var date_obj = new Date();
        return date_obj.toLocaleString();
    
    function begin_m() 
        var stime = mytime();
        var ret = document.getElementById("clock");
        ret.value = stime;
    
   var ID1;
    function begin_click() 
        begin_m();
        ID1 = setInterval(begin_m,1000); //设置一个定时器
    
    function end_m() 
        clearInterval(ID1);  //清除定时器
    

</script>
</body>
</html>

运行结果:

当点击begin按钮时,在文本框中每隔1秒执行一次begin_m,即显示一次时间,按end,停止。

有一个bug,就是点击多次begin后,end就不好用了,因为每次调用setInterval(),都会生成一个新的定时器,ID1变量保存的是最后一次点击begin按钮时生成的定时器,end结束的只是最后一次的定时器,前面几次的还在运行。修改:

   var ID1;
    function begin_click() 
        if (ID1 == undefined)
            //判断是否存在定时器了,如果没有存在,生成新的定时,否则只使用已生成的
            begin_m();
            ID1 = setInterval(begin_m, 1000); //设置一个定时器
        
    
    function end_m() 
        clearInterval(ID1);  //清除定时器
        ID1 = undefined;  
        //清除定时器的同时,将ID1置为undefined,下次按begin时可以重新开始
    

setTimeout使用:

 History对象

三种方法:forward()、back()、go()

举例,两个页面,第一个页面点击一个连接进入第二个页面,第二个页面点击后退回到前一个页面,第一个页面再点击前进,进入第二个:

第一个页面:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="前进" onclick="func1();">
<a href="history2.html">qqqqqqqqqqqq</a>
<script>
    function func1()
        history.forward();
    
</script>
</body>
</html>

第二个:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="后退" onclick="func2();">
<script>
    function func2() 
        history.back();
    
</script>
</body>
</html>

 属性length,保存了访问了多少历史页面

Location对象

方法:reload(),重新加载,刷新页面的作用。

<input type="button" value="重载" οnclick="history.reload();">

DOM对象(DHTML):——Document Object Model

DOM定义了访问HTML和XML文档的标准:

W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM标准被分为3个不同的部分:

  • 核心DOM--针对任何结构化文档的标准模型
  • XML DOM--针对XML文档的标准模型
  • HTML DOM--针对HTML文档的标准模型

XML DOM定义了所有XML元素的对象和属性,以及访问它们的方法。

HTML DOM定义了所有HTML元素的对象和属性,以及访问它们的方法。

DOM节点

HTML文档中的所有内容都是节点(NODE):

  • 整个文档是一个文档节点(document对象)
  • 每个HTML元素是元素节点(element对象)
  • HTML元素内的文本是文本节点(text对象)
  • 每个HTML属性是属性节点(attribute对象)
  • 注释是注释节点(comment对象)

节点(NODE)对象有自身属性和导航属性:

节点(自身)属性:

  • attributes -- 节点(元素)的属性节点
  • node Type -- 节点类型
  • node Value -- 节点值
  • node Name -- 节点名称
  • innerHTML -- 节点(元素)的文本值

导航属性:

  • parentNode -- 节点(元素)的父节点(推荐)
  • firstChild -- 节点下第一个子元素
  • lastChild -- 节点下最后一个子元素
  • childNodes -- 节点(元素)的子节点

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <div>hello div</div>
        <p>hello ppp</p>
    </div>

<script>
    var ele = document.getElementById("div1");
    alert(ele);
</script>
</body>
</html>

 变量el是HTMLDivElement对象。

 

 

 

 所以找孩子的方法、属性似乎与我们想要的结果不符,很少使用。

找父节点是唯一的:

推荐使用以下属性:进行文档树导航

  • parentElement    //父节点标签元素
  • children      // 所有子标签
  • firstElementChild  // 第一个子标签元素
  • lastElementChild   //最后一个子元素标签
  • nextElementSibling   // 下一个兄弟标签元素
  • previousElementSibling    //上一个兄弟标签元素
 var ele = document.getElementById("div1");
    var ele2 = ele.firstElementChild;
    alert(ele2.nodeName);   // DIV
    var ele3 = ele.lastElementChild;
    alert(ele3.nodeName);  // P
    var eles4 = ele.children;
    alert(eles4);   //[object HTMLCollection]是一个集合了
    alert(eles4.length);   // 2
    alert(eles4[0]);  //[object HTMLDivElement]
    alert(eles4[0].nodeName);   //DIV
    for(var i=0;i<eles4.length;i++)
        console.log(eles4[i]);
    
    var ele5 = document.getElementById("div1").firstElementChild;
    var ele6 = ele5.nextElementSibling;  //找到ele5的下一个兄弟标签元素
    alert(ele6.nodeName);  //就是P

 访问HTML元素(节点),等同于访问节点

以不同的方式来访问HTML元素:

页面查找:

  • 通过使用getElementById()方法
  • 通过使用getElementsByTagName()方法
  • 通过使用getElementsByClassName()方法
  • 通过使用getElementsByName()方法
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">hello
    <div class="div2">hello2</div>
    <div class="div3" name="abc">hello3</div>
    <p>hello p</p>
</div>
<script>
    //通过class找到的是元素的数组
    var ele = document.getElementsByClassName("div2");//得到的是一个数组
    var ele2 = ele[0].nextElementSibling;
    alert(ele2.innerHTML); // hello3
    //通过tag
    var tag = document.getElementsByTagName("p");
    alert(tag[0].nodeName);// P
    //通过name
    var elen = document.getElementsByName("abc");
    alert(elen[0].innerHTML);// hello3
    // 以上都是全局查找
</script>
</body>
</html>

局部查找:

先选定一个元素,然后在这个元素里查找,即这个局部就是选定的这个元素内:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">hello
    <div class="div2">hello2</div>
    <div class="div3" name="abc">hello3
        <p class="ddd" name="ccc">hello inner</p>
    </div>
    <p>hello p</p>
</div>
<script>
    var ele = document.getElementsByClassName("div3");
    var ele2 = ele[0].getElementsByTagName("p"); //只在div3下找p标签,通过tag
    alert(ele2[0].innerHTML);// hello inner
    // var ele3 = ele[0].getElementById("");//不支持ID
    var ele4 = ele[0].getElementsByClassName("ddd");//通过class查找
    alert(ele4[0].innerHTML); // hello inner
    var ele5 = ele[0].getElementsByName("ccc");//不支持通过name查找
    //以上是局部查找,不支持ID和name查找
</script>
</body>
</html>

HTML DOM Event(事件)

HTML4.0新特性之一是有能力使HTML事件触发浏览器中的动作(action),比如用户点击某个HTML元素时启动一段JavaScript代码。以下属性可插入到HTML标签来定义事件动作:

  • onclick           当用户点击某个对象时调用的事件句柄
  • ondblclick      当用户双击某个对象时调用的事件句柄
  • onfocus          元素获得焦点    //光标进入输入框
  • onblur             元素失去焦点  //应用场景:表单验证,用户离开某个输入框时,代表输入完成,进行验证
  • onchange      域的内容被改变    //应用场景:用于表单元素,当元素内容被改变时触发(三级联动)
  • onkeydown    某个键盘按键被按下   //应用场景:当用户在最后一个输入框按下回车键时,表单提交。
  • onkeypress    某个键盘按键被按下并松开
  • onkeyup         某个键盘按键被松开
  • onload            一张页面或一副图像完成加载。
  • onmousedown   鼠标按钮被按下
  • onmousemove   鼠标被移动
  • onmouseout       鼠标从某个元素移开
  • onmouseover     鼠标移到某个元素之上
  • onselect             文本被选中
  • onsubmit             确认按钮被点击

事件的监听者是操作系统。

对于按键事件,keyCode属性声明了被敲击的键生成的Unicode字符码。对于keydown和keyup事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘布局相关。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="press" onkeydown="fun1(event);">
<script>
    function fun1(e) 
        alert(e.keyCode);
    
</script>
</body>
</html>

onsubmit事件只能绑定到表单上。

绑定事件的另一种方法:

var obj = document.getElementsByClassName("kkk")[0];
obj.οnclick=function()
        语句;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="id1" onsubmit="return check();">  // 这里要注意,一定要加return才行
    <input type="text" name="username">
    <input type="submit" value="submit">
</form>
<script>
    function check() 
        alert("验证失败!");
        return false;

    
    //对于onsubmit事件的函数,需要有返回值,值为布尔型,true则提交,false则不提交

    function check(e) 
        e.preventDefault();//阻止默认动作,也可实现上面的阻止提交动作
    
    //第二种绑定事件的方式
    var form_1 = document.getElementById("id1");
    form_1.onsubmit = function () 
        alert("shibai");
        return false;
    
    //这种另外一种实现绑定的方式,比较常用
</script>
</body>

关于在form标签中直接使用onsubmit必须使用return的解释:

onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;
和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,如
οnsubmit="
    alert('haha'); // 内置函数
    submitTest();  // 自定义函数
    alert(this.tagName); // 用到了this关键词
    ......(任意多条语句)   
    return false;
"
就相当于
Form.prototype.onsubmit = function()
    alert('haha'); // 内置函数
    submitTest();  // 自定义函数
    alert(this.tagName); // 用到了this关键词
    ......(任意多条语句)   
    return false;
;

这样的话你就覆写了(override)其默认方法(默认返回true)
大家注意到方法体中可以用this这个关键词,这里即代表了<form>的对象实例。
经过这样的分析后,以上情况就不难理解了:
<form action="index.jsp" method="post" οnsubmit="submitTest();">
这样写,override方法的效果为:
Form.prototype.onsubmit = function()
    submitTest();
;
在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而
<form action="index.jsp" method="post" οnsubmit="return submitTest();">
override方法的效果为:
Form.prototype.onsubmit = function()
    return submitTest();
;
这样,我们利用到了它的返回值,达到了预期效果。
这样理解的话我想印象会深刻得多,就不易出错了

事件传播

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1
            height: 200px;
            width: 200px;
            background-color: #84a42b;
        
        #div2
            height: 100px;
            width: 100px;
            background-color: #336699;
        
    </style>
</head>
<body>
<div id="div1" onclick="alert('div1');">
    <div id="div2" onclick="alert('div2');"></div>
</div>
</body>
</html>

 点击div2时,会先弹出alert窗口div2,后又弹出div1,这就是事件传播。

在div2中增加:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1
            height: 200px;
            width: 200px;
            background-color: #84a42b;
        
        #div2
            height: 100px;
            width: 100px;
            background-color: #336699;
        
    </style>
</head>
<body>
<div id="div1" onclick="alert('div1');">
    <div id="div2" onclick="f1(event);"></div>
</div>
<script>
    function f1(e) 
        alert("div2");
        e.stopPropagation();  //阻止事件传播
    
</script>
</body>
</html>

增删改查,node的CURD

增:
createElement(name)    创建元素
appendChild()   将元素添加

删:
获得要删除的元素,获得它的父元素,使用removeChild()方法删除

改:
第一种方式:使用上面增和删结合完成修改
第二种方式:使用setAttribute()方法修改属性,使用innerHTML属性修改元素的内容

查:
使用之前的方法,如document的getElementsBy。。。方法

修改HTML DOM包括以下的方面:

  • 改变HTML内容:最简单方法是使用innerHTML,innerText
  • 改变CSS样式:document.getElementsBy。。。("").style.color="red";
  • 改变HTML属性:elementNode.setAttribute(name,value)、elementNode.getAttribute(name)<---------------->elementNode.value(DHTML)
  • 创建新的HTML元素:createElement(name)
  • 删除已有的HTML元素:elementNode.removeChild(node)
  • 关于class的操作:elementNode.className、elementNode.classList.add、elementNode.classList.remove
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1
            height: 200px;
            background-color: #84a42b;
        
        .big1
            font-size: 40px;
        
        .small1
            font-size: 10px;
        
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">hello div2</div>
    <p>hello ppp</p>
</div>
<input type="button" value="添加P" onclick="add();"> <!--添加一个标签-->
<input type="button" value="删除P" onclick="del();"><!--//删除一个标签-->
<input type="button" value="字体增大" onclick="big();">
<input type="button" value="字体减少" onclick="small();">
<script>
    function add() 
        var ele = document.getElementById("div1");
        var son = document.createElement("P");
        son.innerHTML="hello PPPPPPPPPPP"
        ele.appendChild(son);
    
    function del() 
        var ele = document.getElementById("div1");
        var lastson = ele.lastElementChild;
        ele.removeChild(lastson);
    
    // function big() 
    //     var ele = document.getElementById("div2");
    //     ele.style.fontSize="40px";
    // 
    //     function small() 
    //     var ele = document.getElementById("div2");
    //     ele.style.fontSize="10px";
    // 
    //上面的修改样式的方法不推荐使用,推荐使用下面的方式,使用class修改
    function big() 
        var ele = document.getElementById("div2");
        // ele.className="big1";
        ele.classList.add("big1");
    
    function small() 
        var ele = document.getElementById("div2");
        // ele.className="small1";
        ele.classList.add("small1");
    
</script>
</body>
</html>

上面的字体变大变小有点问题,修改如下:

 function big() 
        var ele = document.getElementById("div2");
        // ele.className="big1";
        ele.classList.remove("small1");
        ele.classList.add("big1");
    
    function small() 
        var ele = document.getElementById("div2");
        // ele.className="small1";
        ele.classList.remove("big1");
        ele.classList.add("small1");
    

 使用classList,只是添加,并且是添加到class列表中,所以添加后会一直存在,改变时需要删除。

关于Event对象:

Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传递给事件函数,我们获得仅仅需要接收一下即可。

改变HTML属性:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="div1"> hello div1</div>
<input id="add" type="button" value="add">

<script>
    var ele = document.getElementById("add");
    ele.onclick = function () 
        var ele1 = document.getElementsByClassName("div1")[0];
        var img = document.createElement("img");
        img.setAttribute("src","1.jpg");
        // img.src="1.jpg";   //第二种设置元素属性方式,是DHTML语法
        ele1.appendChild(img);
    
</script>
</body>
</html>

关于a标签的补充:

<a href="javascript:viod(0)" οnclick="del(this)">hello</a>
协议名:协议内容,将a标签自身功能阉割,取消跳转功能。

this参数:代表调用函数的元素本身。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello1
    <div onclick="show(this);">hello2</div>
<!--    //this代表<div onclick="show(this);">hello2</div>这个元素-->
    <div>hello3</div>
</div>
<script>
    function show(s) 
        console.log(s.innerHTML); //hello2
    
</script>
</body>
</html>

模态对话框

点击一个按钮,弹出一个对话框,背景变暗,除弹出的对话框,其他无法操作:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
            margin: auto 0;
        
        #div1
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 2000px;
            background-color: #b4b4b4;
            z-index: 1000;
        
        #div2
            position: fixed;
            width: 100%;
            height: 2000px;
            background-color: red;
            opacity: 0.3;
            z-index: 1001;
        
        #div3
            height: 300px;
            width: 300px;
            background-color: #2459a2;
            position: absolute;
            top:50%;
            left: 50%;
            z-index: 1002;
            margin-left: -150px;
            margin-top: -150px;
        
        .hide
            display: none;
        
    </style>
</head>
<body>
<div id="div1">
    <input type="button" value="click" onclick="show();">
</div>
<div id="div2" class="div hide"></div>
<div id="div3" class="div hide">
    <input type="button" value="cancel" onclick="cancel();">
</div>
<script>
    function show() 
        var div_t = document.getElementsByClassName("div");
        for(var i=0;i<div_t.length;i++)
            div_t[i].classList.remove("hide");
        
    
    function cancel() 
        var div_t = document.getElementsByClassName("div");
        for(var i=0;i<div_t.length;i++)
            div_t[i].classList.add("hide");
        
    
</script>
</body>
</html>

结果画面:

 二级联动:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="province" onchange="func1(this);">

</select>

<select id="city">

</select>

<script>
    var data_p="北京":["朝阳","海淀"],"山东":["济南","烟台"],"河北":["石家庄","张家口"]
    //数据可以从数据库提取,以后动态形成
    var pro = document.getElementById("province");
    var city_t = document.getElementById("city");
    for(var i in data_p)
        var option_pro = document.createElement("option");
        option_pro.innerHTML=i;
        pro.appendChild(option_pro);
    
    function func1(s) 
        var pro_n = (s.options[s.selectedIndex]).innerHTML;
        // for(var j=0;j<city_t.children.length;j++)
        //     city_t.removeChild(city_t.children[j--]);
        // //循环删除city下的option选项,要注意这个算法,options是动态的
        //删除一个孩子,下一次判断时,即j<city_t.children.length;,Length减1
        //实际还可以写成city_t.removeChild(city_t.children[0]);j=j-1

        city_t.options.length = 0;
        //在选择其他选项前,要把当前的选项清空,此方法简洁
        for(var k in data_p[pro_n])
            var option_city = document.createElement("option");
            option_city.innerHTML=data_p[pro_n][k];
            city_t.appendChild(option_city);
        

    
    //参数s是this对象,代表当前操作的元素,这里即id为province的select元素
    //this.options即s.options是select下的所有option元素,相当于选select的所有child元素
    //selectedIndex保存了本次选择的option项的索引,最后innerHTML取出省份名称

    // function func1() 
    //     var pro = document.getElementById("province");
    //     console.log(pro.value);//显示选择项的value值
    // 

</script>
</body>
</html>

左右选择:

html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box_l,#choice,#box_r
            display: inline-block;
        
        #choice
            margin-bottom: 80px;
        
    </style>
</head>
<body>
<div id="box_l">
    <select id="sele_left" multiple size="10">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
        <option>选项6</option>
    </select>
</div>
<div id="choice">
    <input type="button" value="------->" onclick="addsele();"><br>
    <input type="button" value="====>" onclick="addall();"><br>
    <input type="button" value="<-------" onclick="removesele();"><br>
    <input type="button" value="<====" onclick="removeall();">
</div>
<div id="box_r">
    <select multiple size="10" id="sele_right">
        <option>选项7</option>
    </select>
</div>
<script>
    var right_se = document.getElementById("sele_right");
    var left_se = document.getElementById("sele_left");
    function addsele() 
        var op = left_se.children;
        for(var i = 0;i<op.length;i++)
            if(op[i].selected==true)
                op[i].selected=false;
                right_se.appendChild(op[i]);
                i--;  //这一步的逻辑很重要,类似上例的
                //右边添加的同时,左边的同时删除。
                //appendChild是从一个元素向另一个元素中移动元素,注意是移动
            
        
    
    function addall() 
        var op = left_se.children;
        for (var i=0;i<op.length;i++)
            op[i].selected = false;
            right_se.appendChild(op[i]);
            i--;
        
    
    function removesele() 
        var op = right_se.children;
        for(var i=0;i<op.length;i++)
            if(op[i].selected == true)
                op[i].selected=false;
                left_se.appendChild(op[i]);
                i--;
            
        
    
    function removeall() 
        var op = right_se.children;
        for (var i=0;i<op.length;i++)
            op[i].selected = false;
            left_se.appendChild(op[i]);
            i--;
        
    
</script>
</body>
</html>

 正反选:实现如下功能,可以一个一个单选,可以反选,可以全选

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="seleall();">
<input type="button" value="取消" onclick="cancelall();">
<input type="button" value="反选" onclick="reverseall();">
<hr>
<table border="1px" class="box">
    <tr>
        <td><input type="checkbox"></td>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>1111111</td>
        <td>2222222</td>
        <td>3333333</td>
    </tr>
</table>
<script>
    function seleall() 
        var t1 = document.getElementsByClassName("box")[0];
        var inputs = t1.children[0].getElementsByTagName("input"); //属于局部查找
        //对于table标签,它的孩子是tbody,虽然我们没写,但浏览器会增加
        for(var i in inputs)
            inputs[i].checked=true;
        
    
    function cancelall() 
        var t1 = document.getElementsByClassName("box")[0];
        var inputs = t1.children[0].getElementsByTagName("input");
        for(var i in inputs)
            inputs[i].checked=false;
        
    
    function reverseall() 
        var t1 = document.getElementsByClassName("box")[0];
        var inputs = t1.children[0].getElementsByTagName("input");
        for(var i in inputs)
            if(inputs[i].checked)
                inputs[i].checked = false;
            else
                inputs[i].checked = true;
            
        
    
</script>
</body>
</html>

js作用域

js作用域类似python,if、while等控制语句并没有自己的作用域,而函数是有自己的作用域;

嵌套函数的作用域,先内后外。

闭包:


    var city = "bj";
    function func() 
        var city = "sh";
        function  inner() 
            // var city = "LF";
            console.log(city);
        
        return inner;
    
    var ret = func();
    ret();  //inner中的city=“LF”注释掉,这里结果就是sh,闭包,不注释,就是LF

以上是关于前端技术——6——JavaScript-BOMDOM对象的主要内容,如果未能解决你的问题,请参考以下文章

字节跳动重磅发布 2022 年 6 大前端技术发展趋势

给前端开发的 6 点建议

2019给前端开发的 6 点建议

给1-3年的前端 6 点诚心建议

前端技术——6——JavaScript-BOMDOM对象

你可能不知道,前端这6个有用的技术可以这么酷!