[js] DOM querySelector getElementsByClassName getElementById...

document.getElementById(‘id属性值’);
只能通过 id属性值 获取标签对象
执行结果 是一个 独立的标签对象

                document.getElementsByClassName('class属性值');
                    只能通过 class属性值 获取标签对象 
                    执行结果 是一个 伪数组
                    不支持 forEach 

                document.getElementsByTagName('标签名称');
                    只能通过 标签名称 获取标签对象 
                    执行结果 是一个 伪数组
                    不支持 forEach 

                document.getElementsByName('标签name属性值名称');
                    只能通过 标签name属性值 获取标签对象 
                    执行结果 是一个 伪数组
                    支持 forEach 

<div id="div1" class="div2" name="div3" abc="def">我是div标签</div>

        // //  标签名称
        var res1 = document.querySelector('div');
        //<div id="div1" class="div2" name="div3" abc="def">我是div标签</div>
        console.log( res1 );   


        // //  id属性值
        var res2 = document.querySelector('#div1');
        // console.log( res2 );

        // //  class属性值
        var res3 = document.querySelector('.div2');
        console.log( res3 );

        // //  其他属性值  '[属性="属性值"]'
        var res4 = document.querySelector('[name="div3"]');
        console.log( res4 );

css语法形式

// 获取 ul标签中的 所有 li标签
        var res6 = document.querySelectorAll('ul>li');
        console.log( res6 );
 
        // 获取 ul标签中 第一个li标签
        var res7 = document.querySelector('ul>li:first-child');
        console.log( res7 );

// // 兼容 但是 不好用的 获取标签对象方法

getElementById

// // id属性值
        var res13 = document.getElementById('div1');
        console.log( res13 ); 

getElementsByTagName

        // // 标签名称
        var res15 = document.getElementsByTagName('div');
        console.log( res15 );

getElementsByClassName

<div id="div1" class="div2" name="div3" abc="def">我是div标签</div>

 // // class属性值
        var res14 = document.getElementsByClassName('div2');
        console.log( res14 );

getElementsByName

var res16 = document.getElementsByName('div3');
        console.log( res16 );


for( var i = 0 ; i <= res16.length-1 ; i++ ){
            console.log( res16[i] );
        }