DOM获取元素（八种方法）

DOM获取元素

8种方案（两静态四动态两特殊）

 
 
 

1. 两个静态获取

一下两种方法不具有 实时性（只能获取页面已经存在的元素）

使用 css 选择器 进行选择（.类名）

1.1 querySelector

document.querySelector(‘选择器’)

在指定上下文中通过选择器获取第一个元素（只能获取一个），获取不到就是null

1.2 querySelectorAll

document.querySelectorAll(‘选择器’)

在指定上下文中通过选择器获取一组元素集合，获取不到就是空元（通过数组方法取元素）
 
 
 

2. 四个动态获取

 

2.1 getElementById

document.getElementByid('id名')

在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null)
 

2.2getElementByTagName

document.getElementByTagName(‘标签名’)

通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合  (通过数组方法取元素）
 

2.3 getElementByName

document.getElementByName(‘标签名’)

在整个文档中，通过标签的NAME属性值获取一组节点集合（在IE中只有表单元素的NAME才能识别，所以我们一般应用于表单元素的处理）
 

2.4 getElementClassName

document.getElementClassName(‘类名’)

通过指定的上下文或按照class名取指定的标签，获取的是一个元素集合，如果没有获取到元素,那就是空元素集合  (通过数组方法取元素）
 
 
 

3.两个特殊获取

3.1 document.body

var body=document.body;
     console.log(body);

body 属性用于设置或返回文档体。
如果是返回, 该属性返回当前文档的 body 元素。
如果是设置, 该属性会覆盖所有在 body 元素中的子元素, 并用新的内容来替换它。

3.2 document.documentElement

var html=document.documentElement;
     console.log(html);

documentElement 属性以一个元素对象返回一个文档的文档元素。
HTML 文档返回对象为HTML元素。
注意： 如果 HTML 元素缺失，返回值为 null。
 
 
 

4.动态获取中id获取器

动态获取里面 id 得先存在 在获取

id获取器是一个特殊的方法，可以不用变量接收通过id获取的值，直接用id名称调用

<div id="box"></div>
    <script>
        console.log(box);
    </script>