学自慕课网:Dom对象控制Html元素(二)
2015-12-02 23:07
363 查看
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>. 效果图
相关文章推荐
- 学自慕课网:Dom对象控制Html元素(一)
- Basic knowledge of HTML
- HTML中的checked问题
- html li标签前面添加图标三种方法
- html使用心得
- SVG 嵌入 HTML 页面
- markdown转为html及pdf
- HtmlUnit中AJAX执行的问题
- html--a标签直接触发手机打电话功能
- 关于Html中文乱码的问题
- <!DOCTYPE html>很重要
- XML学习笔记(一):HTML文件转成XML文件
- html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
- HTML标签自定义属性
- HTML 5怎么就成了RIA“杀手”?
- .NET编码解码(HtmlEncode与HtmlEncode)
- MVC htmlAttributes and additionalViewData
- HTML框架
- HTML表格的基本结构
- HTML超链接