JS获取元素的方法

DOM获取元素的方法

• ID获取元素 document.getElementById();

• Name获取元素 document.getElementsByTagName()

• H5新增方法获取元素：

1. document.getElementsByClassName()
2. document.querySelector()
3. document.querySelectorAll()

• 获取特殊元素

4. document.body
5. document.documentElement

通过ID获取元素

<div id="time">2020-4-23</div>
		<script>
// 1.因为我们文档页面从上往下加载，所以得现有标签，所以我们script写到标签下面
        // 2.get 获得 element 元素 by 通过  遵守驼峰命名法
        // 3.参数 id是大小写敏感的字符串
        // 4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5.console.dir 打印我们返回的元素对象 更好得查看里面的属性和方法
        console.dir(timer);
        </script>

通过Name获取元素

<ul>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
    </ul>
    <ul id="qiqi">
        <li>奇奇1</li>
        <li>奇奇2</li>
        <li>奇奇3</li>
        <li>奇奇4</li>
        <li>奇奇5</li>
    </ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2.我们想要依次打印里面的元素对象可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3.element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var qiqi = document.getElementById('qiqi');
        // console.log(qiqi);
        var qiqi_li = qiqi.getElementsByTagName('li');
        console.log(qiqi_li);
</script>

H5新增元素获取方式

<div id="time">2020-4-23</div>
    <ul>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
        <li>我是贝贝</li>
    </ul>
    <ul id="qiqi">
        <li>奇奇1</li>
        <li>奇奇2</li>
        <li>奇奇3</li>
        <li>奇奇4</li>
        <li>奇奇5</li>
    </ul>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <script>
	// 1.getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2.querySelector() 返回指定选择器的第一个元素对象，里面的选择器需要加符号，.box,#qiqi
        var qiqi1 = document.querySelector('#qiqi');
        console.log(qiqi1);
        var box1 = document.querySelector('.box');
        console.log(box1);
        var li = document.querySelector('li');
        console.log(li);
        // 3.querySelectorAll() 返回指定选择器的所有元素的对象集合
        var li_All = document.querySelectorAll('li');
        console.log(li_All);
        var ul_All = document.querySelectorAll('ul');
        console.log(ul_All);
        var box_All = document.querySelectorAll('.box');
        console.log(box_All);
	</script>

获取特殊元素

// 获取特殊元素
        // 获取body元素
        var body1 = document.body;  // 返回body元素对象
        console.log(body1);
        // 获取html元素
        var html1 = document.documentElement;
        console.log(html1);