java程序员第四课 javaScript基础和DOM目录

1、内容回顾

2、Element对象
* 如果要操作元素（标签），首先要获取到元素
- document里面的三个方法
** 获取属性值
- getAttribute(“属性名称”)
- var input1 = document.getElementById(“id1”);
//alert(input1.value);
alert(input1.getAttribute(“value”));
alert(input1.getAttribute(“name”));

** 设置属性值
    - setAttribute("属性名称","属性值")
    - input1.setAttribute("class","haha");
      alert(input1.getAttribute("class"));
** 删除属性值
    - removeAttribute("属性名称")
    - input1.removeAttribute("name");

** 获取标签下面的子标签
    - 通过Node里面的属性获取 childNodes
        ** 在不同的浏览器下解析效果不一样的，这个属性兼容性很差
    - 通过getElementsByTagName方法获取(获取获取标签下面的子标签唯一有效方法)
        ** 这个方法是document里面的方法
        ** var ul2 = document.getElementById("ulid");
        var lis1 = ul2.getElementsByTagName("li");

3、案例一：在末尾添加节点
* 操作步骤
1、创建标签（元素）节点
* createElement(“标签名称”)方法
2、创建文本节点
* createTextNode(“文本内容”)方法
3、把文本节点添加到标签节点下面
* appendChild()方法
4、把标签节点添加到ul节点下面（末尾）

5、代码：
* appendChild()方法
* //获取到ul
var ul1 = document.getElementById("ulid1");
//创建标签
var li1 = document.createElement("li");
//创建文本
var tex1 = document.createTextNode("景阳冈");
//把文本添加到标签下面li
li1.appendChild(tex1);
//把li标签添加到ul下面
ul1.appendChild(li1);

4、Node对象
* 属性
* html中包含标签，属性，文本
* dom解析时候会把标签，属性和文本封装成对象
* 这些对象在三个属性里面的值不同的。

    - nodeName
        * 元素对象：大写标签名
        * 属性对象：属性名称
        * 文本对象：#text
    - nodeType
        * 元素对象：1
        * 属性对象：2
        * 文本对象：3
    - nodeValue
        * 元素对象：null
        * 属性对象：属性值
        * 文本对象：文本内容

    - 父节点 parentNode
        * var li1 = document.getElementById("l1");
        var ul1 = li1.parentNode;

    - firstChild:返回第一个子节点
    - lastChild：返回最后一个子节点

    - nextSibling:下一个同辈节点
    - previousSibling：上一个同辈节点

5、操作DOM树（使用Node里面的方法）
* appendChild：添加到末尾（子节点）
- 实现的就是类似剪切黏贴的效果

* insertBefore(newNode,oldNode)方法
    - 在某个节点之前添加节点
    - newNode：要添加的节点
        * 创建节点：
        1、创建标签
        2、创建文本
        3、把文本添加到标签下面
    - oldNode：在谁之前添加

* removeChild()方法：删除节点
    - 通过父节点才能删除

* replaceChild(newNode,oldNode)方法
    - newNode: 替换成的节点
    - oldNode：被替换的节点

* cloneNode(boolean)
    * boolean:是否复制子节点 true

6、innerHTML属性
* 获取到文本内容
- var span1 = document.getElementById(“spanid1”);
//获取文本内容 firstChild lastChild
alert(span1.innerHTML);
* 设置html代码到标签里面
- divv.innerHTML = “哈哈呵呵”;
- divv.innerHTML = “

aaaa

BBBB

“;

7、案例二：动态显示时间
1、获取当前的时间
* var date = new Date();
* toLocaleString()
2、如何动态显示？
* setInterval(“”,1000);
* 定义一个div
* 每一秒向div里面写一次时间（定义一个方法）
- innerHTML

8、案例三：全选练习
1、创建一个页面
* 有复选框
* 三个按钮（有点击事件，实现全选 全不选 反选）
* 有一个特殊的复选框：这个特殊的复选框是选中的状态，全选。如果不是选中的状态，全不选。
2、实现全选操作
* checked 属性设置或返回 checkbox 是否应被选中
* 值是 true|false
* 可以使用getElementsByName获取到复选框
* 遍历数组，每次遍历的结果，checkbox=true
3、实现全不选操作
* checked 属性设置或返回 checkbox 是否应被选中
* 值是 true|false
* 可以使用getElementsByName获取到复选框
* 遍历数组，每次遍历的结果，checkbox=false
4、实现反选操作
* 获取到name是love的复选框
* 遍历复选框数组
* 根据遍历的值进行判断
- 判断当前的值的checked是什么
**如果checked值是true，修改为false
** 如果checked值是false，修改为true

9、案例四：下拉列表左右选择
* 补充，实现下拉选择框时候，有一个属性 multiple(把select里面内容显示出来，可以多选)
* 实现下拉选择框多选

* 操作步骤
    1、创建页面
    2、选中添加到右边 (判断下拉框是否被选中，有一个属性 selected = true | false)
        * 获取到select1
        * 获取select1下面的option
        * 返回的是数组，遍历数组
        * 根据遍历之后的值，进行判断
        ** 如果是选中，selected = true。把这个部分添加到右边
        *** 使用什么添加到右边 
            - 先获取到select2
            - 然后执行appendChild方法完成添加
            - appendChild特点：
                * 添加到末尾
                * 实现类似剪切黏贴的效果

    3、全部添加到右边
        * 获取到select1
        * 获取select1下面的option
        * 返回的是数组，遍历数组
        * 把遍历出来的值，都添加到右边

10、安装myeclipse开发工具
* 必须要安装jdk，同时必须要配置环境变量
* myeclipse10的版本

* 破解：如果安装了早起版本的myeclipse，必须要卸载

* eclipse和myeclipse区别
** eclipse是一个开发工具
** myeclipse是一个插件
*** 我是有eclipse开发工具同时安装了myeclipse插件

11、案例五：省市联动
1、创建一个页面（两个下拉框）
2、点击第一个下拉框里面的内容，会在第二个下拉框里面显示对应的内容
* 使用到一个事件 onchange事件：表示改变事件
* 使用this.value把value值传递过去

12、案例六：动态生成表格
* var a = “

“;
a += “ “;

  a结果：<table></table>

1、创建页面（两个文本输入框和一个按钮）
2、获取到文本框里面的值
3、根据值（行和列）生成表格
    * 行：tr
    * 单元格：td