WEB安全之javascript基础（五）：运算符条件语句、循环流程终止、js操作DOMjs查找更改

运算符

• 用于执行程序代码运算，会针对一个以上操作数来进行

算术运算符

+   -   *   /   %  ++  --

• 字符串拼接使用“+”
• 
  
  
  
• 
  
• 
  
• 
  

比较运算符

<
>
==
！=
<=
>=
=== 全等于：将数值以及数据类型一并比较
！==不全等于：将数值以及数据类型一并比较

• 
  
• 
  
• 
  
• 
  
• 
  

赋值运算符

=
+= 

-=
*=
/=
%=
a=a+2;==>a+=2
a=a-2;==>a-=2
a=a*2;==>a*=2
a=a/2;==>a/=2
a=a%2;==>a%=2

• 
  

逻辑运算符

&&  全真为真
||  一个为真就是真
！  取反

• 
  
• 
  
• 
  

三元运算符（三目运算符）

表达式1?表达式2:表达式3
当我的表达式1成立时  执行表达式2  否则执行表达式3
var max = 2>1?'>':'<';
console.log(max);

• 
  

流程控制语句

if语句

if(条件){
函数体
}

if else语句

if(条件){
函数体1
}else{
函数体2
}

• 
  

if…else if…else语句

if(条件1){

}else if(条件2){

}else if(条件n){

}else{

}

• 
  

switch语句:多分支语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
} 

• 
  

循环结构

while循环

• 先判断条件 当条件成立 再执行

while(循环成立条件){
....
}

• 
  
• 一直循环下去
  
  
• 
  

do…while循环

do...while循环:不论条件成不成立 先执行一遍 再判断
do{
.....
}while(循环成立条件)

• 
  

for循环

• 
  
• 
  

for in循环

continue：
跳过当前循环，直接进入循环的下一个步骤
break:
结束循环

• 
  
• 
  
  

JS操作DOM

什么是DOM？

• DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。
• 
• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

DOM查找元素

• document获取节点的基本方法

document.getElementById('id');  //通过id来获取元素,返回指定的唯一元素。
document.getElementsByName("name"); //通过name来获取元素，返回name='name'的集合。
.document.getElementsByClassName("classname")  //用classname来获取元素，返回的是一个class="classname"的集合(不兼容IE8及以下)。
document.getElementsByTagName('div'); //用元素的标签获取元素，返回所有标签=“div”的集合。

• 
  
• 
• 
  
  
• 
• 

查找

• 直接查找

var obj = document.getElementById('id');

• 间接查找
• 文件内容操作

innerText 仅文本
innerHTML 全内容
value
input value 获取当前的值
select 获取选中的value的值 document.getElementById('s1').selectedIndex=1
Textarea 获取value的值

• 
  
  
• 
• 可选择框
  
• 
  
• 选定python
  

操作

• 样式操作
  className 列出样式 字符串
  classList 列出样式 返回数组
  classList.add 增加样式
  classList.remove 删除样式

<div class='c1 c2' style='font-size:16px'></div>
obj.style.fontSize='16px';

• 
• 
  
  
• 
•