JavaScript获取html中DOM节点Document对象

不依赖其他类库，纯js获取html中DOM节点Document对象的方法统计，包含简单示例，方便学习和查阅

用 js 获取 html 中 DOM 节点 Document 对象方法有很多，一时半会记不住，每次网上查找费事，于是做个记录方便查阅。

具体看以下内容

一、ID Dom

指定 ID 的第一个对象的引用。

示例：

<div id="test1">ID Dom</div>
<script>
var test1 = document.getElementById("test1");
    test1.onclick = function(){
        alert('ID');
    };
</script>

二、Class Dom

文档中所有指定类名的元素集合,说明这块是数组，通过节点索引获取第几个的class。

示例：

<div class="test2">Class Dom</div>
<script>
var test2 = document.getElementsByClassName('test2');
    test2[0].onclick = function(){
	abc('Class');
    };
</script>

三、Name Dom

可返回带有指定名称的对象的集合,也是数组，通过节点索引获取第几个元素。

示例：

<div name="test3">Name Dom</div>
<script>
var test3 = document.getElementsByName('test3');
    test3[0].onclick = function(){
        abc('Name');
    };
</script>

四、TagName Dom

返回带有指定标签名的对象的集合,也是数组，通过节点索引获取第几个元素。

<div>TagName Dom</div>
<script>
var test4 = document.getElementsByTagName('div');
    test4[3].onclick = function(){
        abc('TagName');
    };
</script>

五、指定选择器 DOM

返回文档中匹配指定 CSS 选择器的一个元素，querySelector()方法仅仅返回匹配指定选择器的第一个元素

格式：标签/#id/.class/标签.class/标签#id/标签[属性]）

1、获取文档中 class="example" 的第一个 <p> 元素

document.querySelector("p.example");

2、获取文档中有 "target" 属性的第一个 <a> 元素

document.querySelector("a[target]");

3、多个选择器时，作用到实际文档流第一个元素上

document.querySelector("span, a");

如果span标签在前作用到span上,如果a标签在span前作用到a上。

示例：

<div class="test5">指定选择器 Dom 1</div>
<div class="test5">指定选择器 Dom 2</div>
<script>
var test6 = document.querySelectorAll(".test5");
    test6[1].onclick = function(){
        abc('指定选择器 Dom 2');
    };
</script>

六、body DOM

直接获取body

var test7 = document.body;
    test7.onclick = function(){
        abc('body Dom');
    };