DOM的本质、DOM节点操作

DOM的本质

DOM本质是一课树
浏览器把拿到的HTML代码，解析成为一个浏览器可识别并且js可操作的一个树模型。

DOM节点操作

1.获取DOM节点

// 根据id获取
const div1=document.getElementById("div1")//元素
// 根据标签获取
const divList=document.getElementsByTagName('div')//集合
// 根据类名获取
const conList=document.getElementsByClassName('.con') //集合
// 通过css选择器获取
const pList=document.querySelectorAll('p') //集合

2.DOM节点的property

DOM节点的property是指可以获取DOM元素，通过JS的属性操作的形式

const pList=document.querySelectorAll('p')
const 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)// p 节点名称
console.log(p.nodeType)//1 节点类型 1 元素节点 2属性节点

3.DOM节点的attribute

DOM节点的attribute 通过setAttribute()、getAttribute()直接修改html标签的结构和属性

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

4.property和attribute区别

property
是对DOM元素的JS变量做修改
修改对象属性，不会提现到html结构中.
attribute.
对DOM元素的节点属性做修改.
修改 html属性，会改变html结构.

两者都会引起DOM结构重新渲染