JS中获取DOM的方法

获取DOM的方法

• document.getElementById(‘id名’)
  • 在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null)
• context.getElementsByTagName(‘标签名’)
  • 通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合
• context.getElementsByClassName(’’)
  • 通过指定的上下文或按照class名取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合
    在IE6~8下不兼容
• context.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

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

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