javascript从入门到高级，每天不停更新知识点（11天）

1.JS的组成：

ECMAScript：javascript语法

DOM： 页面文档对象模型

BOM：浏览器对象模型

2.DOM：

文档对象模型：是w3c组织推荐的处理可拓展标记语言（html，xml）的标准编程接口。

3.DOM树：

• 文档：一个页面就是一个文档，dom中使用document表示；

• 元素：页面中的所有标签都是元素，DOM中使用element表示；

• 节点：网页中的所有内容都是节点（标签，属性，文本，注释），DOM中使用node表示；

4.获取元素：

4.0根据ID获取：

使用getElementById()方法可以获取带有ID的元素对象。

  <!-- 因为文档是从上往下加载的，所以先得有标签，我们script写在标签下面 -->
        <div id="time">2019-9-9</div>
        <script>
          var timer=  document.getElementById('time');
            console.log(typeof timer);//返回的是对象
        </script>

4.1 根据标签名获取：

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合。

 <ul>
          <li>中国好</li>
          <li>中国好</li>
          <li>中国好</li>
        </ul>
        <script>
            var lis = document.getElementsByTagName('li');
            console.log(lis);//返回的是对象集合 以伪数组的形式存储
            console.log(lis[0]);
            //我们打印里面的元素对象采取遍历的方式
            for (let i = 0; i < lis.length; i++) {
              console.log(lis[i]);
              
            }
        </script>

还可以获取某个元素内部所有指定标签名的子元素。

element.getElementsByTagName('标签名');

<ul>
          <li>中国好</li>
          <li>中国好</li>
        </ul>
        <ol id="ol">
          <li>3333</li>
          <li>3333</li>
          <li>3333</li>
        </ol>
        <script>
            var ol = document.getElementById('ol');
            console.log(ol.getElementsByTagName('li'));
        </script>
  <div class="box">盒子1</div>
        <div class="box">盒子2</div>
        <ul id="nav">
          <li>首页</li>
          <li>产品</li>
        </ul>
        <script>
        //1.getElementsByClassName  根据类名获得某些元素集合
        // var boxs =  document.getElementsByClassName('box');
        //  console.log(boxs);
        //  2.querySelector  返回指定选择器的第一个元素对象
         var firstBox  = document.querySelector('.box');
         console.log(firstBox);
         var nav = document.querySelector('#nav');
         console.log(nav);
         var li = document.querySelector('li');
         console.log(li);
         //3.querySelectorAll() 返回指定选择器的所有元素对象集合。
         var allBox = document.querySelectorAll('.box');
         console.log(allBox);
         var lis = document.querySelectorAll('li');
         console.log(lis);
​
        </script>

4.2 获取body标签。

 <script>
          var bodyEle = document.body;
          console.log(bodyEle);
          console.dir(bodyEle);
        </script>

4.3 获取html元素

var  htmlEle  = document.documentElement;
          console.log(htmlEle);