JavaScript DOM

Posted 2021-03-17 小白森

获取元素

• 根据 ID 获取元素

语法: document.getElementById(id)

<div id=‘time‘>2020-01-09</div>

<script>
    var timer = document.getElementById(‘time‘);
    console.log(timer); // 根据 ID 获取
    // 查看里面的属性和方法
    console.dir(timer)
</script>

• 根据标签名获取元素

语法: document.getElementsByTagName(‘标签名‘)

<ul>
    <li>u1</li>
</ul>

<ol id="ol">
    <li>ol</li>
</ol>

<script>
    // 根据元素名获取
    var lis = document.getElementsByTagName(‘li‘);
    console.log(lis);  // htmlCollection(2) [li, li] 返回所有的 ol和ul 的 li 元素 是复数

    // 可以通过ele 继续获取元素名
    var ol_ele = document.getElementById(‘ol‘);
    var ol_lis = ol_ele.getElementsByTagName(‘li‘);
    console.log(ol_lis);  // ol 下所有的li

</script>

• 根据类名获取元素  H5 新增

语法: document.getElementsByClassName(‘类名‘)

<div class="cla"></div>
<script>
    var cla = document.getElementsByClassName(‘cla‘);  // HTMLCollection [div.cla] 返回对象集合，需要使用对象 得取第一个元素，第二个是length
    console.log(cla);
</script>

• 选择器方式获取元素 H5新增

语法: 
document.querySelector(‘选择器‘)
document.querySelectorAll(‘选择器‘)

<div class="cla"></div>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var cla = document.querySelector(‘.cla‘); // 返回对象元素， 如果是class 则写.类名，id 则写#id
    console.log(cla);

    var lis = document.querySelectorAll(‘li‘);  // 返回所有对象集合
    console.log(lis);
</script>

• 获取特殊元素(body, html)

document.body;  // body
document.documentElement; // html