DOM节点操作

Posted 2021-02-15 mushitianya

获取 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') // 集合

prototype:

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)

Attribute:

property 的获取和修改，是直接改变 JS 对象，而 Attibute 是直接改变 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 树操作

• 新增节点

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)

• 获取父元素

var div1 = document.getElementById('div1')
var parent = div1.parentElement

• 获取子元素

var div1 = document.getElementById('div1')
var child = div1.childNodes

• 删除节点

var div1 = document.getElementById('div1')
var child = div1.childNodes
div1.removeChild(child[0])