类数组对象HTMLCollection

HTMLCollection对象返回HTML元素的集合，提供了访问诸如表单、图像和链接等文档元素的便捷方式

-Ele.getElementsByTagName()
根据节点名称返回集合
-document.scripts-document.links
返回全部script集合
-document.images
返回页面里全部a元素
-document.forms
返回页面全部图片元素
-tr.cells
返回所有td元素的子集合
-select.options
返回select的全部选项

  myReady(function(){
    var scripts = document.scripts;
    var links = document.links;
    var cells = document.getElementById("tr").cells;
    var imgs = document.images;
    var forms = document.forms;
    var options = document.getElementById("select").options;
    var ps = document.getElementsByTagName("p");

    /*console.log(scripts);
    console.log(links);
    console.log(cells);
    console.log(imgs);
    console.log(forms);
    console.log(options);
    console.log(ps);*/

    console.log(cells.namedItem('td'));
    //显示<td name="td">第二行</td>
    //两个name为td只返回第一个
  });

👆👆👆HTMLCollection对象的namedItem()方法，返回集合中具有指定name属性或id属性的元素。

• 节点一
• 节点二
• 节点三

<table border="1">
  <tr id="tr">
    <td>第一行</td>
    <td name="td">第二行</td>
    <td name="td">第三行</td>
  </tr>
</table>

<img src="duer.jpg" alt="img1" />
<img src="ipone6s+.png" alt="img2" />

<form action="">
  <input type="text" value="用户名">
</form>
<form action="">
  <input type="text" value="密码">
</form>

<a href="#">忘记密码</a>
<a href="#">更多内容</a>

<select id="select">
  <option value="0">北京</option>
  <option value="1">天津</option>
  <option value="2">河北</option>
</select>

<p>DOM</p>