原生js获取document_JavaScript获取html中DOM节点Document对象

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

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

具体看以下内容

一、ID Dom

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

示例：

ID Dom

test1.onclick = function(){

alert('ID');

};

二、Class Dom

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

示例：

Class Dom

test2[0].onclick = function(){

abc('Class');

};

三、Name Dom

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

示例：

Name Dom

test3[0].onclick = function(){

abc('Name');

};

四、TagName Dom

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

TagName Dom

test4[3].onclick = function(){

abc('TagName');

};

五、指定选择器 DOM

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

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

1、获取文档中 class="example" 的第一个 

 元素

document.querySelector("p.example");

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

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

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

document.querySelector("span, a");

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

示例：

指定选择器 Dom 1

指定选择器 Dom 2

test6[1].onclick = function(){

abc('指定选择器 Dom 2');

};

六、body DOM

直接获取bodyvar test7 = document.body;

test7.onclick = function(){

abc('body Dom');

};