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