JavaScript DOM编程艺术（第2版）

http://domscripting.com/ (作者开设的JS探讨网站)

Safari和Chrome采用同一个开源Web浏览器引擎_WebKit_，Firefox采用_Gecko_开源引擎。 ###第二章

字符串

如果字符串包含"",就把整个字符串放入'';如果包含'',则把整个字符串放进""

  var mood = "happy";
  var mood = 'happy';

或者可以用\进行转义

   var mood = "don't ask";
   var mood = 'don\'t ask;
   var height = "an 5'10\"tall";

数值
- JS 支持正、负浮点数
```
   var num = -2.33333333;
```

布尔值

例：sleeping/not sleeping

   var sleeping = true;
   //或者使用yes/no，0/1

数组

声明数组

  var xx = Array("A","B","C",...);
  //或者
  var xx = ["A","B","C",...];

声明未知数量的数组

   var xx = Array();
   //填充数组
   xx[index] = element;

字符串、数值、布尔值可以混写

   var xx = Array("A",666，false);

对象

声明对象

   var yy = Object();
   yy.name = "John";
   yy.year = 14;
   yy.att = false;
   //声明方法1
   var yy = {name:"John",year:14,att: false};
   //声明方法2

逻辑操作符
- &&且
- ||或
- ！非 //取反

循环

while //与if相似，不满足条件无法执行

   var count = 1;
   while (count < 10） {
      alert(count);
      count++;
   }

do..while //至少执行一次

    var count = 1;
    do {
      alert(count);
      count++;
    } while (count < 1);

for (循环读取数组，i从0开始)

   var xx = Array("A","B","C",...);
   for (var i = 0 ; i < xx.length; count++){
        alert(xx[i]);
   }

函数

可以将函数当做一种数据类型使用
函数不仅能接收数据，还能返回数据

   var temp_fahrenheit = 95;
   var temp_celsius = covertToCelsius(temp_fahrenheit);
   alert(temp_celsius);

   function covertToCelsius(temp){
       var result = temp - 32;
       result = result / 1.8;
       return result;
   }

全局变量和局部变量：定义局部变量，一定要使用var关键字，避免变量二义性

   function square(num) {
       total = num * num // 这相当于申明了一个全局变量而非局部变量，会改变外部的total值
       return total;
   }
   var total = 50;
   var number = square(20);
   alert(total);//total值现在为400

正确写法：

   function square(num) {
       var total = num * num // 这申明非局部变量，不会改变外部的total值
       return total;//返回后number的值改变
   }
   var total = 50;
   var number = square(20);
   alert(total);//total值现在仍为50

###第三章 #####5个常用的DOM方法：getElementById\getElementsByTagName\getElementsByClassName\gerAttribute\setAttribute #####DOM:D(document) O(object) M(model)

获取元素

document.getElementById("id名") *document.getElementsByTagName("标签名") //返回的是数组，即使只存在一个标签，返回的也是长度为1的数组
结合getElementById\getElementsByTagName

   var shopping = document.getElementById("id名");
   var items = shopping.getElementsByTagName("*");
   //获取该id内的所有元素

document.getElementsByClassName("class名");//html5新增方法，有些dom无法访问;查找带有多个类名的元素，多个类名用空格隔开
结合getElementById\getElementsByClassName

   var shopping = document.getElementById("id名");
   var items = shopping.getElementsByClassName("class名");
   //获取该id内的所有包含该类名的元素

使用已有dom方法实现getElementsByClassName，支持新旧浏览器

   function getElementsByClassName(node,classname) {//node 表示dom树中的搜索起点，classname表示要搜索的类名
       if (node.getElementsByClassName) {
           //使用新方法，支持getElementsByClassName
           return node.getElementsByClassName(classname);
       }else {
           var results = new Array();
           var elems = node.getElementsByTagName("*");
           for (var i=0 ;i<elems.length;i++) {
               if (elems[i].className.indexOf(classname) != -1){//indexOf获取元素所在位置，className属性返回元素class名
                   results[result.lenght] = elems[i];
               }
           }
           return results;
       }

   }

getElementsByClassName高效方法参考链接：https://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

获取元素属性和设置属性

object.getAttribute(attribute),不属于document对象，只能通过元素节点调用

   var paras = document.getElementsByTagName("P");
   var value = paras[i].getAttribute("class/title/target/..."
   for (var i=0;i<paras.length;i++) {
       if (value !=null){
           alert(value);
       }
   }

object.setAttribute(attribute,value)//设置属性值,如果节点本身存在属性值，将被覆盖；对文档修改后，用浏览器查看源码时，属性值仍为改变前的值（先加载文档静态内容，再刷新动态，动态刷新不印象文档的静态内容）

   var shopping = document.getElementsById("purchases");
   alert(shopping.getAttribute("title"));
   shopping.setAttribute("tittle","a list of goods");
   alert(shopping.getAttribute("title"));

第四章

setAttribute可以设置任意元素节点任意属性

element.setAttribute("value","the new value");
与下面的语句效果等价
element.value = "the new value";
举例

   <ul>
       <li><a href="img/1.jpg" tittle="1" onclick="showPic(this);return false"></a>图片链接1</li>
       <li><a href="img/2.jpg" tittle="2" onclick="showPic(this);return false"></a>图片链接2</li>
       <li><a href="img/3.jpg" tittle="3" onclick="showPic(this);return false"></a>图片链接3</li>
       //return false href的默认点击事件会被阻止，链接不会跳转；
   </ul>
   <div><img id="imgsrc" src="img/wait.jpg" alt="照片墙"/></div>
   function showPic(whichpic) {
       var source = whichpic.getAttribute("href");
       var imgsrc = document.getElementById("imgsrc");
       imgsrc.setAttribute("src",source);
   }

//若一个站点用到多个js文件，将js文件合并到一个文件中可以减少对站点的请求次数；

childNodes属性：用来获取任一元素的所有子元素

element.childNodes

   function countBodyChildren() {
       var body_element =  document.getElementSByTagName("body")[0];
       alert(body_element.childNodes.length);
   }
   window.onload = countBodyChildren;//页面加载时调用countBodyChildren函数

nodeValue属性：

接上，获取图片路径后，同时得到图片的tittle作为文本描述图片
firstChild==childNodes[0]
lastChild==childNodes[node.childNodes.length-1]

   <p id="description">Choose an image</p>

   var text = whichpic.tittle("tittle");
   var description = document.getElementsById("description");
   alert(description.childNodes[0].nodeValue);//返回description第一个子节点的属性值
   //alert(description.nodeValue);返回null，<p>元素本身的nodeValue属性为空值，<p>元素中的文本是另一种节点，它是<p>元素的第一个子节点

4.firstChild和lastChild

node.firstChild == node.childNodes[0];
node.lastChild == node.childNodes[node.childNodes.length-1];
更改showPic函数

     function showPic(whichpic) {
        var source = whichpic.getAttribute("href");
        var imgsrc = document.getElementById("imgsrc");
        imgsrc.setAttribute("src",source);
        var text = whichpic.getAttribute("tittle");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
     }

JS学习之路——JavaScript DOM编程艺术（第2版） - Hello-byt/personal--blog GitHub Wiki

JavaScript DOM编程艺术（第2版）

http://domscripting.com/ (作者开设的JS探讨网站)

第四章

⚠️ GitHub.com Fallback ⚠️

JS学习之路——JavaScript DOM编程艺术（第2版） - Hello-byt/personal--blog GitHub Wiki

JavaScript DOM编程艺术（第2版）

http://domscripting.com/ (作者开设的JS探讨网站)

第四章

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️