JavaWeb03-HTML篇笔记（六）

1.1 案例五：使用JS完成复选框的全选和全不选的效果 1.1.1 需求：

在实际的开发中一条记录一条记录进行删除的话，效率很低，有的时候需要一起删除多条记录.需要通过在表格之前设置一个复选框的形式进行勾选复选框.点击一个删除的按钮.

1.1.2 分析: 1.1.2.1 技术分析：

1.1.2.2 步骤分析：

【步骤一】创建一个HTML页面.

【步骤二】确定事件：复选框的单击事件.

【步骤三】触发一个函数

【步骤四】在函数中,获得上面的复选框是否被选中.

【步骤五】如果选中,下面的所有的复选框都被选中.

【步骤六】如果不选中,下面的所有的复选框都不选中.

1.1.3 代码实现：

                        

function checkAll(){
                                // 获得上面的复选框
                                var selectAll = document.getElementById("selectAll");
                                // 判断这个复选框是否被选中.
                                var ids = document.getElementsByName("ids");
                                if(selectAll.checked == true){
                                        // 上面复选框被选中：获得下面所有的复选框,修改checked属性
                                        for(var i = 0 ;i<ids.length;i++){
                                                ids.checked = true;
                                        }
                                }else{
                                        // 上面复选框没有被选中：获得下面所有的复选框,修改checked属性
                                        for(var i = 0 ;i<ids.length;i++){
                                                ids.checked = false;
                                        }
                                }
                               
                        }

1.1.4 总结：1.1.4.1 JS中的DOM对象：

【DOM的概述】
Ø 什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
Ø DOM的使用：
知道document，element，attribute中的属性和方法
【DOM的常用的操作】
Ø 获得元素：
* document.getElementById();                -- 通过ID获得元素.
* document.getElementsByName();                -- 通过name属性获得元素.
* document.getElementsByTagName();        -- 通过标签名获得元素.
Ø 创建元素：
* document.createElement();                        -- 创建元素
* document.createTextNode();                -- 创建文本
Ø 添加节点：
* element.appendChild();                        -- 在最后添加一个节点.
* element.insertBefore();                        -- 在某个元素之前插入.
Ø 删除节点：
* element.removeChild();                        -- 删除元素
【使用DOM完成对ul中添加一个li元素】
                        function addElement(){
                                var city = document.getElementById("city");
                                // 创建一个元素:
                                var liEl = document.createElement("li");
                                // 创建一个文本节点:
                                var text = document.createTextNode("深圳");
                                // 添加子节点:
                                liEl.appendChild(text);
                                city.appendChild(liEl);
                        }