<div id="div1" class="container">  
    <p id="p1">一段文字 1</p>  
    <p>一段文字 2</p>  
    <p>一段文字 3</p>  
</div>  
  
<div id="div2" class="container">  
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">  
</div>

获取 DOM 节点

const div1 = document.getElementById('div1')  
console.log('div1',div1)  
// div1 <div id=​"div1" class=​"container">​…​</div>​  
  
const divList = document.getElementsByTagName('div') // 集合  
console.log('divList.length',divList.length)  
// divList.length 2  
console.log('divList[1]',divList[1])  
// divList[1] <div id=​"div2">​…​</div>​  
  
const containerList = document.getElementsByClassName('container') // 集合  
console.log('containerList.length',divList.length)  
// containerList.length 2  
console.log('containerList[1]',divList[1])  
// containerList[1] <div id=​"div2">​…​</div>  
  
const pList = document.querySelectorAll('p') // 集合  
console.log('pList',pList)

property 和 attribute

  • property:修改对象属性,不会体现到 html 结构中(尽量用)
  • attribute:修改 html 属性,会改变 html 结构()
  • 两者都有可能引起 DOM 重新渲染
const pList = document.querySelectorAll('p') // 集合  
const p1 = pList[0]  
  
// property 形式  
p1.style.width = '100px'  
p1.className = 'red'  
console.log(p1.style.width) // 100px  
console.log(p1.className) // red  
console.log(p1.nodeName) // p  
console.log(p1.nodeType) // 1  
  
// attribute 形式  
p1.setAttribute('data-name','baidu')  
console.log(p1.getAttribute('data-name')) // baidu  
p1.setAttribute('style','font-size:50px')  
console.log(p1.getAttribute('style')) // font-size:50px

新增/插入节点

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
// 新建节点
const newP = document.createElement('p')
newP.innerText = 'this is newP'
// 插入节点
div1.appendChild(newP)
// 移动节点 id="p1" 从 div1 移动到 div2 
const p1 = document.getElementById('p1')
div2.appendChild(p1)

获取子元素列表 & 获取父元素

const div1 = document.getElementById('div1')
const p1 = document.getElementById('p1')
// 获取父元素
console.log('p1.parentNode', p1.parentNode)
// p1.parentNode <div id=​"div1" class=​"container">​…​</div>​
// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log(div1ChildNodes)
// NodeList(7) [text, p#p1, text, p, text, p, text]
// 0: text
// 1: p#p1
// 2: text
// 3: p
// 4: text
// 5: p
// 6: text
// length: 7
// 对象转数组,过滤 text 标签 nodeType=3,只留下 p标签 nodeType=1
const div1ChildNodesP = Array.prototype.slice.call(div1ChildNodes).filter(child => {
    if (child.nodeType === 1) {
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)

删除节点

const div1 = document.getElementById('div1')  
const child = div1.childNodes  
console.log(child)  
//NodeList(7) [text, p#p1, text, p, text, p, text]  
// 0: p#p1  
// 1: text  
// 2: p  
// 3: text  
// 4: p  
// 5: text  
// length: 6  
  
// 对象转数组,过滤 text 标签 nodeType=3,只留下 p标签 nodeType=1  
const childP = Array.prototype.slice.call(child).filter(ch=>{  
    if(ch.nodeType === 1){  
        return true  
    }  
    return false  
})  
div1.removeChild(childP[0]) // 删除 p#p1

标签: none

添加新评论