任务视频V2.0

任务视频V1.0

知识点

document对象常用方法  

1.getElementById方法

此方法的唯一参数是带引号的字符串，该字符串包含要引用的元素ID，如下所示：

document.getElementById(“id”)

该方法返回一个值，通常将该值保存在一个变量中，供随后的脚本语句使用，例如：

var btn =document.getElementById(“btnId”);

在赋值语句后，变量就表示元素对象，可用于获取和设置该对象的属性，或者调用此类对象的方法。

2.document.getElementsByTagName()方法

可以使用getElementsByTagName()方法方便地收集一组共享同一个标记名称的页面元素。例如，要获得页面上所有图像，可以调用：

var allImages =document.getElementsByTagName(‘img’);

使用getElementsByTagName的一个优点是，它可以在页面的任何容器元素中收集某个集合。

3.document.createElement()和document.createTextNode()方法

在HTML文档中添加新元素至少需要两个步骤：

(1)为文档创建新元素。

(2)在页面的树形结构中，将其插入到需要的位置。

document.createElement方法可以在浏览器的内存中创建一个全新的元素对象。

document对象的方法如下表：                         

教学课件V2.0

教学课件V1.0

制作复选框全选效果

任务描述

模拟商品的全选，当用户选择“全选”复选框时全选所有商品。当用户取消“全选”复选框时取消所有商品的选择。

任务分析

1.创建静态页面index.html。

2. 定义“全选”复选框的单击事件处理函数。

3. 在单击事件处理函数中获取所有产品的复选框，统一设置复选框的选中和取消。

任务实现

1. 函数check的代码如下：

function check(){

varoInput=document.getElementsByName("product");

for(var i=0; i<oInput.length; i++){

if(document.getElementById("all").checked == true) {

oInput[i].checked= true;

}else {

oInput[i].checked= false;

}

    }

}

2. 当用户单击“全选”复选框时全选所有商品的复选框。在“全选”复选框上添加单击事件onclick，代码如下<inputid="all" type="checkbox" value="全选" onclick="check();" />。

 案例素材

在页面实现全选和全不选的效果，用户勾选全选时，能够将所列书全部选中，全选前的复选框不选中，所列书也将不选中。

参考答案