欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS DOM、BOM事件常见面试题分析

程序员文章站 2022-03-26 19:46:23
从基础知识到JSWebAPI： DOM操作 BOM操作 事件绑定 AJAX请求（包含http协议） 存储 DOM可以理解为：浏览器把拿到的html代码，结构化成一个浏览器能识别并且js可操作的一个模型 DOM节点操作： ......

从基础知识到jswebapi：

dom操作

bom操作

事件绑定

ajax请求（包含http协议）

存储

 

dom可以理解为：浏览器把拿到的html代码，结构化成一个浏览器能识别并且js可操作的一个模型

dom节点操作：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1" class="div1">
        <p id="p1" data-name="p1-data-name">this is p1</p>
        <p id="p2">this is p2</p>
    </div>
    <div id="div2">
        <p id="p3">this is p3</p>
        <p id="p4">this is p4</p>
    </div>

    <script>
        //获取dom节点
        var div1=document.getelementbyid('div1'); //单元素
        console.log(div1);//<div id="div1" class="div1">..</div>

        var divs=document.getelementsbytagname('div'); //集合
        console.log(divs);//htmlcollection(2) [div#div1.div1, div#div2, div1: div#div1.div1, div2: div#div2]
        console.log(divs.length);//2
        console.log(divs[0]);//<div id="div1" class="div1">..</div>

        //property
        var ps=document.queryselectorall('p'); //集合
        var p=ps[0];
        console.log(p.style.width);//获取样式
        p.style.width='300px';//设置样式
        console.log(p.style.width);//获取样式 300px
        console.log(p.classname);
        p.classname='p1';
        console.log(p.classname);//p1

        //获取nodename和nodetype
        console.log(p.nodename);//p
        console.log(p.nodetype);//1

        //property
        var obj={x:10,y:20};
        console.log(obj.x);//10

        var p=document.getelementsbytagname('p')[0];
        console.log(p.tagname);//p

        //attribute
        console.log(p.getattribute('data-name'));
        p.setattribute('data-name','cyy');//p1-data-name
        console.log(p.getattribute('style'));
        p.setattribute('style','font-size:30px');//width: 300px;

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

 

dom结构操作：

新增节点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1">
        <p id="p1">this is p1</p>
        <p id="p2">this is p2</p>
    </div>
    <div id="div2">
        <p id="p3">this is p3</p>
        <p id="p4">this is p4</p>
    </div>

    <script>
        //新增节点
        var p=document.createelement('p');
        p.innerhtml='new p';
        var div1=document.getelementbyid('div1');
        div1.appendchild(p);

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

JS DOM、BOM事件常见面试题分析

 

 

移动节点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1">
        <p id="p1">this is p1</p>
        <p id="p2">this is p2</p>
    </div>
    <div id="div2">
        <p id="p3">this is p3</p>
        <p id="p4">this is p4</p>
    </div>

    <script>
        //移动节点
        var p4=document.getelementbyid('p4');
        var div1=document.getelementbyid('div1');
        div1.appendchild(p4);
        console.log(p4.parentnode);//<div id="div1">..</div>

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

JS DOM、BOM事件常见面试题分析

 

 

获取子元素节点、获取父元素节点、删除节点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1">
        <p id="p1">this is p1</p>
        <p id="p2">this is p2</p>
    </div>
    <div id="div2">
        <p id="p3">this is p3</p>
        <p id="p4">this is p4</p>
    </div>

    <script>
        //移动节点
        var p4=document.getelementbyid('p4');
        var div1=document.getelementbyid('div1');
        //获取父元素
        console.log(p4.parentnode);//<div id="div1">..</div>
        //获取子元素
        console.log(div1.childnodes);//nodelist(5) [text, p#p1, text, p#p2, text]
        console.log(div1.childnodes[0].nodetype);//text  3
        console.log(div1.childnodes[1].nodetype);//p  1
        console.log(div1.childnodes[0].nodename);//#text
        console.log(div1.childnodes[1].nodename);//p
        //获取非空白文本的子元素
        for(var i=0;i<div1.childnodes.length;i++){
            if(div1.childnodes[i].nodetype!==3){
                console.log(div1.childnodes[i]);
            }
        }

        //删除节点
        var childnodes=div1.childnodes;
        div1.removechild(childnodes[1]);

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

JS DOM、BOM事件常见面试题分析

 

 

dom是哪种基本的数据结构？ 树

 

dom操作的常用api有哪些？

获取dom节点、以及节点的property和attribute

获取父节点、获取子节点

新增节点、删除节点

 

dom操作的property和attribute有哪些区别？

