ES5之DOM操作和BOM操作

DOM操作（Document Object Model）

题目

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

知识点

DOM本质

• html是xml 特殊类型，xml 具有扩展性

DOM节点操作

• DOM可以理解为浏览器把拿到的html代码，，结构化一个浏览器能识别并且js可以操作的一个模型而已
• 获取DOM节点
• prototype
• Attribute

//获取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 改的是对象属性
//获取对象
//这些属性是W3C规定的
var pList = document.querySelectorAll('p')//获取的是js对象，js对象属性具有可扩展性，
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)//p 节点名 
console.log(p.nodeType) //nodeType 是 p 的 property
var obj = {x: 100, y: 200}//x 是 obj的 property

//Attribute 改的是 文档标签内的属性
var pList = document.querySelectorAll('p')
var p = pList[0]//p 是js对象
p.getAttribute('data-name')//浏览器给js对象扩展了getAttribute属性
p.setAttribute('data-name', 'imooc')//设置p的Attribute的值
p.getAttribute('style')//获取p的Attribute的值
p.setAttribute('style', 'font-size:30px;')//设置p的Attribute的值

DOM结构操作

解答