慕课网《前端JavaScript面试技巧》学习笔记（6）-DOM

1.DOM是哪种基本的数据结构
2.DOM操作常用的API有哪些
3.DOM节点的attr和property有何区别
4.如何检测浏览器的类型
5.拆解url的各部分

知识点#####

• DOM本质
  DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 交互的API文档。DOM 是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。
  DOM可以理解为浏览器把拿到的HTML代码，结构化为一个浏览器能识别并且js可操作的模型。

• BOM本质
  BOM（Browser Object Document）即浏览器对象模型。
  BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
  由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
  BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

• DOM节点操作

  • 获取DOM节点

    var div1=document.getElementById('div1')  //元素
    var divList=document.getElementByTagName('div')   //集合
    console.log(divList.length);
    console.log(divList[0]);
    
    var containerList=document.getElementByClassName('.container')  //集合
    var pList=document.querySelectorAll('p')  //集合
    

  • property
    js对象的属性

  var pList=document.querySelectorAll('p')
  var p=pList[0]
  //获取了DOM对象，对象在js中都是可扩展的
  console.log(p.style.width); //获取样式
  p.style.width='100px' //修改样式
  console.log(p.className); //获取className
  p.className='p1' //修改className

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

  - Attribute
  

标签属性，用于扩充HTML标签，可以改变标签行为或提供数据，格式为name=value
var pList=document.querySelectorAll('p') var p=pList[0] p.getAttribute('data-name') p.setAttribute('data-name','imooc') p.getAttribute('style') p.setAttribute('style','font-size:30px;')

• DOM结构操作
  • 新增节点

var div1=document.getElementById('div1')
var p1=document.createElement('p') //创建新节点
p1.innerHTML='Hello'
div1.appendChild(p1)  //添加新创建的节点
var p2=document.getElementById('p2')
div1.appendChild(p2)  //移动已有节点

• 获取父子元素、删除节点

var div1=document.getElementById('div1')
var parent=div1.parentElement //获取父元素
var child=div1.childNodes //获取子元素
div1.removeChild(child[0])  //移除child[0]子节点

• navigator&screen

//ua
var ua=navigator.userAgent
var isChrome=ua.indexOf('Chrome')
console.log(isChrome);
 
  //screen
console.log(screen.width);
console.log(screen.height);

• location&history

//location
console.log(location.href);
console.log(location.protocol); //http https
console.log(location.pathname); //域名之后的路径
console.log(location.search);
console.log(location.hash);

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

解题#####

1.DOM是哪种基本的数据结构
树
2.DOM操作常用的API有哪些

• 获取DOM节点以及节点的property和Attribute
• 获取父节点，获取子节点
• 新增节点，删除节点

3.DOM节点的attr和property有何区别

• property是一个JS对象的属性的修改
• Attribute是HTML标签属性的修改

4.如何检测浏览器的类型

navigator.userAgent

5.拆解url的各部分

//location
console.log(location.href);
console.log(location.protocol); //协议 http https
console.log(location.pathname); //域名之后的路径
console.log(location.search);
console.log(location.hash);