认识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)