JS（JavaScrip）基础和DOM（Document Object Model）操作

JS（JavaScrip）基础

一、引入方式：
（1）内部式
（2）外部式（使用最多）
（3）行内式

二、关键字
Javascript关键字（Keyword）是指在Javascript语言中有特定含义，成为Javascript语法中一部分的那些字，是 JavaScript 语言内部使用的一组名字（或称为命令）。
Javascript关键字是不能作为变量名和函数名使用的。使用Javascript关键字作为变量名或函数名，会使Javascript在载入过程中出现编译错误。
关键字有：break、delete、if、this、while、case、do、in、throw、with、catch、else、instanceof、try、continue、finally、new、typeof、for、return等。

三、基本语法
1.变量
声明关键字   变量名称 = 变量值
等号为赋值
var name = 'jack';
var age =18;
console.log(name)；
console.log(age)；

2.数据类型
分为简单数据类型和复杂数据类型
 数字：number   布尔类型： boolean     字符串：string    未定义：undefined     空：null
         
3.分支语句/条件判断
if(){
代码块
        }else if(){
        }else{
代码块
       }
if的括号内，就是对条件的判断，括号内的值只能是布尔值
在if 条件判断的 代码块中，如果满足其中一个条件，只会选择执行一个代码块，然后结束条件判断语句
if 的使用场景为在范围性的内容判断时使用

switch选择语句
switch 是在有特定或者固定值的时候来使用

4.循环语句
for(var i=0;i<10;i++){
循环体
}
while(){}
do{}while()
while  会先进逻辑判断，如果为假则不会执行循环体内的代码
do while 不管括号内的条件是否为真，都会进行一次循环

5.数组
声明方式
 var num = [1, 2, 3, 4, 5];
i小于我们num数组的长度

四、函数/方法
封装执行的代码块或者利于重复调用的代码块，可实现复用,提高代码利用率，减少冗余代码
 创建方式：
 ① function name(){
代码块
 }

②匿名函数
var name = function(){
代码块
}

 用于计算和 的函数
function getSum(a, b) {
 var sum = 0;
sum = a + b;
console.log(sum);
 }

五、对象
属性  方法
 创建方式：
①字面量创建
var star = {
属性名：属性值,
属性名：属性值,
属性名：属性值,
方法名:函数(){
 }
}

 ②new 关键字
 var name = new Object();
name.属性名 = 值;
name.属性名 = 值;
name.方法名 = 函数(){
}
③构造函数创建
function Person(name,age,gender){
this.name = "jack";
this.age = 15;
 this.gender = male;
 }
 var jack = new Person;
};

六、DOM（Document Object Model）操作
DOM 顶级对象为 document

1.DOM节点分类
文档节点、元素节点、属性节点、文本节点

2.查询获取元素方法
getElementById:通过id获取元素（单个）
getE lementsBy TagName：通过标签名称获取元素（多个）
getElementsByClassName：通过类名获取元素（多个）
querySelector：通过我们给定的名称获取第一个元素
querySelector可以通过 id、类名、标签名等方式 获取到我们的元素，但要加上相应的标识符。
querySelectorAll：通过我们给定的名称获取所有该名称的元素
补充：通过标签名、类名、querySelectorAll获取到的元素，无论个数 都会被存放在数组内，我们要操作元素的时候需要用下标选择到某一元素
3.部分操作方法
createElement  创建一 个元素节点
appendChild  向一个元素节点的末尾添加一个元素节点
insertBefore   向一个元素节点前面添加一个元索节点
removeChild  移除一个元素节点下的某一个元素节点

DOM的作用：
通过可编程的对象模型
JavaScript能够创建动态的HTML节点
●JavaScript能够改变页面中的所有HTML元素
●JavaScript能够改变页面中的所有HTML属性JavaScript能够改变页面中的所有CSS样式
●JavaScript 能够对页面中的所有事件做出反应