javascript基础篇-根据className和元素id获取dom元素的区别


摘要:
下文通过举例的方式分享,通过className和元素id获取dom信息的区别,如下所示:



1.三种获取dom元素的方法举例

1.1 通过id获取dom元素的方法
document.getElementById(“元素id”)

1.2 通过classname获取dom元素的方法
document.getElementsByClassName(“className”)

1.3 通过 querySelector 查询classname获取第一个匹配成功的元素
document.querySelector(‘.classname’);



2.两种获取dom元素方法的区别

2.1 两种获取dom元素所使用的函数名称不一样

2.2 两种函数的返回值不同
document.getElementById(“元素id”) 返回一个元素

document.getElementsByClassName(“className”)
返回一组元素

document.querySelector(‘.className’);
返回第一个匹配成功的元素



3.举例应用

例1:
获取元素id 等于”test”和className等于”testClass”的第一个元素
document.getElementById(“test”)
document.getElementsByClassName(“testClass”)[0]
document.querySelector(‘.className’)


例2:
隐藏 —元素id 等于”test”和className等于”testClass”的第一个元素

document.getElementById(“test”).style.display=”none”;
document.getElementsByClassName(“testClass”)[0].style.display=”none”;
document.querySelector(‘.className’).style.display=”none”;

注意事项:
javascript是一个区分大小写的语言