DOM操作

知识点

DOM的本质

浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型

DOM节点操作

1.获取DOM节点

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

2.prototype
property是dom元素在js中作为对象拥有的属性

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

3.Attribute attribute是dom元素在文档中作为html标签拥有的属性

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

DOM结构操作

1.新增节点

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

2.获取父元素
3.获取子元素
4.删除节点

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

题目

DOM是那种基本数据结构

DOM操作的常用API有哪些

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

DOM节点的Attribute 和 property 有何区别

attribute是dom元素在文档中作为html标签拥有的属性
property是dom元素在js中作为对象拥有的属性

BOM操作

知识点

navigator & screen

    //navigator
   	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) //整个URL
    console.log(location.protocol) // 协议 ('http:','https:')
    console.log(location.pathname) // 域名后'/learn/199'
    console.log(location.search) // ?后的参数
    console.log(laoction.hash) // #后的哈希
    
    // history
    history.back() //返回
    history.forward() //前进后退

题目

如何检测浏览器类型

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

拆解url的各部分

	//location
    console.log(location.href) //整个URL
    console.log(location.protocol) // 协议 ('http:','https:')
    console.log(location.host) // 域名
    console.log(location.pathname) // 域名后'/learn/199'
    console.log(location.search) // ?后的参数
    console.log(laoction.hash) // #后的哈希

前端面试题（JS BOM、DOM ）

DOM操作

知识点

题目

BOM操作

知识点

题目