JavaScript中DOM操作获取标签内容

一、通过id属性值获取标签对象

（只能获取一个标签对象）
document.getElementById(‘id属性值’)

    //获取标签页中id为div1的标签对象
    var oDiv1 = document.getElementById('div1');
    //输出为id为id为div1的标签内容
    console.log(oDiv1);

二、通过class属性值获取标签对象

document.getElementsByClassName(‘class属性值’)
elements后面有个s表示复数，可以选中所有的class，在js中class一律定义为classname，不能被forEach()循环

    var oDiv2 = document.getElementsByClassName('div2');
    //输出所有class是div2的数据
    console.log(oDiv2);
    //输出第一个div2的数据
    console.log(oDiv2[0]);
    //输出第二个div2的数据
    console.log(oDiv2[1]);

三、通过标签名字获取标签对象

document.grtElementsByTagName('标签名字)
获取到的也是一个伪数组，不能被forEach()循环

    var oDiv3 = document.getElementsByTagName('div');
    //输出所有标签是div2的数据
    console.log(oDiv3);
    //输出第二个div的数据
    console.log(oDiv3[1]);

四、通过neme标签获取标签对象

document.getElementByname
获取到的也是一个伪数组，不能被forEach()循环

    var oDiv4 = document.getElementByname('s');
    输出所有name标签是s的数据
    console.log(oDiv4);
    输出name标签是s的第二个数据
    console.log(oDiv4[1]);

五、通过语法规范，获取标签对象

document.querySelector() //获取符合条件的第一个标签
document.querySelectorAll() //获取符合条件的所有标签
获取到的也是一个数组，可以被forEach()循环，但是低版本ie不兼容以上两种方式

        //获取id为div1的标签内容
        var oQuery1 = document.querySelector('#div1');
        //输出为id为div1的标签内容
        console.log(oQuery1);
        
        //获取class为div2的标签内容
        var oQuery2 = document.querySelector('.div2');
        //输出为class为div1的标签内容
        console.log(oQuery2);
        
        //通过标签的标签名称来获取,只获取第一个div标签
        var oQuery3 =  document.querySelector('div');
        //输出为标签为div的标签内容
        console.log(oQuery3);
        
        //获取所有标签为div的标签
        var oQuery4 = document.querySelectorAll('div');
        //输出所有标签为div的数组，
        console.log(oQuery4);
        
        //获取所有name属性值为s的标签
        var oQuery5 = document.querySelectorAll('[name="s"]');
        //输出name属性值的数组
        console.log(oQuery5);
        
        // 获取type属性值是text的标签
        var oQuery6 = document.querySelectorAll('[type="text"]');
        //输出type属性为text的数组
        console.log(oQuery6);
        
        //还可以通过标签结构获取ul下的li标签，
        var oQuery7 = document.querySelectorAll('ul>li');
        console.log(oQuery7);

注：
A、只要是css语法支持的选择器语法都行，父子,后代,兄弟…都支持
B、两种方式获取的都是伪数组,但是获取的数组内容,不同
C、如果要循环，尽量用for循环，不容易出问题