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的课程总结

巴特西

JavaScript的知识点整理

最新文章

热门文章