从面试题看考察知识点(三)

Web API

DOM 操作 (Documwnt Object Model)

题目六

• DOM 是那种基本的数据结构
  • 树
• DOM 操作常用的 API 有哪些
• DOM 节点的 attr 和 property 有何区别

知识点

1. DOM 本质

• 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。

  
  


  

    
this is p
  

DOM树

2. DOM 节点操作

• 获取 DOM 节点

1. getElementById
var elem = document.getElementById("test")  // 元素

2. getElementsByTagName
var paras = document.getElementsByTagName("p");  // 集合

3. getElementsByClassName
var elements = document.getElementsByClassName('tab');  // 类似数组的对象

4. getElementsByName  // getElementsByName方法用于选择拥有name属性的HTML元素
// 假定有一个表单是

var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"

5. querySelector  // querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');  // querySelector方法无法选中CSS伪元素。

6. querySelectorAll  // querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。
var matches = document.querySelectorAll("div.note, div.alert");   //querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器返回所有匹配其中一个选择器的元素。

3. property : js 对象的一个属性

var pList = document.querySelectorAll('p')
var p = pList[0]
console.log(p.style.width)  // 获取样式
p.style.width = '100px'  // 修改样式
console.log(p.classname)  // 获取class

// 获取nodeName 和 nodeType
console.log(p.nodeName)
console.log(p.nodeType) 

4. attribute :

var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'imooc')
p.getAttribute('style')
p.getAttribute('style', 'font-size: 30px')

// 文档上的属性标签

    

5. DOM 结构操作

• 新增节点

createElement

var div1 = document.getElementById('div1')
// 添加新节点
var p1 = document.createElement('p')
div1.appendChild(p1)  // 添加新创建的元素

• 获取父元素和子元素

parentElement  childNodes

var div1 = document.getElementById('div1')
var parent = div1.parentElement

var child = div1.childNodes
div1.removeChild(child[0])

• 删除节点

var child = div1.childNodes
div1.removeChild(child[0])

题目七

• 如何检测浏览器的类型

  function isAndroid(){
      return /Android/.test(navigator.userAgent);
  }
  funcnction isIphone(){
      return /iPhone/.test(navigator.userAgent);
  }
  function isIpad(){
      return /iPad/.test(navigator.userAgent);
  }
  function isIOS(){
      return /(iPad)|(iPhone)/i.test(navigator.userAgent);
  }
  

• 解析url各部分

BOM操作

知识点

1. navigator && screen

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

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

2. location && history

// location属性返回一个只读对象，提供了当前文档的URL信息

// 假定当前网址为http://user:[email protected]:4097/path/a.html?x=111#part1

document.location.href //"http://user:[email protected]:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"
document.location.host // "www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"
document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "passed"

// 跳转到另一个网址
document.location.assign('http://www.google.com')
// 优先从服务器重新加载
document.location.reload(true)
// 优先从本地缓存重新加载（默认值）
document.location.reload(false)
// 跳转到另一个网址，但当前文档不保留在history对象中，
// 即无法用后退按钮，回到当前文档
document.location.assign('http://www.google.com')
// 将location对象转为字符串，等价于document.location.href
document.location.toString()



// history
history.back()
history.forward()

---

题目八

• 编写一个通用的事件监听函数
• 描述事件冒泡流程
• 对于一个无限下拉加载图片的页面, 如何给每个图片绑定事件
  • 使用代理

事件

知识点

1. 通用事件绑定

// 普通事件绑定
var btn = document.getElementById('btn')
btn.addEventListener('click',function(event) {
  console.log('clicked')
})

// 通用事件绑定
function bindEvent(el, type, fn) {
  el.addEventListener(type, fn)
}
var a = document.getElementById('link')
bindEvent(a, 'click', function(e) {
  e.preventDefault()  // 阻止默认行为
  console.log('clicked')
})

2. 关于IE低版本的兼容性

• IE低版本使用 attachEvent 绑定事件
• IE低版本使用量非常少, 很多网站早已不支持
• 要求低 IE ,放弃面试

3. 事件冒泡

// html

    
激活
    
取消
    
取消
    
取消


    
取消
    
取消
 

  
// js
function bindEvent(el, type, fn) {
  el.addEventListener(type, fn)
}

var p1 = document.getElementById('p1')
var body = document.body

bindEvent(p1, 'click', function(e) {  // 会发生冒泡事件, stopPropagation阻止冒泡
  e.stopPropagation()
  console.log('激活')
})
bindEvent(body, 'click', function(e) {  // 冒泡
  console.log('取消')
})

4. 代理

    a1
    a2
    a3
    a4
    


var div = document.getElementById('div1')
div.addEventListener('click', function(e) {
  var target = e.target
  if (target.nodeName === 'A') {
    console.log(target.innerText)
  }
})

5. 完善通用绑定事件的函数

function bindEvent(el, type, selector, fn) {
  // 如果没有第三个参数, selector = fn
  if (fn == null) {
    fn = selector
    selector = null
  }
  el.addEventListener(type, function (e) {
    var target
    if(selector) {
      target = e.target
      // dom 节点是否和选择器匹配
      if (target.matches(selector)) {
        fn.call(target, e)
      }
    } else {
      fn(e)
    }
  })
}

// 使用代理
var div = document.getElementById('div1')
bindEvent(div, 'click', 'a', function (e) {
  e.preventDefault()  // 阻止默认行为
  console.log(this.innerHTML)
})

// 不使用代理
var a = document.getElementById('a1')
bindEvent(a, 'click', function (e) {
  e.preventDefault()
  console.log(a.innerHTML)
})

---

题目九

• 手动编写一个ajax, 不依赖第三方库
• 跨域的几种实现方式

Ajax

知识点

1. XMLHttpRequest

var xhr = new XMLHttpRequest()
xhr.open('GET', "/api", false)
xhr.onreadystatechange = function () {
    // 这里的函数异步执行
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            console.log(xhr.responseText)
        }
    }
}
xhr.send(null)

2. IE 兼容性问题

• IE 低版本使用 ActiveXObject, 和 W3C 标准不一样

3. readyState

• 0 - (未初始化) 还没有调用 send() 方法
• 1 - (载入) 已调用 send() 方法, 正在发送请求
• 2 - (载入完成) send() 方法执行完成, 已经接收到全部响应内容
• 3 - (交互) 正在解析响应内容
• 4 - (完成) 响应解析完成, 可以在客户端调用

4. status

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

5. 跨域

• 什么是跨域
  • 浏览器有同源策略, 不允许 ajax 访问其他域接口
  • 跨域条件 : 协议 域名 端口 有一个不同就算跨域
• 可以跨域的三个标签
  •