• 获取DOM节点
    • property
    • attribute ```javascript const div1 = document.getElementById(‘div1’) // 元素 const divList = document.getElementsByTagName(‘div’) // 集合 console.log(divList.length) console.log(divList[0])

    const containerList = document.getElementsByClassName(‘.container’) //集合

    const pList = document.querySelectorAll(‘p’) //集合

    1. ```javascript
    2. // DOM节点的property
    3. const pList = document.querySelectorAll('p');
    4. const p = pList[0];
    5. console.log(p.style.width); // 获取样式
    6. p.style.width = '100px'     // 修改样式
    7. console.log(p.className)    // 获取class
    8. p.className = 'p1'          // 修改 class
    10. // 获取nodeName 和 nodeType
    11. console.log(p.nodeName)
    12. console.log(p.nodeType)
    1. // DOM节点的attribute
    2. const pList = document.querySelectorAll('p');
    3. const p = pList[0];
    4. p.getAttribute('data-name')
    5. p.setAttribute('data-name', 'imooc')
    6. p.getAttribute('style')
    7. p.setAttribute('style', 'font-size: 30px')
    • property：修改对象属性，不会体现到html结构中
    • attribute：修改html属性，会改变html结构
    • 两者都可能引起DOM重新渲染