学自慕课网：Dom对象控制Html元素（二）

Js获取元素方法对比

一、document.getElementById()方法

二、document.getElementsByTagName(()方法

document.getElementsByTagName()方法通过标签名获取元素，与数组相似有length方法。

1>.    Html页面如下：

2>.    需要实现的功能：

• 通过ID获取标题H1

• 通过name获取值为sex的元素

• 通过标签名获取input元素

3>.    具体实现

4>.    效果解析

三、获取元素方法对比

方法	说明	获得
getElementById	通过指定id获的元素	一个
getElementsByName	通过元素名称name属性获得元素	一组
getElementsByTagName	通过标签名称获得元素	一组

1>.    Html页面

2>.    所需实现的功能

• 点击“全选”按钮，将选中所有的复选项

• 点击“全不选”按钮，将取消所有选中选项

• 在文本框中输入1-6数值，点击“确定”按钮，根据输入的数值，通过id选中相应的复选项

3>.    任务拆分

如图所示，

• document.getElementsByTagName(“input”)，可获得8个元素

• document.getElementsByName(“hobby”)，可获得6个元素

• document.getElementById(“hobby6”)，就只能获得id相对应的元素

四、节点元素

1>.    代码实现

2>.    效果图