JavaScript的知识点整理

最近写了一个员工管理作业，暴露了一些问题就是。

JS的查找标签的时候，要确定返回的是DOM对象还是数组，document对象可以是任意dom对象，将查询范围限制在当前dom对象，

1、直接查找标签

document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

2、导航查找标签

elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素

3、CSS选择查找器

document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

尤其注意在返回多个DOM对象，后形成数组后，还会返回HTMLCollection，这在循环的时候需要特别注意。

而在DOM对象（document Object Model 文档对象模型）下，每个部分都是节点，例如元素节点、属性节点等，DOM 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

拿到这些元素节点后，我们可以对这些节点进行绑定事件。

1、静态绑定：直接把事件写在标签元素中。

一般会直接调用对应的函数，例如

<div id="div" onclick="foo(this)">click</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("foo函数");
        console.log(self);
    }
</script>

2、动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定。一般会用到匿名函数。

<p id="i1">试一试!</p>

<script>

    var ele=document.getElementById("i1");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

当然绑定事件不止这些，例如：

1、onload事件　　

2、onsubmit事件　　

3、onchange事件　　

4、onmouse事件　　

5、onkey事件　　

6、onfocus事件与onblur事件

拿到标签、绑定事件，我们会进行操作标签，一般有文本操作、value操作（只限input、select、textarea标签）、CSS的样式操作、属性操作等。

当然JS里面还有一些基础语法会经常用到，例如

1、最基础的变量声明：

// 方式1 先声明再赋值
var 变量名;   // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
变量名 = 变量值;
// 方式2 声明并赋值
var 变量名 = 变量值;
// 方式3 一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";

2、数据类型以及数据类型之间的转换，这里就简单放一些，注意JS也会有时会自动转换，且JS的数据类型有空值（Undefined和Null）。

// 1. 转换数据为数值类型
// parseInt     把数据转换成整数
// parseFloat   把数据转换成小数
// Number       把数据转换成数值
// 2. 转换数据为字符串
// 变量.toString()
// String(数据)
// 3. 转换数据成布尔类型
// Boolean()

3、流程控制语句，则分为if分支语句和switch语句

   if(条件1){
     // 条件1为true时,执行的代码
   }else if(条件2){
     // 条件2为true时,执行的代码

   }....

   }else{
     // 上述条件都不成立的时候,执行的代码
   }

switch(条件){
      case 结果1:
           满足条件执行的结果是结果1时,执行这里的代码..
           break;
      case 结果2:
             满足条件执行的结果是结果2时,执行这里的代码..
             break;
      .....
      default:
           条件和上述所有结果都不相等时,则执行这里的代码
   }

4、还有JS的Object对象，多用于应用程序之间存储和传输数据。

var person = {
                name : "alvin",
                age : 18
             }; 

Object可以通过. 和 []来访问。

console.log(person["age"]);
console.log(person.age)

5、JS的function对象

// 函数的定义方式1
function 函数名 (参数){
    函数体;
    return 返回值;
}

// 函数的定义方式2
用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1","参数n","function_body");

虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用 Function 类明确创建的函数行为是相同的。

还有函数调用、函数参数、返回值等，JS预编译等这里就不一一细讲了。

另外放一个JS预编译面试题，有空的时候可以多回顾一下。

<script>
var num3 = 10;
function func3(){
    console.log(num3);
    var num3 = 20;
}
func3();
console.log(num3);
</script>

答案为:undefined，10

今天就写在这里，最后贴上自己的javaScript的课程总结