一、什么是DOM?
DOM(Document、Object、Model)文档对象模型。
1、DOM的本质
它的数据结构就是树。HTML是XML的一种特殊类型。DOM的本质就是将HTML进行了结构化,结构化成了JS可识别的东西和浏览器可识别的东西。
二、DOM节点操作
DOM可以理解为:浏览器把拿到的html代码,结构化一个浏览器能识别并且js可操作的一个模型而已。
1、获取DOM节点
var div1 = document.getElementById('div1')
var divList = document.getElementsByTagName('div') //集合
var containerList = document.getElementsByClassName('.container') //集合
var pList = document.querySelectorAll('p') //集合
2、property(属性)
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
p.className = 'p1' //修改class
console.log(p.nodeName) //获取nodeName
console.log(p.nodeType) //获取nodeType
3、Attribute
这里获得的属性不是js对象的属性,而是文档中的属性。Attribute修改的是html文档标签的属性。
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结构操作
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、获取父元素
var div1 = document.getElementById('div1')
//获取父元素
var parent = div1.parentElement
3、获取子节点
var div1 = document.getElementById('div1')
//获取子节点
var child = div1.childNodes
4、删除节点
var div1 = document.getElementById('div1')
//获取子节点
var child = div1.childNodes
//移除div1的第一个子节点
div1.removeChild(child[0])
四、问题解答
- DOM是哪种基本的数据结构
解答:树
- DOM操作的常用的API有哪些
解答:获取DOM节点,以及节点的property和Attribute。获取父节点,获取子节点。新增节点,删除节点。
- DOM节点的atrr和property有何区别
解答:property只是一个JS对象的属性获取和修改。Attribute是对html标签属性的修改。