JS中获取DOM的方法

获取DOM的方法

document.getElementById(‘id名’)
在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null)
document.getElementsByTagName(‘标签名’)
通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合
document.getElementsByClassName(’’)
通过指定的上下文或按照class名取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合
在IE6~8下不兼容
document.getElementsByName(’’)
在整个文档中，通过标签的NAME属性值获取一组节点集合（在IE中只有表单元素的NAME才能识别，所以我们一般应用于表单元素的处理）

document.body/document.head/document.documentElement

console.log(document.body)                        //获取body
console.log(document.head)                        //获取head
console.log(document.documentElement)            //获取html

document.querySelector(‘选择器’)
在指定上下文中通过选择器获取第一个元素（只能获取一个），获取不到就是null
在IE6~8下不兼容
document.querySelectorAll()
在指定上下文中通过选择器获取一组元素集合，获取不到就是空元素集合在IE6~8下不兼容

// 获取元素
        // var nav = document.getElementById('navList');
        // 1、var box = document.getElementById('box');
        // 通过Id获取的元素是一个元素对象，获取不到就是null
        // var lists = nav.getElementsByTagName('i');
                    // document.getElementsByTagName('标签名')// 通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合
        // console.log(lists)
        // 2、document.getElementsByClassName()
        // var box = document.getElementById('navList');
        // var list = document.getElementsByClassName('a');
        // console.log(list)
        // 3、document.body/document.head/document.documentElement
        // console.log(document.body) // 获取body
        // console.log(document.head) // 获取头部
        // console.log(document.documentElement) // 获取html
        // 5、document.querySelector
        // var box = document.getElementById('box')
        //    var ss =  box.querySelector('#navList .a');
           // 在指定上下文中通过选择器获取第一个元素, 获取不到就是null
        //    console.log(ss)
        // 6、document.querySelectorAll()
        // 在指定上下文中通过选择器获取一组元素集合，获取不到就是空元素集合
        // var list = document.querySelectorAll('#navList li:nth-child(2)'); // 获取的是一个元素集合，获取不到就是空元素集合
        // console.log(list)
        // console.log(box)