web前端面试题总结笔记——JavaScript-web-api部分

DOM（documen object model）

• dom树。

• 节点操作

  • 获取dom接点

    document.getElementById('id')//元素id
    document.getElementByTagName('div')//集合
    document.getElementByClassName('.bannerName')//集合
    document.querySelectorAll('p')//集合
    ......

  • attr属性（针对HTML标签）

    var pList=document.querySelectorAll('p')
    var p = pList[0]
    p.getAttribute('dataname')
    p.setAttribute('dataname','othername')
    p.getAttribute('style','othername')
    p.setAttribute('style')

  • DOM结构操作

    ​ 新增节点

    appendChild()

    ​ 获取父元素

    parentElement()

    ​ 获取子元素

    childNodes()

    ​ 删除节点

    removeChild()

  • property属性(对JS对象的属性的修改)

    var pList=document.querySelectorAll('p')
    var p = pList[0]
    console.log(p.style.width)//获取样式
    p.style.width='999px'//修改
    console.log(p.className)//获取类名
    p.className='otheName'//修改
    //获取nodeName和NodeType
    console.log(p.nodeName)
    console.log(p.nodeType)

     

BOM操作 （browser boject model）

浏览器类型

URL

• navigator

  var ua = navigator.userAgent
  var isChrome=ua.indexOf('Chrome')
  console.log(isChrome)

• screen

  console.log(screen.width)
  console.log(screen.height)

• location

  console.log(location.href)
  console.log(location.protocol)//http
  console.log(location.pathname)/demo/demo
  console.log(location.search)
  console.log(location.hash)

   

• history

  history.back()
  history.forward()

• 事件

  • 事件监听函数

    var btn = document.getElementById('btn1')
    btn.addEventListener('click',function(event)
    {
        var target
        if(selector){
            target=e.target
                if(target.matches(selector))
                {
                    fn.call(target,e)
                }
            }
            else{
                fn{e}
            }
    })
    ​
    function bindEvent(elem,type,selector,fn)
    {
        if(fn==null){
            fn=selector
            selector=null
        }
    }
    var a = document.getElementById('link1')
    bindEvent(a,'click',function(e){
        e.preventDefault()
        alert('clicked')
    })

     

  • 事件冒泡

    • 触发子事件，父事件也会触发

      var p1=document.getElementById('p1')
      var body = document.body
      bindEvent(p1,'click',function(e){
          e.stopPropagation()//阻止冒泡事件
          alert('激活')
      })
      bindEvent(body,'click',function(e){
          alert('取消')
      })

  • 代理

    • 代码简洁

    • 减少浏览器内存使用

    <div id='div1'>
        <a href="#">a1</a>
        <a href="#">a2</a>
        <a href="#">a3</a>
        <a href="#">a4</a>
    </div>

    var div1=document.getElementById('div1')
    div1.addEventListener('click',function(e){
        var target=e.target
        if(target.nodeName==='A')
        {
            alert(target.innerHTML)
        }
    })

    e.preventDefault()//阻止默认行为

•  

  Ajax

  手写ajax

  var xhr=new XMLHttpRequest()
  xhr.open("GET","/url/demo",false)//false 为异步 不填默认同步
  xhr.onreadystatechange = function()
  {
      if(xhr.readyState==4&&xhr.status==200){//成功了且服务端返回成功
          console.log(xhr.responseText)//服务端返回内容
      }
  }
  xhr.send()

  *IE兼容性问题（了解）

  状态码（readyState）

• 0:未初始化，还没有调用send()方法

• 1:载入，正在发送请求

• 2:载入完成，已经接收到响应请求

• 3:交互, 正在解析响应内容

• 4:完成，解析完成，可以在客户端调用了

  status

  • 2xx—表示成功处理请求

  • 3xx—需要在重定向，浏览器直接跳转

  • 4xx—客户端请求错误，404

  • 5xx—服务器端错误

• 跨域

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

  协议，端口，域名

  跨域注意事项

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

  2.如果未经允许获取到了，那是浏览器同源策略的bug

  可以跨域的三个标签

• img

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

• link

  • cdn

  • script

    • cdn

    • 用于JSONP

• JSONP

      <script>
          var script=document.createElement("script")
              script.src = "url+ '&callback=' + funcName"
          document.body.appendChild(script)
  ​
          window[funcName] = function (data) {
          callback(data）
        }
      </script>
  ​
  ​
      header('Content-Type: application/javascript');//服务器端
  ​

   

  服务器端设置 http header

  存储

• cookie

  • 本身用于客户端和服务器端通信

  • 但是有本地存储的功能

  • 容量为4kb

  • 所有http请求都带着

  • api简单，需要封装 document.cookie=...

• sessionStorage

  sessionStoragesetItem(key,value);sessionStorage.getItem(key);

• localStorage(常用)

  HTML5专门为存储而设计，最大5MB

  api简单易用

  localStorage.setItem(key,value);localStorage.getItem(key);

  注意：在IOS Safari隐藏模式下localStorage.getItem(key);会报错，建议使用try-catch

  区别

  容量

  是否会携带到ajax中（cookie所有都要带）

  api易用性（cookie要封装，其他两个可以直接用）