property是js对象的属性的修改

attribute是html标签的属性的修改

 

bom操作：

如何检测浏览器的类型

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>

    <script>
        var ua=navigator.useragent;
        console.log(ua);//mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/74.0.3729.157 safari/537.36
        var ischrome=ua.indexof('chrome');
        console.log(ischrome>0?'ischrome':'isnotchrome');

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

JS DOM、BOM事件常见面试题分析

 

 

url拆解：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>

    <script>
        console.log(location.protocol);//协议
        console.log(location.host);//域
        console.log(location.pathname);//文件名
        console.log(location.search);//参数（？后面的）
        console.log(location.hash);//锚（#后面的）
        console.log(location.href);//完整的url

        //改变链接地址
        //location.href="http://www.baidu.com";

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

JS DOM、BOM事件常见面试题分析

 

 

事件：

封装一个通用的事件绑定函数

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1">
        <a id="p1">激活</a>
        <a id="p2">取消</a>
    </div>
    <div id="div2">
        <a id="p3">取消</a>
        <a id="p4">取消</a>
    </div>

    <script>
        function bind(ele,type,fn){
            ele.addeventlistener(type,fn);
        }

        var p3=document.getelementbyid('p3');
        bind(p3,'click',function(e){
            e.preventdefault();
            console.log(p3.innerhtml);
        })

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

 

事件冒泡：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1">
        <a id="p1">激活</a>
        <a id="p2">取消</a>
    </div>
    <div id="div2">
        <a id="p3">取消</a>
        <a id="p4">取消</a>
    </div>

    <script>
        function bind(ele,type,fn){
            ele.addeventlistener(type,fn);
        }

        var p1=document.getelementbyid('p1');
        var body=document.body;
        bind(p1,'click',function(e){
            e.stoppropagation();//阻止事件冒泡
            console.log('激活');
        });
        bind(body,'click',function(e){
            e.stoppropagation();
            console.log('取消');
        });

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

 

事件代理：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1">
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <p id="p1">激活</p>
        <p id="p2">取消</p>
    </div>
    <div id="div2">
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>

    <script>
        function bind(ele,type,fn){
            ele.addeventlistener(type,fn);
        }

        var div1=document.getelementbyid('div1');
        bind(div1,'click',function(e){
            e.preventdefault();
            console.log(e.target);
            if(e.target.nodename==='a'){
                console.log('clicked');
            }            
        });

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

 

完善通用的事件绑定函数：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no">
    <title>demo</title>
    <script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.js"></script>
</head>
<body>
    <div id="div1">
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <p id="p1">激活</p>
        <p id="p2">取消</p>
    </div>
    <div id="div2">
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>

    <script>
        function bind(ele,type,selector,fn){
            if(fn==null){
                fn=selector;
                selector=null;
            }
            ele.addeventlistener(type,function(e){
                if(selector){
                    //代理
                    //如果元素被指定的选择器字符串选择，element.matches() 方法返回true; 否则返回false。
                    if(e.target.matches(selector)){
                        fn.call(e.target,e);
                    }
                }else{
                    fn(e);
                }
            })
        }

        var div1=document.getelementbyid('div1');
        var p1=document.getelementbyid('p1');
        bind(div1,'click','a',function(e){
            console.log(this.innerhtml);        
        });
        bind(p1,'click',function(e){
            console.log(p1.innerhtml);        
        });

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

 

ajax-xmlhttprequst：

手动编写一个ajax，不依赖第三方库

JS DOM、BOM事件常见面试题分析

 

 

跨域的几种实现方式：

jsonp

服务器端设置http header

 

ie兼容性问题：不用深究，会简单处理即可

 

readystate

JS DOM、BOM事件常见面试题分析

 

 status

JS DOM、BOM事件常见面试题分析

 

 

ajax-跨域和问题解答：

什么是跨域？

浏览器有同源策略，不允许ajax访问其他域的接口

跨域条件：协议、域名、端口，有一个不同，就属于跨域

 

可以跨域的三个标签：

允许跨域加载资源（但如果对方做了防盗链处理就不行了）

img 用于打点统计，统计网站可能是其他域

link script 可以使用cdn，cdn也是其他域

script 可以用于jsonp

 

跨域的注意事项：

所有的跨域请求都必须经过信息提供方允许

 

jsonp实现原理：

JS DOM、BOM事件常见面试题分析

 

 

服务器端设置http header

跨域的另一个解决方案

JS DOM、BOM事件常见面试题分析

 

上一篇： 如何去掉JSON数据key的双引号实例教程

下一篇： AFNetworking源码解析与面试考点思考

推荐阅读