DOM获取值

文档树，也是对象 document。编程接口

<div id="time">2022-1-1</div>

getElementById 驼峰命名法

var a=document.getElementById('time'); //('time') 大小写敏感，字符串
console.log(a);
//console.log(document.getElementById('time'));
console.dir(timer);//打印属性和方法

输出结果（console.dir(timer);–>控制台出现div#time–>点开，往下翻，发现红字部分的内容）

 <ul>
        <li>知否1</li>
        <li>知否2</li>
        <li>知否3</li>
        <li>知否4</li>
        <li>知否5</li>
    </ul>
    <ol>    
    <!-- 方法2：添加id<ol id="ol"> -->
        <li>知否6</li>
        <li>知否6</li>
        <li>知否6</li>
        <li>知否6</li>
        <li>知否6</li>
    </ol>

  //伪数据存储，获取过来的元素 是对象的集合(0,1....元素，返回都是伪数组)
      var lis=  document.getElementsByTagName('li');//获取到全部的li
      console.log(lis);
      //遍历
      for(var i=0;i<lis.length;i++){
        console.log(lis[i]);
      }

输出结果

     //只获取ol下的li
      var ol=document.getElementsByTagName('ol');
     // console.log(ol.getElementsByTagName('li'))//报错，未指明父元素。父元素必须是单个对象，不包括父元素
      console.log(ol[0].getElementsByTagName('li'));
      //方法2：添加id <ol id="ol">
      var ol2=document.getElementById('ol');
      console.log(ol.getElementsByTagName('ol'));

element.getElementsByTagName指明父元素结果

只有一个ol，因此报错

添加ol列表

 <ul>
        <li>知否1</li>
        <li>知否2</li>
        <li>知否3</li>
        <li>知否4</li>
        <li>知否5</li>
    </ul>
    <ol id="ol">
        <li>知否6</li>
        <li>知否6</li>
        <li>知否6</li>
        <li>知否6</li>
        <!-- <li>知否6</li> -->
    </ol>
    <ol id="ol">
        <li>知否7</li>
        
        <!-- <li>知否6</li> -->
    </ol>
    <ol id="ol">
        <li>知否8</li>
        
        <!-- <li>知否6</li> -->
    </ol>

  //只获取ol下的li
      var ol=document.getElementsByTagName('ol');
     // console.log(ol.getElementsByTagName('li'))//报错，未指明父元素。父元素必须是单个对象，不包括父元素
      console.log(ol[1].getElementsByTagName('li'));

h5新特性
类名获取值
需要考虑兼容性

    <div class="box">name</div>
    <div class="box">age</div>
    <ul id="nav">
        <li>1</li>
        <li>2</li>
    </ul>

  //querySlector 指定选择器的第一个元素对象，只能返回一个
        var a=document.querySelector('.box');
        console.log(a);
        
         var b=document.querySelector('li');//不需要加符号.或者#  console.log(b)---> <li>1</li>
         
         var c=document.querySelectorAll('.box');//获取全部
        console.log(c);
		//NodeList(2) [div.box, div.box] -->0: div.box1: div.box 
		//等于document.getElementsByClassName('box');
		//body,html 获取
 		console.log(document.body);
        console.log(document.documentElement);