碼上歡樂
相關內容    簡體    繁體

JS DOM、BOM事件常見面試題分析

本文轉載自   查看原文   2020-04-20 22:56   1137    JavaScript / js /es6

從基礎知識到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

跨域的另一個解決方案

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 JS原型鏈常見面試題分析 js面試題-----DOM操作和BOM操作 常見面試題 Django、Python常見面試題 rabbitmq常見面試題 flink常見面試題 vue常見面試題匯總 Mybatis常見面試題(轉) Redis 常見面試題 Docker 常見面試題匯總
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM