Menu

第1章 html5概述

• 1.6.4 使用selectors API简化选取操作

第二章 canvas API

第1章 html5概述

• 1.6.4 使用selectors API简化选取操作
• html5引入了一种查找DOM元素的函数 document.getElementById();
  document.getElementsByTagName();
  document.getElementsByName();

1. HTML DOM querySelector() 方法

• 语法：element = baseElement.querySelector(selectors)
• element 和 baseElement 是 element 对象.
• 参数：selectors 是一个CSS选择器字符串( selectors )，selector一组用来匹配Element baseElement后代元素的选择器selectors；必须是合法的css选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。
• 返回值：基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被querySelector()函数返回。
• 只支持IE8以上浏览器
• 可为querySelector函数指定多个选择规则：

// 返回第一个匹配到的
element = document.querySelector("h2, h3")  

• example：

var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
         (baseElement.querySelector("div span").innerHTML);

2. HTML DOM querySelectorAll() 方法

• Syntax：elementList = parentNode.querySelectorAll(选择器);
• 参数：一个 DOMString 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS selector 如果不是，会抛出一个 SyntaxError 错误。
• 注意： 必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用反斜杠转义，因此在使用这些字符编写字符串文字时必须特别小心。
• 返回值：一个静态 NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList。
• 只支持IE8以上浏览器

// HTML
<div class="outer">
  <div class="select">
    <div class="inner">
    </div>
  </div>
</div>

// JavaScript
var select = document.querySelector('.select');
var inner = select.querySelectorAll('.outer .inner');
inner.length; // 1, not 0!

• 可为querySelectorALL函数指定多个选择规则：

// 返回所有匹配到的；
element = document.querySelector("h2, h3")  

第二章 canvas API

• 检测浏览器支持情况

<script>
    try{
        document.createElement("canvas").getContext("2d");
   document.querySelector("#myd").innerHTML="supported"
    }catch(e){
        document.querySelector("#myd").innerHTML="no supported"
    }
</script>

• 2.2.3 变换

    var canvas = document.getElementById('myCanvas');
    canvas.width = 500;
    canvas.height = 500;
    var context = canvas.getContext('2d');
    context.save();
    context.translate(250, 250); // 将原点移动到指定点
    context.beginPath();
    context.moveTo(0, 0);        // 这时（0，0）就是（250，250）
    context.lineTo(250, 250);
    context.stroke();
    context.restore();           // 将原点复原回（0，0）点

    context.moveTo(0, 0);
    context.lineTo(10, 100);
    context.lineTo(100, 10);
    context.lineTo(0, 0);
    context.stroke();  

• 2.2.4 路径

    function createCanopyPath(context) {
        // Draw the tree canopy
        context.beginPath();

        context.moveTo(-25, -50);
        context.lineTo(-10, -80);
        context.lineTo(-20, -80);
        context.lineTo(-5, -110);
        context.lineTo(-15, -110);

        // Top of the tree
        context.lineTo(0, -140);

        context.lineTo(15, -110);
        context.lineTo(5, -110);
        context.lineTo(20, -80);
        context.lineTo(10, -80);
        context.lineTo(25, -50);

        // Close the path back to its start point
        context.closePath();  //封闭当前路径，即将终点到原点画线
    }
    var canvas = document.getElementById('myCanvas');
    canvas.width = 500;
    canvas.height = 500;
    var context = canvas.getContext('2d');
    context.save();                 // 保存好原始对象，便于恢复
    context.translate(250, 250);  // 将原点移动到指定点
    createCanopyPath(context);      // 画图
    context.stroke();               // 完成
    context.restore();              // 恢复到原始原点