习题

创建一张表

HTML 表格使用以下标签结构构建：

<table>
  <tr>
    <th>name</th>
    <th>height</th>
    <th>place</th>
  </tr>
  <tr>
    <td>Kilimanjaro</td>
    <td>5895</td>
    <td>Tanzania</td>
  </tr>
</table>

<table>标签中，每一行包含一个<tr>标签。<tr>标签内部则是单元格元素，分为表头（<th>）和常规单元格（<td>）。

给定一个山的数据集，一个包含name，height和place属性的对象数组，为枚举对象的表格生成 DOM 结构。 每个键应该有一列，每个对象有一行，外加一个顶部带有<th>元素的标题行，列出列名。

编写这个程序，以便通过获取数据中第一个对象的属性名称，从对象自动产生列。

将所得表格添加到id属性为"mountains"的元素，以便它在文档中可见。

当你完成后，将元素的style.textAlign属性设置为right，将包含数值的单元格右对齐。

<h1>Mountains</h1>
<div id="mountains"></div>
<script>
  const MOUNTAINS = [
    {name: "Kilimanjaro", height: 5895, place: "Tanzania"},
    {name: "Everest", height: 8848, place: "Nepal"},
    {name: "Mount Fuji", height: 3776, place: "Japan"},
    {name: "Vaalserberg", height: 323, place: "Netherlands"},
    {name: "Denali", height: 6168, place: "United States"},
    {name: "Popocatepetl", height: 5465, place: "Mexico"},
    {name: "Mont Blanc", height: 4808, place: "Italy/France"}
  ];
  // Your code here
</script>

通过标签名获取元素

document.getElementsByTagName方法返回带有特定标签名称的所有子元素。实现该函数，这里注意是函数不是方法。该函数的参数是一个节点和字符串（标签名称），并返回一个数组，该数组包含所有带有特定标签名称的所有后代元素节点。

你可以使用nodeName属性从 DOM 元素中获取标签名称。但这里需要注意，使用tagName获取的标签名称是全大写形式。可以使用字符串的toLowerCase或toUpperCase来解决这个问题。

<h1>Heading with a <span>span</span> element.</h1>
<p>A paragraph with <span>one</span>, <span>two</span>
  spans.</p>
<script>
  function byTagName(node, tagName) {
    // Your code here.
  }
  console.log(byTagName(document.body, "h1").length);
  // → 1
  console.log(byTagName(document.body, "span").length);
  // → 3
  let para = document.querySelector("p");
  console.log(byTagName(para, "span").length);
  // → 2
</script>

猫的帽子

扩展一下之前定义的用来绘制猫的动画函数，让猫和它的帽子沿着椭圆形轨道边（帽子永远在猫的对面）移动。

你也可以尝试让帽子环绕着猫移动，或修改成其他有趣的动画。

为了便于定位多个对象，一个比较好的方法是使用绝对（absolute）定位。这就意味着top和left属性是相对于文档左上角的坐标。你可以简单地在坐标上加上一个固定数字，以避免出现负的坐标，它会使图像移出可见页面。

<style>body { min-height: 200px }</style>
<img src="img/cat.png" id="cat" style="position: absolute">
<img src="img/hat.png" id="hat" style="position: absolute">
<script>
  let cat = document.querySelector("#cat");
  let hat = document.querySelector("#hat");
  let angle = 0;
  let lastTime = null;
  function animate(time) {
    if (lastTime != null) angle += (time - lastTime) * 0.001;
    lastTime = time;
    cat.style.top = (Math.sin(angle) * 40 + 40) + "px";
    cat.style.left = (Math.cos(angle) * 200 + 230) + "px";
    // Your extensions here.
    requestAnimationFrame(animate);
  }
 requestAnimationFrame(animate);
</script>