JS Web API常考面试和知识点总结

JS Web API

  • DOM

    • DOM是那种数据结构
      树(DOM树)
    • DOM操作的常用API
      见知识点
    • attr和property的区别
      property:修改对象属性,不会提现到html结构中
      attribute:修改html属性,会改变html结构,两者都可能引起DOM重新渲染
    • 一次性插入多个DOM节点,考虑性能
      使用fragment,DOM节点缓存
  • BOM

    • 如何识别浏览器的类型
      网上搜索UA方案
    • 分析拆解URL各个部分
      查看location相关API
  • 事件

    • 编写一个通用的事件监听函数
    function bindEvent(ele, type, selector, fn) {
        if (fn == null) {
            fn = selector
            selector = null
        }
        ele.addEventListener(type, function (e) {
            const target = e.target;
            if (selector) {
                // 代理
                if (target.matches(selector)) {
                    fn.call(target, event)
                }
            } else {
                // 普通
                fn.call(target, event)
            }
        })
    }
    
    • 事件冒泡的流程
      见知识点2
    • 无限下拉的图片列表,如何监听每个图片的点击
      见知识点3

DOM知识点

  1. DOM本质
    DOM本质是一棵类似于xml结构的树,全称为Document Object Model
  2. DOM节点操作
    1. 获取DOM节点:如document.getElementById(‘div’)
    2. property: 节点的原生属性,如imgDom.src
    3. attribute: 节点的自定义属性,如imgDom.setAttribute(‘index’, 1)
  3. DOM结构操作
    1. createElement
    2. appendChild
    3. removeChild
  4. DOM性能
    1. 避免频繁地操作DOM
    2. 对DOM查询做缓存,举个例子:
        // 缓存查询结果
        const pList = document.getElementsByClassName('p');
        const length = pList.length;
        for (let i = 0; i < length; i++) {
            // 只进行一次DOM查询
        }
    
    1. 将频繁操作改为一次操作,举个例子:
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < 10; i++) {
            // 只进行一次DOM查询
            let li = document.createElement('li')
            li.innerHTML = i + '';
            fragment.appendChild(li)
        }
        document.getElementById('list').appendChild(fragment)
    

BOM知识点

  1. navigator
    用于识别浏览器的api
  2. screen
    查看屏幕相关信息
  3. location
    用于查看浏览器url信息,location.protocol,location.host,location.search
  4. history
    用于设置浏览器后退和前进,history.back()、history.forward()

事件知识点

  1. 事件绑定
   function bindEvent(ele, type, fn, options = false) {
        if (ele.addEventListener) {
            ele.addEventListener(type, fn, options)
        } else if (ele.attachEvent) {
            ele.attachEvent(`on${type}`, fn)
        } else {
            ele[`on${type}`] = fn
        }
    }
    const a = document.getElementById('link');
    bindEvent(a, 'click', e => {
        e.preventDefault(); // 阻止默认行为
        alert('clicked')
    })
  1. 事件冒泡
    事件冒泡即对付元素绑定的点击事件,子元素被点击时,事件会向上冒泡,最终父元素的点击事件也会被触发。举个例子
    <div class="container">
        <p>文本一p>
        <p>文本二p>
        <p>文本三p>
    div>
    <script>
        const body = document.body
        const container = document.getElementsByClassName('container')
        bindEvent(container, 'click', function (e) {
            console.log('container cliced', e.target)
        })
        bindEvent(body, 'click', function (e) {
            // p标签被点击时,该事件也会被触发
            console.log('body cliced', e.target)
        })
        // 冒泡顺序是从里到外,p clicked => container clicked => body clicked
        // 阻止冒泡需要使用e.stopPropagation
    script>  
  1. 事件代理
    时间代理基于事件冒泡,多用于处理多个元素绑定事件,代码简洁,减少了浏览器内存消耗,但是不要滥用,举个例子
    <div class="container">
        <a href="#">a1a>
        <a href="#">a2a>
        <a href="#">a3a>
        <a href="#">a4a>
        <a href="#">a5a>
        <a href="#">a6a>
        <a href="#">a7a>
    div>
     <script>
        bindEvent(body, 'click', function (e) {
            e.preventDefault()
            if(e.target.tagName === 'A') {
                console.log('anchor has been clicked')
            }
        })
    script>  

你可能感兴趣的:(原生js)