JavaScript 获取元素的8种方法_js获取当前元素下的元素

DOM

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

JS获取DOM元素的八种方法

• 通过ID获取（getElementById）
• 通过name属性（getElementsByName）
• 通过标签名（getElementsByTagName）
• 通过类名（getElementsByClassName）
• 获取html的方法（document.documentElement）
• 获取body的方法（document.body）
• 通过选择器获取一个元素（querySelector）
• 通过选择器获取一组元素（querySelectorAll）

1、通过元素的ID去拿元素 --> 获取的是一个指定的元素（getElementById）

若页面上有一个或多个对应的ID ，则只获取第一个ID对应的元素
若页面上没有对应的ID ，则拿到的是个 null
console.log(div1);// 只有在标准浏览器下支持
console.log(document.getElementById(‘div1’));//全浏览器都支持

console.log(document.getElementById('div1'));

document 在这里是上下文的意思， 就是我在哪个范围里边去找元素

注意：

• 在ie6、7中,会把表单元素（input）的name属性值当做ID来使用
• 在ie6、7中，不区分ID的大小写
• 项目实战注意:不要让表单元素的name和其他元素的id重复，不要用id的大小写来区分我们的不同元

2、通过元素的类名（class名）获取元素 --> 获取的是一组元素集合（getElementsByClassName）

通过元素的类名（class的值） 是项目中最常用的一种方法，但是在ie6-ie8中会报错。获取多个的这几个方法，即使你获取的只有一个，他也是类数组，也是一个集合，如果想用其中的第一个，你也要通过索引拿出来用
若页面上没有对应的类名 ，那么我们得到的就是一个空集合；
若页面上有一个或多个对应的类名，那么我们得到的就是一个或多个元素组成的集合
。

console.log(document.getElementsByClassName('div2'));
    console.log(document.getElementsByClassName('div2')[0]);
    console.log(document.getElementsByClassName('div2')[1]);
    console.log(document.getElementsByClassName('div3')[0]);

3、 通过元素的标签名获取（tagName）;获取元素跟类名获取的一样 ；都是一组元素集合（getElementsByTagName）

在整个文档中，通过元素的标签名获取一组元素。获取的是一个对象数据类型结果，并且是一个类数组（以数字作为索引，索引从0开始，逐级递增，索引代表的是当前对应的某一个元素，有一个叫做length的属性代表获取的个数）

console.log(document.getElementsByTagName('div'));
    console.log(document.getElementsByTagName('div')[3]);

1.获取的结果是一个类数组。
2.上下文不必须是document了，因为getElementsByTagName方法在不仅在Document类的原型上也在Element类的原型上，所以document和元素都可以使用这个方法。

４、通过name属性（getElementsByName）

1.上下文必须是document。
2.必须传参数，参数是是获取元素的name属性。
3.返回值是一个类数组，没有找到返回空数组。
4.在IE浏览器中只能获取到表单元素，当然我们一般也只用它获取表单元素，从ie10开始可以不只是表单元素。

document.getElementsByName('name')

5.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。

6.获取body的方法（document.body）

document.body是专门获取body这个标签的。

7.通过选择器获取一个元素（querySelector）

用法：

1.上下文可以是document，也可以是一个元素。
2.参数是选择器，如：“div .className”。
3.返回值只获取到一个元素。
这个方法不兼容IE7以及以前版本。

8.通过选择器获取一组元素（querySelectorAll）

1.上下文可以是document，也可以是一个元素。
2.参数是选择器，如：“div .className”。
3.返回值是一个类数组。
同querySelector，不兼容IE7。

缩小上下文的范围

document.getElementsByClassName('div4')[0].getElementsByClassName('span1')[0]
    document.getElementsByClassName('div4')[0].getElementsByTagName('span')[0]

点 在这里表示从属关系 身体.胳膊 翻译成汉语 就是 “的”