Web API---获取元素

目录

1、使用getElementById('id名')方法获取带有id的元素对象

2、使用getElementsByTagName('标签名')方法返回带有指定标签名对象的集合

3、使用getElementsByClassName('类名')方法根据类名返回元素对象的集合

 4、使用querySelector('选择器')方法根据类指定选择器返回第一个元素的对象，使用querySelectorAll('选择器')方法根据类指定选择器返回所有元素的对象

5、获取body元素

6、获取html元素

1、使用getElementById('id名')方法获取带有id的元素对象

<div id="u">用户名</div>


<script>
        var t= document.getElementById('u');
        console.log(t);
        console.log(typeof t);    //输出t的类型
</script>

2、使用getElementsByTagName('标签名')方法返回带有指定标签名对象的集合

    <ul>
        <li>宝塔镇河妖1</li>
        <li>宝塔镇河妖2</li>
        <li>宝塔镇河妖3</li>
        <li>宝塔镇河妖4</li>
        <li>宝塔镇河妖5</li>
    </ul>

（1）返回的是获取过来元素对象的集合，以伪数组的形式存储

    var a=document.getElementsByTagName('li');
        console.log(a);
        console.log(a[0]);    //获取第一个li
        
        //遍历数组
        for (i=0;i<10;i++) {
            console.log(a[i]);
        }

（2）无论个数为1或10，返回的都是伪数组

（3）元素个数为0时，返回一个空的伪数组

        var x=document.getElementsByTagName('a');
        console.log(x);

（4）获取某个标签内部所有指定标签名的子元素（父元素必须是单个对象）

    <ul>
        <li>宝塔镇河妖1</li>
        <li>宝塔镇河妖2</li>
        <li>宝塔镇河妖3</li>
        <li>宝塔镇河妖4</li>
        <li>宝塔镇河妖5</li>
    </ul>

    <ol id="wx">
        <li>吨吨吨6</li>
        <li>吨吨吨7</li>
        <li>吨吨吨8</li>
        <li>吨吨吨9</li>
        <li>吨吨吨0</li>
    </ol>

        //获取ol列表下的li
        var ol=document.getElementById('wx');
        console.log(ol.getElementsByTagName('li'));
        console.log(typeof ol);

3、使用getElementsByClassName('类名')方法根据类名返回元素对象的集合

<div class="box">盒子</div>

        var c=document.getElementsByClassName('box');
        console.log(c);

 4、使用querySelector('选择器')方法根据类指定选择器返回第一个元素的对象，使用querySelectorAll('选择器')方法根据类指定选择器返回所有元素的对象

    <div id="u">用户名</div>
    <div class="box">盒子</div>

        var d=document.querySelector('div');
        console.log(d);
        var e=document.querySelector('#u');
        console.log(e);
        var f=document.querySelector('.box');
        console.log(f);
        var i=document.querySelectorAll('div');
        console.log(i);

5、获取body元素

        var m=document.body;
        console.log(m);
        console.log(typeof m);

6、获取html元素

        var n=document.documentElement;
        console.log(n);
        console.log(typeof n);

---