DOM之获取元素

注意，此处的script标签要写在body标签中，在最下面。

利用id获取元素 getElementById(id名);

getElementById()方法中的id名格式为字符串，返回的是object对象。

<div id="time">2021-08-13</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);//<div id="time">2021-08-13</div>
</script>

利用标签名获取元素 getElementsByTagName(标签名)

getElementsByTagName()方法中的标签名格式为字符串，返回的是获取过来的元素对象的集合，以伪数组的形式存储的。

<li>知否知否，应是绿肥红瘦1</li>
<li>知否知否，应是绿肥红瘦2</li>
<li>知否知否，应是绿肥红瘦3</li>
<li>知否知否，应是绿肥红瘦4</li>
<li>知否知否，应是绿肥红瘦5</li>
<script>
    var lis = document.getElementsByTagName('li');
    console.log(lis);//HTMLCollection(5) [li, li, li, li, li]
    console.log(lis[1]);//<li>知否知否，应是绿肥红瘦2</li>
</script>

利用父元素获取某些元素

<ul>
    <li>知否知否，应是绿肥红瘦</li>
    <li>知否知否，应是绿肥红瘦</li>
</ul>
<ol id='ol'>
    <li>啦啦啦啦啦啦</li>
    <li>啦啦啦啦啦啦</li>
</ol>
<script>
	//方法1
    var ol = document.getElementsByTagName('ol');
    console.log(ol[0].getElementsByTagName('li'));
	//方法2
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
</script>

利用类名获取元素 getElementsByClassName()

getElementsByClassName()方法中的类名格式为字符串，返回的是获取过来的元素对象的集合，以伪数组的形式存储的。

<div class="box">盒子</div>
<div class="box">盒子</div>
<div class="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);//HTMLCollection(2) [div.box, div.box]
</script>

根据指定选择器返回第一个元素对象 querySelector(‘选择器’)

querySelector()方法中的选择器格式为字符串，需要有符号，就像在css中选择一样，返回的是object对象。

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    var firstbox = document.querySelector('.box');
    console.log(firstbox);		//<div class="box">盒子</div>
    var nav = document.querySelector('#nav');
    console.log(nav);		//<div id="nav">...</div>
    var li = document.querySelector('li');
    console.log(li);		//<li>...</li>
</script>

根据指定选择器返回所有元素对象 querySelectorAll(‘选择器’)

querySelectorAll()方法中的选择器格式为字符串，返回的是获取过来的元素对象的集合，以伪数组的形式存储的。

<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>
<script>
    var allboxs = document.querySelectorAll('.box');
    console.log(allboxs);
</script>

获取body元素 body

返回的是object对象。

<script>
    var bodyele = document.body;
    console.log(bodyele);
    console.log(typeof bodyele);
</script>

获取html元素 documentElement

返回的是object对象。

<script>
    var htmlele = document.documentElement;
    console.log(htmlele);
    console.log(typeof htmlele);
</script>