javascript 关于dom节点操作的增删改查
dom节点的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom-test</title> <style> .setColor{ color: blue; } .setFtSz{ font-size: 16px; } </style> </head> <body> <div id="con"> <p id="tlt">html dom操作 增 删 改 查</p> <p id="show">内容展示</p> <p id="showtest">测试用例</p> </div> <script type="text/javascript"> let getDomById = document.getElementById('tlt') let getShowP = document.getElementById('show') let getDoms = document.getElementsByTagName('p') let getTestDom = document.getElementById('showtest') let pDom =getDomById.parentNode console.log(pDom) // 增 // 1、创建元素 2、填充内容3、追加到已有元素中或body中 let addNew = document.createElement('p') addNew.innerHTML = '我是新增的元素p' con.appendChild(addNew) let addNew2 = document.createElement('div') addNew2.innerHTML = '我是直接追加在body中的' document.body.appendChild(addNew2) // 删 // 1、找需要删除的节点 2、需要删除节点父级 3、remove pDom.removeChild(getDomById) // 改 // 1、修改元素内容 getShowP.innerHTML = '我把原来内容改了' // 2、修改元素样式 getShowP.style.color = '#f00' // 3、插入内容(insertBefore())/替换replaceChild() let addChildNew = document.createTextNode('子节点增加了内容') getShowP.appendChild(addChildNew) let reNew = document.createTextNode('我是来替换的') pDom.replaceChild(reNew, getShowP) //4、添加属性 let addAtr = document.createAttribute('class') addAtr.value = 'setColor' getTestDom.setAttributeNode(addAtr) console.log(getTestDom.getAttribute('class')) // setColor getTestDom.setAttribute('class', 'setFtSz') // 更改属性值 指定的属性已存在，则仅设置/更改值。 // 查 dom操作事件 // getElementById // getElementsByTagName // getElementsByClassName </script> </body> </html>
