DOM学习之如何获取元素
<div tx = "123" id="brand" class="huawei mi" name="num">
<span class="s"></span>
</div>
1、如何通过标签获取元素 。
通过标签名字，借助 getElementsByTagName 。
如：let spans = document.getElementsByTagName('span')
此时spans是一个数组形式的object，可以通过 spans[index]获取具体下标位置元素 。
2、 如何通过特性获取元素。
2.1：通过id特性，借助 getElementById 。
如： let div = document.getElementById('d')
2.2:通过name特性， 借助 getElementsByName 。
返回数组形式的对象。
let nums = document.getElementsByName('num')
2.2：
1、通过一个class特性，借助 getElementsByClassName 。
如：let mobile = document.getElementsByClassName('huawei') 。
可通过books[index]形式获取下标位置元素 。
2、通过多个class特性， 借助 document.querySelector 。
如：
// let div = document.querySelector('.huawei')
// let div = document.querySelector('.huawei.mi')
let div = document.querySelector('#brand.huawei.mi')
只返回查找到的第一个元素，没找到返回null；
document.querySelectorAll()返回所以符合标准的元素，以数组形式调用。
3、 查找自定义特性元素。(id,class也可以使用)
document.querySelector('[tx="123"]')
或document.querySelectorAll('[tx="123"]')
或document.querySelectorAll('[tx="123"]#d.mi')
综上： 一共6个方法。
1、getElementsByTagName
2、getElementById()
3、getElementsByClassName
4、getElementsByName
5、querySelector
6、querySelectorAll
其中getElementByid 和 querySelector 直接返回单一元素，其余返回数组形式对象。（前提是有相应元素）
querySelector 和 querySelectorAll还可以有更强大的用法。
// let span = document.querySelector(('[tx="123"] .s'); ] 与.s之间是空格
// let span = document.querySelector(('[tx="123"]>.s');
// let span = document.querySelector(('[tx="123"] span');
let span = document.querySelectorAll('[tx="123"] .s')[0];
其它，根据已知元素 / 节点 获取 元素 / 节点：
应该有父兄子三种情形。
父级：
1：获取父节点 Node.parentNode 返回指定的节点在DOM树中的父节点.
语法 parentNode = node.parentNode
parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(Element )节点,也可能是一个文档(Document )节点,或者是个文档碎片(DocumentFragment)节点.
2：获取父元素节点 Node.parentElement
返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。
语法 parentElement = node.parentElement
parentElement 是当前节点的父元素。它永远是一个 DOM 元素 对象，或者 null。
兄级：
1：元素的下一个节点 element.nextSibling;
2：元素的上一个节点 element.previousSibling;
3：元素的上一个兄弟元素节点 element.previousElementSibling;
4：元素的下一个兄弟元素节点 element.nextElementSibling;
子级：
1、获取所有子节点 Node.childNodes
概述 Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。
语法 var ndList = elementNodeReference.childNodes;
ndList变量为 NodeList 类型，且为只读。
例子
// parg 是一个对 <p> 元素的引用
if (parg.hasChildNodes())
// 首先我们检查它是否包含子节点
{
var children = parg.childNodes;
for (var i = 0; i < children.length; i++)
{
// children[i]就是遍历到的每个子节点.
// 注意:该NodeList对象为LIVE类型的NodeList, 添加或删除子节点都会实时的改变整个NodeList对象.
};
};
//下面的方法可以删除节点box的所有子节点
while (box.firstChild)
{
//box为LIVE类型的NodeList,所以firstChild属性每次会指向不同的子节点
box.removeChild(box.firstChild);
};
备注
集合的元素是一个节点而不是字符串。要从集合的元素获取数据，你必须使用它们的属性（例如：用 elementNodeReference.childNodes[1].nodeName 获取它们的名称， 等 等）。
document节点(文档节点)包含两个子节点： Doctype 声明和根节点。根节点通常为 documentElement 引用，且在 (X)HTML 文档中为 HTML 元素。
2、获取元素所有儿子元素 Element.children
Element.children 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection。
语法 var children = node.children;
var elList = elementNodeReference.children;
备注
children 属性为只读属性，对象类型为 HTMLCollection，你可以使用 elementNodeReference.children[1].nodeName 来获取某个子元素的标签名称。
3、获取第一个或最后一个儿子元素
firstChild会获取首个子节点，相当于children[0]的效果。
lastChild会获取最后一个子节点，相当于children[children.length-1]
4、获取任意位置元素
querySelector() 与 querySelectorAll()
参数是选择器，无兼容问题，很生猛。
