笨橘子の学习---DOM

2 .获取元素

2.1  如何获取页面元素

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素，获取页面中的元素可以使用以下几种方法：

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取

1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写在标签下面
2. get 获得 elment 元素 by 通过 驼峰命名法
3. 参数id是大小写敏感的字符串
4. 返回的是一个元素对象

    var timer = document.getElementById('time');

    console.log(timer);

    console.log(typeof timer);

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

    console.dir(timer);

2.2  根据标签名获取

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

document.getElementsByTagName('标签名')；

还可以获取某个元素(父元素)内部所有指定标签的子元素

element.getElementsByTagName();

注意：

1.因为得到的是一个对象的集合，所以我们想要的操作里面的元素就需要遍历。

2.得到的元素对象是动态的。

例如：

<ul>

    <li>知否知否，应是绿肥红瘦</li>

    <li>知否知否，应是绿肥红瘦</li>

    <li>知否知否，应是绿肥红瘦</li>

    <li>知否知否，应是绿肥红瘦</li>

    <li>知否知否，应是绿肥红瘦</li>

    <li>知否知否，应是绿肥红瘦</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]);

    }      

</script>

2.3  根据类名获取某些元素集合

1.getElementsByClassName 根据类名获得某些元素集合

var boxs = document.getElementsByClassName('box');

console.log(boxs);

2.querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 

类+“ . ”       id+“ # ”

    var firstBox = document.querySelector('.box');

    var nav = document.querySelector('#nav');

    var li = document.querySelector('li');

2.4  通过 HTML5 新增的方法获取

1.document.getElementsByClassName('类名')     根据类名返回元素对象集合

2.document.querySelector('选择器')       根据指定选择器返回第一个元素对象

3.document.querySelectorAll('选择器')      根据指定选择器返回

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

获取body元素

1.  doucment.body    // 返回body元素对象

获取html元素

2.  doucment.doucmentElement   //返回html元素对象