03 - 元素获取与流程控制语句

3.01 - 的选择器

• 基本的获取元素的方式

  • ID名获取：document.getElementById(\"idName\");

  • 标签名获取：document.getElementsByTagName(\"tagName\");

  • class名获取：document.getElementsByClassName(\"className\");

  • name名获取：document.getElementsByName(\"name\");

  • 文档唯一元素：document.body document. document.head

  • <div id=\"box\" class=\"wrap\"></div>
    < >
      document.getdocument.getElementById(\"box\");	// id 获取
      box;											//  id可以直接通过id名字获取元素
      document.getElementsByClassName(\"wrap\");		// class 获取
      document.getElementsByTagName(\"div\");			// 标签名 获取
    </ >

• HTML5新增

  • 获取单个元素：document.querySelector(selector);

  • 获取元素集合：document.querySelectorAll(selector);

  • 实例：

    <div id=\"wrap\">
      <div class=\"box\">
        <p></p>
      </div>
    </div>
    < >
      document.querySelector(\"#wrap\");// id获取
      document.querySelectorAll(\".box\");// class 获取
      document.querySelectorAll(\"p\");// 标签名 获取
      document.querySelectorAll(\"#wrap .box p\");// 嵌套写法
    </ >

• 获取节点对象下的元素

  <div id=\"wrap\">
    <div class=\"box\">
      <p></p>
    </div>
  </div>
  < >
    // #wrap box p
    document.getElementById(\"wrap\").getElementsByClassName(\"box\")[0].getElementsByTagName(\"p\");
  </ >

  ​

• length 属性：length属性下存储着元素集合的总长度

  <div class=\"wrap\">box1</div>
  <div class=\"wrap\">box2</div>
  <div class=\"wrap\">box3</div>
  
  < >
    var dWrap = document.getElementsByClassName(\"wrap\");
    console.log( dWrap.length );// 3
  </ >

• [ ] 下标

  • 当获取的元素为一个集合的时候通过下标可以找到具体的对应序列的元素
  • 下标的序列从 0 开始

  <div class=\"wrap\">box1</div>
  <div class=\"wrap\">box2</div>
  <div class=\"wrap\">box3</div>
  
  < >
    var dWrap = document.getElementsByClassName(\"wrap\");
    console.log( dWrap[0] );// 获取 box1
  </ >

  ​

3.02 - 元素，属性操作

• 自带标签属性操作：元素本身存在的标签属性，获取设置的方式直接通过 . 方式 不能删除
  • class 属性的获取的时候需要改为，className
  • float 属性需要修改为 styleFloat（IE） cssFloat（标准）
  • 自身不拥有的属性无法获取

<div id=\"boxId\" class=\"boxClass\" color=\"red\" goudan=\"狗蛋\"></div>

< >
  	var dBox = document.getElementById(\"boxId\");
	console.log( dBox.id );	// boxId 直接获取
	console.log( dBox.className );	// boxClass class修改为className
	console.log( dBox.color );	// undefined div 本身不存在 color 属性
	console.log( dBox.goudan );	// undefined 无法直接获取自定义属性
</ >

• 自定义标签属性：元素自身不存在的标签属性，通常自定义用来存储数据

<div id=\"boxId\" goudan=\"狗蛋\"></div>

< >
  
  	var dBox = document.getElementById(\"boxId\");
	// 获取
  	console.log( dBox.getAttribute(\"goudan\") ); // \"狗蛋\"
   	// 设置
  	dBox.setAttribute(\"goudan\",\"狗蛋儿\");
 	console.log( dBox.getAttribute(\"goudan\") ); // \"狗蛋儿\"
  	// 删除
  	dBox.removeAttribute(\"goudan\");
 	console.log( dBox.getAttribute(\"goudan\") ); // null
  	
</ >

• 元素对象下的属性

  事实上除了自定义属性之外，标签自带的属性都是元素对象下原有的属性，所以除开我们在html标签中使用到的标签自带属性之外，元素对象在 中还有诸多的属性，这些属性是标签的各个相关信息事件等，并且我们可以为元素对象添加属性

  • style：标签的样式属性，可以获取和修改标签的行内样式
    • 可以设置和获取标签的行内样式
    • 覆盖之前的样式
    • 获取 - 连接的组合属性时需要改为驼峰写法
  • style.cssText：设置多个样式
  • innerHTML：元素的所有内容，包括标签节点
    • 设置内容的时候覆盖原有的内容
  • innerText：元素的文本内容，不包括标签节点
    • 设置内容的时候覆盖原有的内容

  <div id=\"box\">
    <p>hello box</p>
  </div>
  < >
  	var dBox = document.getElementById(\"box\");
    	// 设置样式
    	dBox.style.width = \"100px\";
    	dBox.style.height = \"100px\";
    	dBox.style.backgroundColor = \"red\";
    	dBox.style.cssText = \"margin:20px auto;border:5px solid blue;\";
    	// 获取内容
    	console.log(dBox.innerHTML); // \"<p>hello box</p>\"
    	console.log(dBox.innerText); // \"hello box\"
    	// 设置内容
    	dBox.innerHTML = \"<div>hello world!</div>\";
  </ >

  • 自定义属性：自定属性的作用类似于变量，我们可以定义一个可供读写的属性名，存储任何数据

  <div id=\"box\">
    <p>hello box</p>
  </div>
  < >
  	var dBox = document.getElementById(\"box\");
    	dBox.goudan = 1;
    	console.log(dBox.goudan); // 1
  </ >

• 获取元素的样式属性值

  • 标准：getComputedStyle(dom)[attr]
  • IE低版本：dom.currentStyle[attr]

3.03 - 流程控制语句

什么是流程控制？

​ 我是谁？我在那？我要做什么？

代码的一般执行顺序为从上到下，从左到右，但是很多时候会对执行选择性和重复等等的控制

• 条件控制语句（判断）：站在人生的十字路口上

  执行过程中，当需要涉及到满足某些条件，才能执行对应的语句时，就需要用到条件判断，判断的依据是布尔值

  1. 单次判断：if( boolean ){ };

  // 小括号中为true时，才会执行括号之后花括号中的语句
  if( true ){ alert( \"hello world\" ); } // \"hello world\"
  if( false ){ alert( \"hello IF\" ); }   // 不会执行

  1. 是，否则判断：if( boolean ){ }else{ }

  // 小括号中为true时执行第一个花括号中的语句，否则执行else之后的花括号中的语句
  if( false ){
    alert( \"hello world\" ); // 不会执行
  }else{
    alert( \"hello IF\" );  // \"hello IF\"
  }

  1. 三目运算：boolean ? trueValue : falseValue;
     • 效果类似于 if else 判断 但是该表达式为会返回 判断结果 的表达式

  var name = \"goudan\";
  var val = name = \"goudan\"? name + \"帅!!!\" : name + \"不认识！\";
  console.log( \"goudan帅!!!\" );

  ​

  1. 全等判断：switch( 被比较的数据 ){ case 进行比较的数据: break; default break;}

  只能进行单个数据与多个数据之间的全等比较，适用于被比较的条件恒定时

  var a = \"狗蛋\";
  switch( a ){
    case \"大锤\":
      alert( a + \" 是一个程序猿~\");
      break;
    case \"尼玛\":
      alert( a + \" 是一个大头变态~\");
      break;
    case \"狗蛋\":
      break;
      alert( a + \" r 26cm~\"); // \" 狗蛋r 26cm~\"
    default:
      alert( a + \" 帅哥~\" );
  }
  /*
  	break
  		如果进行单次判断，必须在case的执行语句最后，加上 break 跳出之后的判断否
  		否则将继续下一个case判断（case穿透），直到遇到一个break return 否则会执行到判断语句最后
  	default
  		前面的条件都不满足的时候执行
  */

• 循环：爱做的事情重复做，日复一日，年复一年~

  循环常重复执行一段相同的代码，就好像你在代码中连续写了N次相同的代码，我们可以设定重复的起点，次数，和结束条件

  • for 循环：常用于与数值相关的循环，如限定次数的循环，需要单独得到递增递减的数值等，循环的判断条件通常为数值之间的比较

  // 循环打印数字 0 1 2
  for(var i=0;i<3;i++){
    console.log(i); // 0 1 2
  }
  /*
  
  for( 1; 2; 4){
    3
  }
  
  执行顺序：1     2 3 4 2 3 4 2 3 4 .... 4 2
  	1 只有在开始时执行一次
  	2 结束的流程最终为 4 2
  */
  
  // 拆分的表示
  var i = 0;
  
  console.log(i); // 0
  i ++;
  
  console.log(i); // 1
  i ++;
  
  console.log(i); // 2
  i ++;

  • while 循环：用于条件判断的循环，通常使用在循环的判断条件为非数值的情况

  var dream = prompt(\"少年请说出你的梦想！\");
  while( dream != \"Java\" ){
        dream = prompt(dream+\"??? 难道你不想学 Java 嘛？\");
  }
  alert(\"少年前途无量啊！\");

  • do... while 循环：与 while 几乎一致，只是会优先执行一遍循环体中的代码

  var dream;
    do{
          dream = prompt(\"少年请说出你的梦想！\");
    }while( dream != \"Java\" );
  
    alert(\"少年前途无量啊！\");

• break 与 continue

  • break：终止循环体继续循环

  for(var i=0;;i++){
    if(i == 10)break; // 当i的值等于10的时候结束本次循环
    console.log(i); // 0~9
  }

  • continue：跳过本次循环

  for(var i=0;i<10;i++){
    if(i % 2)continue; // 跳过奇数
    console.log(i); // 0 2 4 6 8
  }

  ​

• 控制语句相关

  • if 循环 的代码体中，如果只有一条语句，那么可以省略花括号

  // if(true){alert(\'hello\');}; // 结果与下边一致
  if(true)alert(\'hello\');

  ​

3.04 - 类型转换

概念：各种基本的数据类型可以进行转换， 提供了对应的方法来进行这些转换，但是很多时候这些转换是默认进行的

作用：很多时候我们得到的数据类型不是我们最终想要的，所以需要进行转换的处理，比如字符串的数字转换成正常数字

• 强制转换：大佬女装术~

  • Number();
  • parseInt();
  • parseFloat();
  • String();

• 隐式转换

  • 运算符操作的时候

  // 字符串会被默认的转换为普通数字
  var a = 2;
  var b = \"2\";
  console.log( a * b ); // 4
  console.log( a - b ); // 0
  console.log( a / b ); // 1
  console.log( a % b ); // 0
  // null false undefined 会被默认的转换成 0
  console.log( a - null ); // 2
  console.log( a + false ); // 2
  console.log( a * undefined ); // 0
  // true 会被转换成 1
  console.log( a - true ); // 2

  • 比较运算的时候

  var a = 10;
  var b = \"5\";
  var c = \"15\";
  var d = \"16\";
  console.log( a < b );
  console.log( b < c );
  console.log( c < d );
  // 与字符串的比较为 ASCII 码的比较

  • 特殊转换：以下的5个数据在直接进行判断的时候会被转换成false 其他的均为true

  null undefined \"\" （空字符串） NaN 0

  console.log( 0?1:0 ); // 0
  if( \"\" ){
     alert(\"我是真!\");
  }

  ​

• 运算符优先级以及括号：行行行！你NB，我叫表哥去！

  • 当运算符凑到一块的时候运算的先后的顺序...
  • 从大到小：小于等于（<=)、严格相等（===）、或（||）、三元（?:）、等号（=）
  • 从大到小：! 、&&、||
  • 从大到小：* / 、+ -
  • 括号的优先级最高

  var bool = false || false && 2 < 3 || !false || 0?1:0 && \"a\" <= \"b\";