JS获取HTML DOM元素的方法

chrisitn634
3,690 阅读4分钟

原生JS获取HTML DOM元素的方法（8种）。

  1. document.getElementById();
    由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
    语法：
    var elem = document.getElementById(id);
    其中elem是一个 Element对象，如果当前文档中拥有特定ID的元素不存在则返回null。
    id是大小写敏感的字符串，代表了所要查找的元素的唯一ID。
    返回值：
    返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
  2. Document.getElementsByName()
    根据给定的name 返回一个在 (X)HTML document的节点列表集合。
    语法：
    elements = document.getElementsByName(name)
    其中elements 是一个实时更新的 NodeList 集合，name 是元素的 name 属性的值。name只能应用于以下标签：
<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>,
<input>, <map>, <meta>, <object>, <param>, <select>
<textarea>.

【注意】：getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素。所以你要小心使用该方法，最好不要为元素的 name 和 id 赋予相同的值。 IE 和 Edge 都返回一个 HTMLCollection, 而不是NodeList 。
3. getElementsByTagName()
Element.getElementsByTagName() 方法返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身。
如果是Doucument.getElementsByTagName(),则是返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。整个文件结构都会被搜索，包括根节点。
语法：
elements = element.getElementsByTagName(tagName)
elements 搜索到的元素的动态HTML集合HTMLCollection，它们的顺序是在子树中出现的顺序。 如果没有搜索到元素则这个集合为空。
element 搜索从element开始。请注意只有element的后代元素会被搜索，不包括元素自己。
tagName 要查找的限定名。 字符 "*" 代表所有元素。
4. getElementsByClassName()
Element.getElementsByClassName()方法返回一个即时更新的（live） HTMLCollection，包含了所有拥有指定 class 的子元素。当在 document 对象上调用此方法时，会检索整个文档，包括根元素。

相似地，Document.getElementsByClassName() 方法会在整个文档上执行；它返回指定拥有指定 class 名称的 document 根节点的后代元素。
语法：
var elements = element.getElementsByClassName(names);
其中elements 是一个即时更新的（live）HTMLCollection。 names 是一个字符串，表示要匹配的类名（class names）列表；类名被空白符分隔。 element 是文档中的任一 Element。
例：
document.getElementById('main').getElementsByClassName('test');//就是寻找id为main的元素下所有class名为test的元素。
5. querySelector
返回与指定的选择器组匹配的元素的后代的第一个元素。
语法：
ele = element.querySelector(selectors);
elem和element是element对象. selectors是一个CSS选择器字符串。可以是class名、id也可以是h1等标签名。
该方法能够返回匹配指定选择器的第一个元素。如果未找到则返回null。
6. querySelectorAll
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 静态的NodeList 。
语法：
elementList = baseElement.querySelectorAll(selectors);
其中elementList是静态的NodeList对象。baseElement是一个元素对象或document。selectors是一组CSS选择器。
【注】：如果selectors参数中包含 CSS伪元素，则返回的列表始终为空。
例：

//返回所有class名为.node或.alert的div
var matches = document.querySelectorAll("div.note, div.alert");
  1. document.documentElement
    对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个<html>元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。
  2. document.body
    document.body是包含当前页面内容的元素,对于拥有<body>元素的文档来说,返回的是<body>元素,对于一个拥有<frameset>元素的文档来说,返回的是最外层的<frameset>元素.

该属性是可写的,且为该属性赋的值必须是一个<body>元素.

avatar
文章
阅读
粉丝