在开发中不可避免的需要操作DOM，现在就来总结一下原生的获取DOM的API。

getElementById()

该方法是最常用的通过元素的id属性来获取DOM元素的API，返回一个DOM元素。

<body><div id="div">我是div</div><script type="text/javascript">var div = document.getElementById("div");console.log(div); // 打印一个DOM元素</script>
</body>

getElementById() 只能在HTMLDocument类型的实例（document对象）上调用，并不能在元素上使用该方法。

<body><div id="div">我是div<p id="p">我是p</p></div><script type="text/javascript">var div = document.getElementById("div");var p = div.getElementById("p"); // 报错了 div上并没有getElementById方法</script>
</body>

其实仔细想来也可以理解，元素具有id属性的值在页面上是唯一的（符合标准的话，写多个相同id也拦不住），所以在document下查找具有该id的元素和在某个元素下查找具有该id的元素是一样的。

getElementsByTagName()

通过标签名获取DOM元素的一个集合，该集合的类型是HTMLCollection，并且该方法可以在DOM元素上调用。

<body><div id="div"><p>我是p1</p><p>我是p2</p></div><script type="text/javascript">var div = document.getElementById("div");var pCol = document.getElementsByTagName("p"); // 返回具有两个p元素的HTMLCollection集合var pCol1 = div.getElementsByTagName("p"); // 返回具有两个p元素的HTMLCollection集合</script>
</body>

关于HTMLCollection：是一个元素的集合，是有生命的会呼吸的，该集合并不是一个快照，一个死的，它是会变化的。与之类似的较为熟悉的集合还有NodeList和NamedNodeMap。

<script type="text/javascript">for(var i = 0; i < pCol.length; i++){div.appendChild(document.createElement("p"));}
</script>

以上代码会出现无限循环。若pCol是当时的一个快照上面的循环应该只循环两次。因为pCol这个HTMLCollection集合是会变化的。当添加一个p元素到div元素中pCol元素集合就增加了一个元素，length也随之增加，这样永远不会满足 i >= pCol.length 的条件，所以出现了无限循环。

而是一个活的会呼吸的集合的不只有HTMLCollection一个，其中较为熟悉的有NodeList和NamedNodeMap。

注：可以使用一个变量存一下pCol.length就不会出现这种情况了。

getElementsByName()

该方法很少用，但是在操作表单的时候还是有用武之处的。通过元素名来获取DOM元素集合（NodeList类型），并且只能在document对象上调用。

<body><form id="form"><input type="radio" name="sex" value="0"/><input type="radio" name="sex" value="1"/></form><script type="text/javascript">var input = document.getElementsByName("sex"); // 返回一个NodeList类型的集合有两个input标签</script>
</body>

注：高程上说该方法返回的HTMLCollection集合，但是通过chrome，Firefox，Safari测试返回的类型都是NodeList。

querySelector()和querySelectorAll()

querySelector()通过合法的CSS选择器来获取DOM元素（只会获取第一个匹配的元素），如果传入不合法的CSS选择符该方法会报错（包括下面的querySelectorAll()方法也会因为不正确的选择符报错），该方法可以在元素上调用。

<body><div id="div"><p class="p" name="p">p1</p><p id="p" name="p">p2</p></div><script type="text/javascript">var div = document.querySelector("#div"); // 第一个一个id为div的div元素var p = document.querySelector("p"); // 第一个一个p元素var p1 = div.querySelector("p[name='p']"); // 第一个具有name属性，并且值为p的p元素</script>
</body>

querySelectorAll()同样通过合法的CSS选择器来获取元素，只是返回的是所有符合条件的元素，而不是第一个符合条件的元素，所以返回的是一个NodeList类型的DOM元素集合。但是这个NodeList集合和上面所说的活的，会呼吸的NodeList不一样，通过querySelectorAll()方法获取的只是一个快照，并不会动态改变。该方法同样可以在元素上调用。

<script type="text/javascript">var ps = document.querySelectorAll("p");for(var i=0; i<ps.length; i++){document.body.appendChild(document.createElement("p"));}
</script>

上面只是在body末尾添加了两个p元素，并没有无限循环下去。

getElementsByClassName()

千呼万唤始出来的一个原生API，在这个API出来之前就被各种实现了，当然就性能上来说当然原生的好。

返回一个HTMLCollection的DOM元素集合，并且可以在元素上调用。

<body><div id="div"><p class="p">p1</p><p class="p">p2</p></div><script type="text/javascript">var div = document.getElementById("div");var ps = div.getElementsByClassName("p"); // 返回 一个HTMLCollection集合</script>
</body>

属性

除了通过以上的方法获取DOM元素或元素集合外还可以通过DOM元素的属性来获取DOM元素和元素集合。

childNodes // NodeList类型
childdren // HTMLCollection类型
firstChild
lastChild
previousSibling
nextSibling
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild

以下集合都是HTMLCollection类型

document.images 所有的img标签集合
document.anchors 所有具有name特性的a标签集合
document.links 所有具有link特性的a标签集合
document.forms 所有form标签集合

NodeList和HTMLCollection的区别

我的理解很简单就是NodeList是节点的集合HTMLCollection是元素节点的集合。NodeList中可能包含HTML元素之外的节点比如文本节点，但是HTMLCollection只会包含HTML元素节点。

HTMLCollection有NamedItem() 方法而NodeList没有。

<body><div id="div"><p>p1</p><p>p2</p><p>p3</p></div><script type="text/javascript">var div = document.querySelector("#div");var childs = div.childNodes; // 一个NodeList集合console.log(childs);for(var i = 0, len = childs.length; i < len; i++){console.log(childs[i].nodeType, childs[i].nodeName) // 会打印出 3 “#text” 表示是文本节点}var children = div.children; // 一个HTMLCollection集合console.log(children);for(var i = 0, len = children.length; i < len; i++){console.log(children[i].nodeType, children[i].nodeName) // 并没有打印出 3 “#text” 只出现了 1 “P” 元素节点}</script>
</body>

但是上面的结论也有疑惑的地方比如querySelectorAll()只能返回HTML元素，但是他的类型确是NodeList，还有getElementsByName()明显返回的也是HTML元素但是同样类型是NodeList类型。

想进一步了解两者之间的区别和联系可以看看知乎上的这个问题。

获取DOM元素方法小结相关推荐

JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
获取dom元素的方法
在 JavaScript 中,获取 DOM 元素的方式有多种.下面列出了一些常用的方法: 1.用 document.getElementById() 方法:该方法需要传入一个参数,即要获取元素的 id ...
获取DOM元素后，对NodeList的遍历的几种方法
在使用原生方法或者jquery方法获取DOM元素后,想像正常使用数组的方法对其遍历时,发现一些数组的遍历方法使用不了,如map ,push , pop等方法.使用后报错:.map is not a f ...
Vue笔记四：Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
vue获取dom元素高度的方法
本文转载自: https://www.cnblogs.com/lhl66/p/7908133.html 作者:lhl66 转载请注明该声明. 获取高度: <div ref="自定义名称 ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
在指定的查找范围内获取DOM元素
在指定的查找范围内获取DOM元素 (1)功能描述定义两个全局变量,其$objTmp0通过$(expression,[context])方法获取DOM元素div0,另外一个变量$objTmp1通过$( ...

获取DOM元素方法小结