JS选择器getElement系列和querySelector系列的区别

• • getElement系列

        document.getElementById('')
        document.getElementsByClassName('')
        document.getElementsByName("")
        document.getElementsByTagName('')

• • querySelector系列

        document.querySelector('')
        document.querySelectorAll('')

• • 区别

这段代码可复制到html页面中

 <div class="demo3" style=" font-size:larger;">改变样式</div>
 <button onclick="changecontent2()">改变样式</button>
function changecontent2() {
        let abcd=document.querySelector(".demo3")
        console.log("abcd>>>>>",abcd)
        abcd.style.color="pink"
        console.log("hhhhhhhhhhhhhhhhhhhhhh>>>>>>>>>>>.改变样式")
        let ele1=document.getElementsByClassName("demo3")
        console.log("ele1是一个集合，第一个数才是元素本身>>>>>>>>>>>>>ele1",ele1,">>>>>>>>>>.ele1[0]",ele1[0])
        ele1[0].style.fontSize='200px'

    }

1. getElement符合是W3C的DOM规范，接收的是要获取的DOM的名称；而querySelector接收的参数是一个css选择符

2. getElement获取的是动态集合，而querySelector获取的是静态集合；动态选出的元素会随着文档的改变而改变，而静态的不会。

看打印输出结果

getElement输出的结果

querySelector输出结果

所以当你要改变它的样式的时候getElement系列不能在其后直接加.style.样式属性名，需要指定到getElement系列的第一个集合 "ele1[0]".