JavaScript基础学习 DOM

DOM获取元素

    DOM开始学习





    
2021-12-13


    

        
DOM学习1
        
DOM学习2
        
DOM学习3
    
    

        
JS one
        
JS two
        
JS three
    


    
盒子1
    
盒子2
    

        

            
首页
            
产品
        
    

    
        //  文档页面从上往下加载，所以先得有标签，需要将script写到标签的下面


        //  1.根据id获取元素
        //  参数 id是大小写敏感的字符串
        // 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer); //object类型
        //console.dir   打印我们返回的元素对象  更好的查看里面的属性和方法
        console.dir(timer);

        console.log('-------------------------------------------------1');

        // 2.根据标签名获取元素
        // 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis); // [li, li, li]
        console.log(lis[0]);
        //  我们想要依次打印里面的元素对象可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }

        // 如果页面当中只有一个li 返回的还是伪数组的形式

        // 如果页面当中没有这个元素 返回的是空的伪数组


        console.log('-------------------------------------------------2');
        // 如何获取某个父元素内部所有指定标签名的子元素  例如：获取ol标签当中的所有li标签
        //  方法一
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

        // 方法二
        var num = document.getElementsByTagName('ol');
        console.log(num[0].getElementsByTagName('li')); //  父元素要是哪个指定具体的元素


        // 3.  通过HTML5 新增方法来获取元素
        // 3(1)getElementsByClassName  根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        // 3(2)querySelector 返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);

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

        var divs = document.querySelector('div');
        console.log(divs); // 输出