原生js 获取到DOM相对于父标签的下标、获取DOM到指定标签类型的父节点、获取DOM到指定标签类型的子节点

代码简单，废话不多说

首先： html代码

<table id = "tableCS">
	<tbody>
		<tr>
			<td>
				<button>按钮1</button>
			</td>
			<td></td>
		</tr>
		<tr id = "trCS"><td></td><td></td></tr>
		<tr>
			<td>
				<button>按钮2</button>
			</td>
			<td></td>
		</tr>
	</tbody>
</table>

1、获取dom相对于父标签的下标

var tr = document.getElementById("trCS");
var trs = tr.parentNode.childNodes;		//父标签的子元素集合
//这个时候有很多小伙伴想到 trs.indexOf(tr);	这个是不可行的提示trs没有这个函数
//这个时候可以借用数组的indexOf 通过call改变调用者对象
var index = [].indexOf.call(trs,tr);
console.log(index);						//输出结果为2 成功定位到下标

2、获取到指定标签类型的父节点
如上html代码所示，tr外层还有一个tbody。很多小伙伴就会想，直接parentNode.parentNode不就好了吗，这是可以。但有个时候框架不稳定，你不能确定外层是否有类似tbody这类的标签，所以就需要动态来进行获取。

var dom = document.getElementById("trCS");
//我这里是获取到table层
while (dom != null && dom.nodeName != "TABLE") {
	dom = dom.parentNode;
}

3、获取到指定类型的子节点
…

//方法1、确定永远在子标签集合的下标为1的那个里面
var dom = document.getElementById("tableCS");
while (dom != null && dom.nodeName != "TR") {	//我这里是获取到tr层
	dom = dom.chilNodes[0];
}

//方法2、获取全部的指定类型的字节点
var doms = [];
var parentDom = document.getElementById("tableCS");
getDOM(doms,parentDom,"BUTTON");		//获取到tableCS里面的所有按钮
console.log(doms);	//输出获取到的所有的DOM节点
function getDOM(arr,node,type) {
	if (node != null) {
		if (node.nodeName == type) {
			arr.push(node);
		} else {
			var nodes = node.childNodes;
			for (var index = 0;index < nodes.length;index++) {
				//进行递归获取
				getDOM(arr,nodes[index],type);
			}
		}
	}
}