02 获取dom属性

操作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);
    <div class="div">div1</div>
    <div class="div">div2</div>
    <div class="div">div3</div>

    //通过document.getElementsByClassName('')获取类选择器的集合
    var box =document.getElementsByClassName('div');
    console.log(box);
    //H5新增
    //document.querySelector('.div')获取选择器的第一个元素
    var firstBox = document.querySelector('.div');//返回页面的第一个.div
    var firstBoxe = document.querySelector('div');//返回页面的第一个div
    console.log(firstBox);
    console.log(firstBoxe);
    //document.querySelectorAll('.div')
    var allBox = document.querySelectorAll('.div');//获取所有的.div
    //获取body元素
    var bodyEle = document.body;//返回body标签        console.log(bodyEle);
    console.dir(bodyEle);//返回body标签   
    //获取Html元素
    var htmlEle = document.documentElement;//返回整个html页面
    console.log(htmlEle);
<script>