JS基础入门

一、JavaScript概述

   1、JavaScript 简称js，是运行在javascript解释器或者特定引擎中的解释型、弱类型、面向对象的脚本语言

    2、javascript解释器：
        1）浏览器自带js解释器
        2、独立安装一个js解释器 - node.js时

    3、编译型：运行程序之前，需要检查语法是否正确，如果不正确直接不允许运行，比如：java、c、c++等 更加严格
       解释器：运行程序之前，不要检查语法是否正确，直接运行，碰到错误就会停止运行，比如：javascript、php、node.js等 更自由

    4、js特点：
        1、代码可用任何文本编辑器编写
        2、解释型语言，无需编译
        3、弱类型语言：不需要进行规定，你想放什么就放什么 - 爱自由
            变量的数据类型是由值来决定的

     5、js作用：
        1、客户端的数据的计算：购物车
        2、表单的数据验证：（手机号、身份证、邮箱、密码）
        3、提供了事件（点击、鼠标移入移除、键盘...）
        4、网页中一切css做不了的特效，都由js完成
        5、和服务器端进行交互 ajax

     6、javascript使用：
        1）在HTML页面写上一个标签： - 临时测试
            <script>
                js代码
            </script>

        2）创建一个xx.js文件，在里面书写js代码，最后在HTML页面引入
            <script src="xx.js文件路径">//此处不再支持书写代码了</script>

    7、JS的调试语句：代码运行期间，如果碰到错误，会报错，但是后续代码就不会执行了，甚至如果只是逻辑错误不是语法错误，那并不会报错，我们需要一个方式去帮助我们找到错误何在
           1）在控制台输出日志：console.log(想要输出的东西);→ 打桩输出，疯狂打桩！
            2）在页面上进行输出：document.write(想要输出的东西); → 但不能用，如果绑定上了事件，会将页面上所有的内容全都替换掉
            3）弹出框显示：alert(想要输出的东西); → 会卡主整个页面，必须关闭后用户才能看到HTML和CSS

        8、js的语法规范：是严格要求区分大小写的，不能乱写！

        二、javascript组成

        1、javascript一共由3部分组成：
                1）ECMAScript - 简称ES3/5/6，核心语法（逻辑部分）
                2）Document Object Model - 简称DOM，文档对象模型（专门用于操作网页文档HTML+CSS的）
               3）Browser Object Model - 简称BOM，浏览器对象模型 （专门用于操作浏览器的）

        2、DOM树：DOM将HTML看做了是一个倒挂的树状结构，但是树根不是HTML标签。
              1）树根：是一个document对象，document对象不需要程序员创建，由浏览器的JS解释器创建，一个页面只有一个document
              2）作用：提供了一些属性和方法，可以让我们程序员去操作整个DOM树（增删改查每一个DOM节点）
              3）DOM节点：一个标签、文本、属性、元素

        3、查找元素：
                  1）通过HTML的特点去查找元素。
                  2）id查找：var elem=document.getElementById("id值");在当前DOM树中，根据元素的id，获取具体的DOM节点。
                  3）返回：找到了，返回对应的元素； 没找到，null。
                  4）特殊：（1）如果页面上有多个重复的id，只会返回第一个
                         （2）此方法找到的是单个元素 - DOM节点是可直接用于做操作的
                         （3）此方法不能使用 - 以后留给后端工程师使用

       4、标签名查找： 1）var elems=document/已经找到的父元素.getElementsByTagName("标签名");
       在当前DOM树中，根据标签名获取元素们
       2）返回：找到了，返回一个DOM集合；没找到，空数组
       3） 特殊：（1）返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部
         （2）不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素

       ★3、class查找：var elems=document/已经找到的父元素.getElementsByClassName("标签名");
       在当前DOM树中，根据标签名获取元素们
       2）返回：找到了，返回一个DOM集合；没找到，空数组
       3） 特殊：（1）返回的不是一个DOM节点，而是一个DOM集合，是不能直接用来做操作的，要么使用下标拿到某一个，要么使用遍历拿到全部
         （2）不一定非要从树根开始查找元素，也可以写一个你已经找到的某个父元素

           4、节点之间的关系进行查找：前提：必须先要找到一个元素，才能使用关系
    父：elem.parentNode;//单个元素
    子：elem.children;//集合
    第一个子元素：elem.firstElementChild;//单个元素
    最后一个子元素：elem.lastElementChild;//单个元素
    前一个兄弟元素：elem.previousElementSibling;//单个元素
    后一个兄弟元素：elem.nextElementSibling;//单个元素