JavaScript获取HTML元素的四种方法

JavaScript获取HTML元素的三种方法

通过Id获取HTML 元素

返回拥有指定Id的第一个对象的引用，若有多个相同的ID

//获取Id为idStr的元素document.getElementById("idStr");

通过Name获取HTML元素

返回拥有指定名称的元素引用的数组

//获取所有name为nameStr的元素引用的数组document.getElementByName("nameStr");

通过标签名获取HTML元素

返回指定标签名的所有标签的引用的数组

//获取所有tagNameStr标签的引用的数组document.getElementByTagName("tagNameStr");

通过样式名获取HTML元素

通过你界面元素应用的id、标签以及类获取元素，该方式有两种方法querySelector(“样式名”)以及querySelectorAll(“样式名”)，querySelector返回一个document对象，若有多个应用相同样式的元素，则仅返回第一个；querySelectorAll则返回一个数组，包括所有应用该样式的对象。

代码示例：

document.querySelector("a");//拿到一个a便签元素document.querySelector("#a");//拿到一个id为a的元素document.querySelector(".a");//拿到一个id应用类a的元素

如果要拿到多个相同样式的元素就使用querySelectorAll

document.querySelector("a")//拿到所有a标签，并作为一个document数组返回

也可以多层样式。例如拿到一个id为a的元素下面的类为a下面的a标签

//html结构<div id="a">    <div class="a">        <a></a>        <a></a>        <a></a>    </div></div>//JS获取a标签document.querySelector("#id .class a");//拿到上面三个a标签的第一个document.querySelectorAll("#id .class a");//拿到包含上面三个a标签的数组