526互联

02 操作dom

发布时间 2023-04-13 23:51:22作者: 摆烂员

操作dom

<div id="time">2023/4/13</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ol id="ol">
    <li>ol>1</li>
    <li>ol>2</li>
    <li>ol>3</li>
    <li>ol>4</li>
</ol>
<script>
    //文档从上到下加载，js文件必须写在元素下面才能获取到
    //获取标签的id
    var time = document.getElementById('time');
    console.log(time);//<div id="time">2023/4/13</div>
    console.log(typeof time);//object
    console.dir(time)//div#time
    //获取指定标签名的集合，以为数组的形式存储
    var li  = document.getElementsByTagName('li');
    console.log(li);
    //遍历li集合 如果页面中只有一个li 返回的还是伪数组形式，如果没有则是空的伪数组
    for(var i = 0;i<li.length;i++){
        console.log(li[i]);
    }
    //getElementsByTagName('标签名') 获取ol标签下面的li
    // var ol  = document.getElementsByTagName('ol');
    // var olli = ol[0].getElementsByTagName('li');
    // console.log(olli);
    // console.dir(olli);
    //通常用byid获取
     var ol  = document.getElementById('ol');
    var olli = ol.getElementsByTagName('li');
    console.log(olli);