js之DOM学习获取元素

目录

DOM树

获取元素的方式

getElementById根据id来选

getElementByTagName根据标签名来选

getElementByClassName根据类的名字来选，把类是xxx的都会选出来

H5新增获取元素方式

获取body和html

---

DOM（Document Object Model)文档对象模型，是W3C组织推荐的处理可扩展标记语言的（HTML或XML）的标准编程接口。通过这些接口可以改变网页的内容、结构和样式。

DOM树

获取元素的方式

getElementById根据id来选

 var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 4.返回的是一个对象
        console.dir(timer);
        // 5.打印我们返回的元素对象，更好的查看里面的属性和方法。

getElementByTagName根据标签名来选

  //返回的是获取过来元素对象的集合，得到的对象是动态的，以伪数组的形式存储的，有长度有索引号，但是没有pop,push等方法
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        console.log(lis.length);
        //我们想要依次打印里面的元素对象，采取遍历
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        //页面中有一个也是伪数组形式
        //没有这个元素，返回空的伪数组

        // 获取ol里面的就不能通过document 通过父元素 (必须要指明哪一个元素)
        // var ol = document.getElementsByTagName('ol');
        //返回的还是伪数组[ol]形式就不能作为我们的父元素
        // console.log(ol[0].getElementsByTagName('li'));
        //这样麻烦 我们可以给ol指定一个id id是唯一的
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

getElementByClassName根据类的名字来选，把类是xxx的都会选出来

//根据类选择器的名字来选
        console.log(document.getElementsByClassName('box'));

H5新增获取元素方式

querySelector 可以根据选择器来选（标签选择器，类选择器，id选择器）选择第一个元素

要想全选用

querySelectorAll

        //querySelector('选择器');根据指定选择则其返回第一个元素对象
        // 类选择，标签，id。。。
        //里面的选择器要加各自选择器的标志
        console.log(document.querySelector('#nav'));
        console.log(typeof document.querySelector('li'));

        // 3querySelectorAll('选择器')根据指定选择器返回所有  伪数组
        console.log(document.querySelectorAll('.box'));

获取body和html

1.获取body,直接document.body

2.获取html,document.documentElement

 

  // 1.获取body元素
        console.log(document.body);
        var bod = document.body;
        console.dir(document.getElementsByTagName('div'));
        console.dir(bod); //object
        //2.获取html
        console.log(document.documentElement);