JS学习笔记---14 DOM-2、获取元素

2、获取元素

2.1、如何获取页面元素

2.2、根据ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById(‘ID号’);

• 参数 id 是一个字符串
• 返回的是一个元素对象

//1、因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签下面
//2、参数 id 是大小写敏感的字符串
//3、返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
//4、console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(timer);

2.3、根据标签名获取

（1）使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName(‘标签名’);

• 因为得到的是一个对象集合，所以我们想要操作里面的元素就要遍历
• 得到元素对象时动态的
• 如果页面中只有一个li，返回的还是伪数组的形式
• 如果页面中没有这个元素，返回空的伪数组的形式

<ul>
    <li>知否知否，应是绿肥红瘦1</li>
    <li>知否知否，应是绿肥红瘦2</li>
    <li>知否知否，应是绿肥红瘦3</li>
    <li>知否知否，应是绿肥红瘦4</li>
    <li>知否知否，应是绿肥红瘦5</li>
</ul>
<script>
    //1、返回的是 获取过来元素对象的集合，以伪数组的形式储存
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    //2、我们想要一次打印里面的元素对象，我们可以遍历
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    //3、如果页面中只有一个li，返回的还是伪数组的形式
    //4、如果页面中没有这个元素，返回空的伪数组的形式
</script>

（2）还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName(‘标签名’);

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

//element.getElementsByTagName('标签名');
//var ol = document.getElementsByTagName('ol');
//console.log(ol[0].getElementsByTagName('li'));	//必须是单个对象，不能使用对象集合
var ol1 = document.getElementById('ol');
console.log(ol1.getElementsByTagName('li'));

2.4、通过HTML5 新增的方法获取

1、document.getElementByClassName(‘类名’);

• 根据类名返回元素对象集合。

2、document.querySelector(‘选择器’);

• 根据指定选择器返回第一个元素对象
• **切记：**里面的选择器需要加符号 类：.box id：#nav

3、document.querySelectorAll(‘选择器’);

• 根据指定选择器返回所有元素对象集合

//1、> document.getElementByClassName('类名');	根据类名返回元素对象集合。
var boxs = document.getElementsByClassName('box');
console.log(boxs);
//2、document.querySelector('选择器');    根据指定选择器返回第一个元素对象
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
//3、> document.querySelectorAll('选择器');     根据指定选择器返回所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);

2.5、获取特殊元素（body、html）

获取body 元素

document.body;

• 返回 body 元素对象

获取html 元素

document.documentElement;

• 返回 html 元素对象