2018.09.29 學習筆記 // 前端Javascript // BOM與DOM
阿新 • • 發佈：2018-12-13
題目：
- DOM是哪種基本的資料結構？：樹
- DOM操作的常用的API有哪些？
- DOM節點的attr和property有何區別？
知識點：
- DOM本質
- 將HTML結構化
- DOM節點操作
- 獲取DOM節點
- property //屬性 —— js的屬性
- Attribute //特性 —— HTML文件的屬性
//獲取DOM節點 var div1 = document.getElementById('div1') //元素 var divList = document.getElementsByTagName('div') //集合 console.log(divListl.length) console.log(divList[0]) var containerList = document.getElementsByClassName('.container') //集合 var pList = document.querySelectorAll('p') // 集合 //property var pList = document.querySelectorAll('p') var p = pList[0] console.log(p.style.width) p.style.width = '100px' console.log(p.className) p.className = 'p1' //獲取nodeName和nodeType console.log(p.nodeName) console.log(p.nodeType) //Attribute 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') //1.新增新節點 var p1 = document.createElement('p') p1.innerHTML = 'this is p1' div1.appendChild(p1) // 新增新建立的元素 //2.移動已有節點 var p2 = document.getElementById('p2') div1.appendChild(p2) //獲取父元素和子元素 var div1 = document.getElementById('div1') var parent = div1.parentElement //父 var child = div1.childNodes //子 //刪除節點 div1.removeChild(child[0])
<html> <body> <div id = 'div1'> <p id = 'p1'>this is p1</p> <p id = 'p2'>this is p2</p> </div> <div id = 'div2'> <p id = 'p3'>this is p3</p> <p id = 'p4'>this is p4</p> </div> <script type='text/javascript'> var p4 = document.getElementById('p4') var div1 = document.getElementById('div1') console.log(p4.parentElement) console.log(div1.parentElement) console.log(div1.childNodes) console.log(div1.childNode[0].nodetype) //text 3 node型別 console.log(div1.childNode[1].nodetype) //p 1 console.log(div1.childNode[0].nodeName) //text #text node名字 console.log(div1.childNode[1].nodeName) //p P var childNode = div1.childNodes div1.removeChild(childNodes[1]) //在這裡如果獲取0是undefined？ </script> </body> </html>
解答：
- DOM是哪種基本的資料結構？：樹
- DOM操作的常用的API有哪些？
- 獲取DOM節點，以及節點的property和Attribute
- 獲取父節點，獲取子節點
- 新增節點，刪除節點
- DOM節點的attr和property有何區別？
- property只是一個JS物件的屬性
- Attribute是對HTML標籤屬性的修改