DOM获取元素

DOM 获取元素

DOM简介

什么是DOM

文档对象模型(Document Object Model，简称DOM)，是w3c组织推荐的处理可扩展标记语言(XML 或HTML)的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些接口可以改变网页的内容、结构、样式

如何获取元素

主要有以下几种方法：

1. 根据ID获取
2. 根据标签名获取
3. 通过HTML5新增的方法获取
4. 特殊元素获取

根据ID获取

使用getElementById()方法可以获取带有ID的元素对象（直接根据ID也可以操作元素对象）

参数为ID值（大小写敏感的字符串），返回一个匹配到ID的DOM Element对象，若当前document下没有找到，返回null。

console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法

//     <div id="time">2021-9-3</div>
let time=document.getElementById('time');
console.log(typeof time);//object
console.dir(time);//div#time

根据标签名获取

使用getElementByTagName()方法可以返回所有指定标签名的对象的集合

document.getElementByTagName(‘标签名’)

/*
    <div>
        <div class="item"></div>
    </div>
*/
 let divs=document.getElementsByTagName('div');
 console.log(divs);//HTMLCollection(2);
 console.log(divs[1]);//<div class="item"></div>

注意：

1. 因为得到的是一个对象的集合，所以要操作里面的元素就要遍历,比如要操作.item，应该操作divs[1];
2. 得到的元素对象是动态的
3. 如获取的元素集合只有一个（或没有）元素，也是以伪数组的形式存储，应该通过divs[0]等方式获取,不能直接使用divs

还可以根据每个元素(父元素)指定内部标签名的子元素,即Element.getElementByTagName(‘标签名’)
比如，获取item

let divs=document.getElementsByTagName('div');
let item=divs[0].getElementsByTagName('div');
console.log(item[0]);//<div class="item"></div>

注意:父元素必须是单个对象（必须指名是哪一个元素对象，注意别误用到伪数组），获取的时候不包括父元素自己

通过HTML5新增的方法获取（IE浏览器只有IE9以上才能使用）

1. 使用getElementByClassName('类名')获取指定类名的元素对象集合
2. 使用querySelector('选择器')根据指定选择器返回第一个元素对象,切记选择器要加符号，比如类选择器:‘.Classname’，id选择器:’#idName’;
3. 使用querySelectorAll('选择器')根据指定选择器返回元素对象集合

特殊元素的获取

1. 获取body元素

document.body ;// 返回body元素对象

2. 获取html元素

document.documentElement;//返回html元素对象