码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2020-04-21 00:03:59      阅读：100      评论：0      收藏：0      [点我收藏+]

标签：fun   识别   父节点   lin   另一个   元素   ike   xmlhttp   tle   

从基础知识到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>

技术图片

 

 

移动节点

<!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>

技术图片

 

 

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

<!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>

技术图片

 

 

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>

技术图片

 

 

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>

技术图片

 

 

事件：

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

<!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，不依赖第三方库

技术图片

 

 

跨域的几种实现方式：

JSONP

服务器端设置http header

 

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

 

readyState

技术图片

 

 status

技术图片

 

 

Ajax-跨域和问题解答：

什么是跨域？

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

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

 

可以跨域的三个标签：

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

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

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

script 可以用于JSONP

 

跨域的注意事项：

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

 

JSONP实现原理：

技术图片

 

 

服务器端设置http header

跨域的另一个解决方案

技术图片

 

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

标签：fun   识别   父节点   lin   另一个   元素   ike   xmlhttp   tle   

原文地址：https://www.cnblogs.com/chenyingying0/p/12741273.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！