1. 程式人生 > >2018.09.29 學習筆記 // 前端Javascript // BOM與DOM

2018.09.29 學習筆記 // 前端Javascript // BOM與DOM

題目:

  • 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標籤屬性的修改