实战，DOM元素介绍(一)

开篇一张美女，大家国庆节快乐，感谢大家百忙之中来看我这张美女图。给大家上黑丝。

言归正传，今天介绍下获取DOM元素的一些方法。根据w3school上介绍的大概有

• document.getElementById();
• document.getElementsByName();
• document.getElementsByClassName();
• document.getElementsByTagName();
• CSS选择器
• document.querySelector();
• document.querySelectorAll();
• 对象选择器
• document.forms();
• 还有以下 HTML 对象（和对象集合）也可以获取
• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

那咱们就老规矩按F12进开发者模式，今天我们先了解下下面这四个

document.getElementById('js_media_list');  //下图红色框
document.getElementsByName('file');  //下图绿色框
document.getElementsByClassName('mp-head');  //下图蓝色框
document.getElementsByTagName('body');  //下图黑色框

可以看到除了document.getElementById();返回的是元素节点，其余几个方法返回的是Nodelist和HTMLCollection，这两个是类似数组的一个集合，都有数组的length属性，还可以通过索引访问内部元素。

document.getElementById();

通过id查找元素。如果元素被找到，此方法会以对象返回该元素, 如果未找到元素，返回null。我们试一下

可以看到，我们查id='js_media_list'的元素，返回了元素节点<ul>；当我们查id='ssssss'的元素，由于文档中没有这个id的元素，所以返回了null

document.getElementsByName();

根据name属性查找所有匹配值, 若存在返回NodeList数组对象，若不存在返回空的Nodelist[]。我们看看一下

可以看到，我们查name='file'的元素，返回了Nodelist里面有一个元素节点<input>；当我们查name='ssssss'的元素，由于文档中没有这个name属性的元素，所以返回了空的Nodelist[]。

document.getElementsByClassName('');

如果元素只有一个class属性，会查找页面上所有的class属性值匹配的元素。如果有多个多个class属性，可以选其中一个进行匹配，也可以多个同时匹配，如果存在则返回HTMLCollection对象(类似数组，有数组的length属性和数组索引来访问内部元素)，如果不存在则返回空的HTMLCollection[]。

可以看到，我们查class='tpl_item tpl_item_dropdown jsInsertIcon img'的元素（当包含多个class属性是，必须同时满足这几个属性值），返回了HTMLCollection里面有一个元素节点<li>；当我们查class='tpl_item_dropdown'的元素，返回了HTMLCollection里面有三个元素节点<li>；当我们查class='ssssss'的元素，由于文档中没有这个class属性值的元素，所以返回了空的HTMLCollection[]。

document.getElementsByTagName();

通过tag标签属性查找所有匹配的标签元素, 返回HTMLCollection 数组对象；若不存在则返回空的HTMLCollection[]。我们试试看

可以看到，我们查TagName='li'的元素，返回了HTMLCollection里面有17个元素节点<input>；当我们查TagName='ssssss'的元素，由于文档中没有对应的元素标签，所以返回了空的HTMLCollection[]。

好了今天的内容就分享到这，剩下的内容我们下次继续，多多练习掌握技巧和之间的区别。加油！

下次还有美女