JS Web API-DOM/BOM/事件/ajax-面试题

最新推荐文章于 2024-05-08 01:32:16 发布

宇宙海里

最新推荐文章于 2024-05-08 01:32:16 发布

阅读量1k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq1365996192/article/details/123694924

版权

本文深入探讨JavaScript Web API，包括DOM操作、BOM处理、事件绑定和Ajax请求。强调DOM性能优化，如避免频繁操作和使用文档片段。讲解事件冒泡与事件代理，以及XMLHttpRequest的使用。最后，讨论了跨域问题和存储机制，如cookie、localStorage和sessionStorage的差异与应用。

摘要由CSDN通过智能技术生成

从JS基础到JS Web API

JS基础知识，规定语法（ECMA 262标准）；JS Web API，网页操作的API（W3C标准）；前者是后者的基础，两者结合才能真正实际应用。

JS Web API

包括DOM、BOM、事件绑定、ajax和存储

DOM

DOM节点操作

property：修改对象属性，不会体现到html结构中；attribute：修改html属性，会改变html结构。两者都有可能引起DOM重新渲染。property形式是一种通过修改后获取js的属性去改变样式或页面渲染结构的一种形式；setAttribute和getAttribute。尽量用property操作。

DOM结构操作

新增/插入，移动节点；获取子元素列表，获取父元素；删除子元素。

DOM性能

DOM操作非常“昂贵”，因此要避免频繁的DOM操作，对DOM查询做缓存（缓存DOM操作的结果再使用而不是在使用的时候计算结果），将频繁操作改为一次性操作。

//将频繁操作改为一次性操作，不是在循环中将li插入，而是创建一个文档片段，循环完成之后再把元素都插入

//创建一个文档片段，此时还没有插入到DOM树中
const frag = document.createDocumentFragment()

//执行插入
for(let x=0;x<10;x++) {
    const li = document.createElement('li')
    lki.innerHTML = 'List item' + x
    frag.appendChild(li)
}

//都完成之后，再插入到DOM树中
listNode.appendChild(frag)

DOM是哪种数据结构？树（DOM树）

DOM操作常用API：DOM节点操作，DOM结构操作，attribute和property

attribute和property区别：property：修改对象属性，不会体现到html结构中；attribute：修改html属性，会改变html结构。两者都有可能引起DOM重新渲染。尽量用property操作。

BOM操作

识别浏览器的类型；分析拆解url各个部分

navigator：浏览器的信息；screen：屏幕的信息，如宽度高度等；location：地址的信息，url；history：页面前进后退的信息；

navigator.userAgent（ua）浏览器的信息

事件

事件绑定

addEventListener

事件冒泡

基于DOM树形结构，事件会顺着触发元素往上冒泡，应用场景：代理。给父元素绑定的事件，点击它的子元素也会触发。因为事件冒泡的规则。使用.stopPropagation来阻止事件冒泡。

事件代理

当需要对多个元素绑定相同的事件时，可以将这个事件绑定在它们的父元素身上，利用冒泡规则来实现。优点：代码简介，减少浏览器内存占用。但是不要滥用。

一个具有事件代理的事件绑定函数，通用的事件绑定函数

function bindEvent(elem,type,selector,fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            //代理绑定
            if (target.matches(selector)) {
                fn.call(targrt,event)
            }
        } else {
            //普通绑定
            fn.call(target,event)
        }
    })
}

ajax

XMLHttpRequest

xhr.readyState

一般等于4-（完成）响应内容解析完成，可以在客户端调用。

xhr.status

2xx-表示成功处理请求，如200；3xx-需要重定向，浏览器直接跳转，如301，302，304；4xx-客户端请求错误，如404，403；5xx-服务器端错误。

跨域

同源策略（仅限浏览器）

ajax请求时，浏览器要求当前网页和server必须同源

同源：协议、域名、端口，三者必须一致

如前端：http://localhost:8080// ; server:https://b.com/api/xxx。两者并不同源。

加载图片，css，js可无视同源策略

跨域

所有的跨域都必须经过server端允许和配合；未经server端允许就实现跨域，说明浏览器有漏洞，危险信号

JSONP

访问一个服务器地址，服务器可以任意动态拼接数据返回，只要符合html格式要求，又<script>可绕过跨域限制，所以<script>就可以获得跨域的数据，只要服务端愿意返回

CORS-服务器设置http header

手写一个Ajax（封装成Promise的形式）

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) {
                if(xhr.Status === 200) {
                    resolve(
                        JSON.parse(xhr.reponseText)
                    )
                } else if (xhr.status === 404) {
                    reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)
    }}
    return p
}

const url = '/data' //一个正确的地址
ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err))

跨域的实现方式

JSONP，CORS