认识DOM

66 阅读1分钟

认识DOM

  • DOM 是对页面删除一个节点和增加一个节点的操作

DOM 非常规DOM的获取(html head body)

获取html 标签的语法 document.documentELement

  var htmlEle = document.documentElement 
  console.log(htmlEle)

获取head 标签的语法 document.head

  var headEle = document.head
  console.log(headEle)

获取body 标签的语法 document.body

  var bodyELe = document.body
  console.log(bodyELe)

DOM 常规DOM的获取

  • js 在获取常规元素时与 css 一样 ,可以通过 类名, ID名 标签名

*1通过 类名 去获取 这样获取的是一个 伪数组 可以通过具体的索引下标去获取对应的div 伪数组 : 有length 属性 没有数组的方法 语法: var oBox = document.getElementsByClassName('类名')

   var oBox = document.getElementsByClassName('box')
        console.log(oBox)

*2通过 标签名 获取 这样获取的是一个 伪数组 可以通过具体的索引下标去获取对应的div 语法:var oDiv = document.getElementsByTagName('div')

   var oDiv = document.getElementsByTagName('div')
        console.log(oDiv)

*3通过 ID名 获取 这样获取的是一个 div 语法 : var oDiv = documentById('id名')

    var oDiv = document.getElementById('box5')
        console.log(oDiv)

*4通过 按照选择器的形式 获取标签 4.1 document.querySelector: 获取满足条件的第一个

   var oBox1 = document.querySelector('#box1')
             console.log(oBox1)

4.2 document.querySelectorAll: 获取满足条件的所有标签

     var oBox = document.querySelectorAll('.box')
            console.log(oBox)