JavaWeb之04javaScript基礎&DOM目錄

目錄：

一、案例：在末尾添加節點(*****)
　　** 建立標籤 createElement方法
　　** 建立文本 createTextNode方法
　　** 把文本添加到標籤下面 appendChild方法

二、元素對象(瞭解)
　　** 如何獲取標籤的子標籤（惟一有效辦法）（*********）
　　　　- 使用getElementsByTagName方法

三、Node對象(瞭解)
　　** 屬性 nodeType nodeName nodeValue
　　** 記住nodeType值（******）

四、操做DOM樹（********）
　　* 父節點：parentNode
　　* appendChild方法
　　　　- 添加到末尾
　　　　- 剪切黏貼的效果
　　* insertBefore(新節點,舊節點)
　　　　- 經過父節點添加
　　* removeChild
　　　　- 經過父節點刪除
　　* replaceChild(新節點,舊節點)
　　　　- 經過父節點替換

五、innerHTML屬性（*******）
　　* 獲取文本內容
　　* 向標籤裏面設置內容（能夠設置html代碼）

==================================================

六、案例：動態顯示時間（******）
　　- 定時器 setInterval：某個時間內重複執行js代碼

七、案例：全選練習（******）
　　- 屬性： checked=true：複選框是選中，false是不選中

八、案例：下拉列表左右選擇（******）
　　- select下拉列表裏面屬性 multiple：讓下拉框裏面的內容都顯示出來
　　- 屬性：selected=true：option是選中，false：option不是選中

九、案例：省市聯動（***重點中的重點***）
　　- 二維數組：數組裏面加一個數組
　　- 事件：onchange事件，改變事件
　　- 方法 add1(this.value)

十、案例：動態生成表格（******）
　　- innerHTML屬性
　　- 使用一個變量存html代碼
　　- tab += "</table>";

 

 

day04

上節內容回顧
一、Date對象裏面
　　** 獲取當前的月 getMonth(): 返回 0-11
　　** 獲取當前星期，星期日 返回 0

二、Math對象裏面
　　** 靜態方法，Math.floor()

三、全局函數
　　eval()

四、js裏面的重載
　　arguments：數組，存儲參數

五、js的bom裏面對象
　　navigator screen location history

六、window對象
　　setInterval和setTimeout

　　* clearInterval和clearTimeout

　　* alert confirm prompt close
　　**open("地址","","寬度高度")：打開新窗口

　　* opener：獲得建立此窗口的窗口

七、dom解析html

八、對象有哪些？
　　document對象：整個文檔
　　element對象：標籤
　　屬性對象
　　文本對象
　　Node節點對象

九、document對象
　　** getElementById
　　** getElementsByName: 返回數組
　　** getElementsByTagName: 返回數組
　　** write方法

一、案例一：在末尾添加節點

　　第一步：獲取到ul標籤
　　第二步：建立li標籤
　　　　document.createElement("標籤名稱")方法
　　第三步：建立文本
　　　　document.createTextNode("文本內容");
　　第四步：把文本添加到li下面
　　　　使用 appendChild方法
　　第五步：把裏添加到ul末尾
　　　　使用 appendChild方法

二、元素對象（element對象）

　　** 要操做element對象，首先必需要獲取到element，
　　　　- 使用document裏面相應的方法獲取
　　** 方法
　　　　*** 獲取屬性裏面的值
　　　　　　getAttribute("屬性名稱")
　　　　　　- var input1 = document.getElementById("inputid");
　　　　　　//alert(input1.value);
　　　　　　alert(input1.getAttribute("value"));
　　　　*** 設置屬性的值
　　　　　　input1.setAttribute("class","haha");
　　　　*** 刪除屬性
　　　　　　input1.removeAttribute("name");

　　　　　　** 不能刪除value　　
　　*** 想要獲取標籤下面的子標籤
　　　　** 使用屬性 childNodes，可是這個屬性兼容性不好
　　　　** 得到標籤下面子標籤的惟一有效辦法，使用getElementsByTagName方法
　　　　　　- var ul11 = document.getElementById("ulid1");
　　　　　　//獲取ul下面的子標籤
　　　　　　//var lis = ul11.childNodes;
　　　　　　//alert(lis.length);
　　　　　　var lis = ul11.getElementsByTagName("li");
　　　　　　alert(lis.length);

三、Node對象屬性一

　　* nodeName
　　* nodeType
　　* nodeValue

　　* 使用dom解析html時候，須要html裏面的標籤，屬性和文本都封裝成對象

　　* 標籤節點對應的值
　　　　nodeType： 1
　　　　nodeName： 大寫標籤名稱 好比SPAN
　　　　nodeValue: null
　　* 屬性節點對應的值
　　　　nodeType： 2
　　　　nodeName： 屬性名稱
　　　　nodeValue: 屬性的值
　　* 文本節點對應的值
　　　　nodeType： 3
　　　　nodeName： #text
　　　　nodeValue: 文本內容

四、Node對象的屬性二

　　<ul>
　　　　<li>qqqqq</li>
　　　　<li>wwww</li>
　　</ul>

　　* 父節點
　　　　- ul是li的父節點
　　　　　　- parentNode
　　　　　　- //獲得li1
　　　　　　var li1 = document.getElementById("li1");
　　　　　　//獲得ul
　　　　　　var ul1 = li1.parentNode;
　　　　　　alert(ul1.id);

　　* 子節點
　　　　- li是ul的子節點
　　　　- childNodes：獲得全部子節點，可是兼容性不好

　　　　- firstChild：獲取第一個子節點
　　　　　　- //獲取ul的第一個子節點 id=li1
　　　　　　//獲得ul
　　　　　　var ul1 = document.getElementById("ulid");
　　　　　　//第一個子節點
　　　　　　var li1 = ul1.firstChild;
　　　　　　alert(li1.id);
　　　　- lastChild：獲取最後一個子節點
　　　　　　//獲得最後一個子節點
　　　　　　var li4 = ul1.lastChild;
　　　　　　alert(li4.id);

　　* 同輩節點
　　　　- li直接關係是同輩節點
　　　　- nextSibling: 返回一個給定節點的下一個兄弟節點。
　　　　previousSibling：返回一個給定節點的上一個兄弟節點。

　　　　- //獲取li的id是li3的上一個和下一個兄弟節點
　　　　var li3 = document.getElementById("li3");
　　　　//alert(li3.nextSibling.id);
　　　　alert(li3.previousSibling.id);

五、操做dom樹

　　** appendChild方法
　　　　- 添加子節點到末尾
　　　　- 特色：相似於剪切黏貼的效果

　　** insertBefore(newNode,oldNode)方法
　　　　- 在某個節點以前插入一個新的節點
　　　　- 兩個參數
　　　　　　* 要插入的節點
　　　　　　* 在誰以前插入
　　　　- 插入一個節點，節點不存在，建立
　　　　　　一、建立標籤
　　　　　　二、建立文本
　　　　　　三、把文本添加到標籤下面
　　　　　　　- 代碼
　　　　　　　　/*
　　　　　　　　一、獲取到li13標籤
　　　　　　　　二、建立li
　　　　　　　　三、建立文本
　　　　　　　　四、把文本添加到li下面
　　　　　　　　五、獲取到ul
　　　　　　　　六、把li添加到ul下面（在<li>貂蟬</li>以前添加 <li>董小宛</li>）
　　　　　　　　*/
　　　　　　　　//獲取li3 標籤
　　　　　　　　var li13 = document.getElementById("li13");
　　　　　　　　//建立li
　　　　　　　　var li15 = document.createElement("li");
　　　　　　　　//建立文本
　　　　　　　　var text15 = document.createTextNode("董小宛");
　　　　　　　　//把文本添加到li下面 appendChild
　　　　　　　　li15.appendChild(text15);
　　　　　　　　//獲取到ul
　　　　　　　　var ul21 = document.getElementById("ulid21");
　　　　　　　　//在<li>貂蟬</li>以前添加 <li>董小宛</li>
　　　　　　　　//insertBefore(newNode,oldNode)
　　　　　　　　ul21.insertBefore(li15,li13);
　　　　*** 不存在 沒有insertAfter()方法

　　** removeChild方法：刪除節點
　　　　　　- 經過父節點刪除，不能本身刪除本身
　　　　　　- /*
　　　　　　　　一、獲取到li24標籤
　　　　　　　　二、獲取父節點ul標籤
　　　　　　　　三、執行刪除（經過父節點刪除）
　　　　　　*/
　　　　　　//獲取li標籤
　　　　　　var li24 = document.getElementById("li24");
　　　　　　//獲取父節點
　　　　　　//兩種方式 一、經過id獲取 ； 二、經過屬性 parentNode獲取
　　　　　　var ul31 = document.getElementById("ulid31");
　　　　　　//刪除（經過父節點）
　　　　　　ul31.removeChild(li24);

　　** replaceChild(newNode,oldNode)方法: 替換節點
　　　　　　- 不能本身替換本身，經過父節點替換
　　　　　　- 兩個參數
　　　　　　　　** 第一個參數：新的節點（替換成的節點）
　　　　　　　　** 第二個參數：舊的節點（被替換的節點）
　　　　　　- 代碼
　　　　　　　/*
　　　　　　　　一、獲取到li34
　　　　　　　　二、建立標籤li
　　　　　　　　三、建立文本
　　　　　　　　四、把文本添加到li下面
　　　　　　　　五、獲取ul標籤（父節點）
　　　　　　　　六、執行替換操做 （replaceChild(newNode,oldNode)）
　　　　　　　*/
　　　　　　　　//獲取li34
　　　　　　　　var li34 = document.getElementById("li34");
　　　　　　　　//建立li
　　　　　　　　var li35 = document.createElement("li");
　　　　　　　　//建立文本
　　　　　　　　var text35 = document.createTextNode("張無忌");
　　　　　　　　//把文本添加到li下面
　　　　　　　　li35.appendChild(text35);
　　　　　　　　//獲取ul
　　　　　　　　var ul41 = document.getElementById("ulid41");
　　　　　　　　//替換節點
　　　　　　　　ul41.replaceChild(li35,li34);

　　　　** cloneNode(boolean): 複製節點
　　　　　　- //把ul列表複製到另一個div裏面
　　　　　　/*
　　　　　　　　一、獲取到ul
　　　　　　　　二、執行復制方法 cloneNode方法複製 true
　　　　　　　　三、把複製以後的內容放到div裏面去
　　　　　　　　** 獲取到div
　　　　　　　　** appendChild方法
　　　　　　*/
　　　　　　//獲取ul
　　　　　　var ul41 = document.getElementById("ulid41");
　　　　　　//複製ul，放到相似剪切板裏面
　　　　　　var ulcopy = ul41.cloneNode(true)
　　　　　　//獲取到div
　　　　　　var divv = document.getElementById("divv");
　　　　　　//把副本放到div裏面去
　　　　　　divv.appendChild(ulcopy);

　　** 操做dom總結：
　　　　* 獲取節點使用方法
　　　　　　getElementById()：經過節點的id屬性，查找對應節點。
　　　　　　getElementsByName()：經過節點的name屬性，查找對應節點。
　　　　　　getElementsByTagName()：經過節點名稱，查找對應節點
　　　　* 插入節點的方法
　　　　　　insertBefore方法：在某個節點以前插入
　　　　　　appendChild方法：在末尾添加，剪切黏貼
　　　　* 刪除節點方法
　　　　　　removeChild方法：經過父節點刪除
　　　　* 替換節點方法
　　　　　　replaceChild方法：經過父節點替換

六、innerHTML屬性

　　* 這個屬性不是dom的組成部分，可是大多數瀏覽器都支持的屬性

　　第一個做用：獲取文本內容
　　　　*** //獲取span標籤
　　　　　　var span1 = document.getElementById("sid");
　　　　　　alert(span1.innerHTML);

　　第二個做用：向標籤裏面設置內容（能夠是html代碼）
　　　　*** //向div裏面設置內容 <h1>AAAAA</h1>
　　　　　　//獲取到div
　　　　　　var div11 = document.getElementById("div11");
　　　　　　//設置內容
　　　　　　div11.innerHTML = "<h1>AAAAA</h1>";

　　** 練習 ： 向div裏面添加一個表格
　　　　- //向div裏面添加一個表格
　　　　//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";

　　　　var tab = "<table>";
　　　　tab += "</table>";

　　　　//至關於 var tab = "<table></table>";

　　　　div11.innerHTML = tab;

七、案例二：動態顯示時間

　　* 獲得當前的時間
　　　　var date = new Date(); //獲得不是常規的格式
　　　　var d1 = date.toLocaleString(); //格式化
　　* 須要讓頁面每一秒獲取時間
　　　　setInterval方法 定時器
　　* 顯示到頁面上
　　　　每一秒向div裏面寫一次時間
　　* 使用innerHTML屬性
　　* 代碼
　　　　function getD1() {
　　　　//當前時間
　　　　var date = new Date();
　　　　//格式化
　　　　var d1 = date.toLocaleString();
　　　　//獲取div
　　　　var div1 = document.getElementById("times");
　　　　div1.innerHTML = d1;
　　　　}　　

　　　　//使用定時器實現每一秒寫一次時間
　　　　setInterval("getD1();",1000);

八、案例三：全選練習

** 使用複選框上面一個屬性判斷是否選中
　　- checked屬性
　　- checked=true：選中
　　- checked=false：不選中

* 建立一個頁面
　　** 複選框和按鈕
　　　　- 四個複選框表示愛好
　　　　- 還有一個複選框操做 全選和選不選，也有一個事件

　　** 三個按鈕，分別有事件
　　　　- 全選
　　　　- 全不選
　　　　- 反選
* 全選操做
　　　　步驟：
　　　　/*
　　　　一、獲取要操做的複選框
　　　　　　- 使用getElementsByName()
　　　　二、返回是數組，
　　　　　　- 屬性 checked判斷複選框是否選中
　　　　　　*** checked = true; //表示選中
　　　　　　*** checked = false;//表示不選中
　　　　　　- 遍歷數組，獲得的是每個checkbox
　　　　　　* 把每個checkbox屬性checked=true
　　　　*/

* 全不選操做
　　步驟
　　/*
　　　　一、獲取到要操做的複選框
　　　　二、返回的是數組，遍歷數組
　　　　三、獲得每個複選框
　　　　四、設置複選框的屬性 checked=false
　　*/

* 反選操做
　　步驟
　　/*
　　　　一、獲取到要操做的複選框
　　　　二、返回數組，遍歷數組
　　　　三、獲得每個複選框

　　　　四、判斷當前的複選框是選中仍是不選中
　　　　　　- if(love1.checked == true) {}
　　　　五、若是選中，屬性checked設置成false，不然，設置成true
　　*/

* 使用複選框實現全選和全不選
　　步驟
　　/*
　　　　一、獲得上面那個複選框
　　　　　　- 經過id獲取到
　　　　二、判斷這個複選框是不是選中
　　　　　　- if條件，checked==true
　　　　三、若是是選中，下面是全選
　　　　四、若是不是選中，下面是全不選
　　*/

 

九、案例四：下拉列表左右選擇

* 下拉選擇框
　　<select>
　　　　<option>111</option>
　　　　<option>111</option>
　　</select>

　　* 建立一個頁面
　　　　** 兩個下拉選擇框
　　　　　　- 設置屬性 multiple屬性
　　　　** 四個按鈕，有事件

* 選中添加到右邊
　　步驟
　　/*
　　　　一、獲取select1裏面的option
　　　　　　- getElementsByTagName()返回是數組
　　　　　　- 遍歷數組，獲得每個option
　　　　二、判斷option是否被選中
　　　　　　- 屬性 selected，判斷是否被選中
　　　　　　　　** selected= true: 選中
　　　　　　　　** selected= false：沒有選擇
　　　　三、若是是選中，把選擇的添加到右邊去
　　　　四、獲得select2
　　　　四、添加選擇的部分
　　　　　　- appendChild方法
　　*/

* 所有添加到右邊
　　步驟
　　/*
　　一、獲取第一個select下面的option對象
　　二、返回數組，遍歷數組
　　三、獲得每個option對象
　　四、獲得select2
　　五、添加到select2下面
　　　　- appendChild方法
　　*/

* 選中添加到左邊
　　步驟
　　/*
　　　　一、獲取select2裏面的option對象
　　　　二、返回是數組，遍歷數組
　　　　三、獲得每個option對象
　　　　四、判斷option是否被選中
　　　　　　- if條件 屬性 selected == true：選擇
　　　　五、獲取select1
　　　　六、添加到select1裏面
　　　　　　- 使用appendChild方法
　　*/

* 所有添加到左邊
　　步驟
　　/*
　　　　一、獲取select2裏面的option對象
　　　　二、返回是數組，遍歷數組
　　　　三、獲得每個option對象

　　　　四、獲取到select1
　　　　五、添加到select1裏面
　　　　　　- 使用appendChild方法
　　*/

十、案例五：省市聯動

* 建立一個頁面，有兩個下拉選擇框
* 在第一個下拉框裏面有一個事件 ：改變事件 onchange事件
　　- 方法add1(this.value);表示當前改變的option裏面的value值
* 建立一個二維數組，存儲數據
* 每一個數組中第一個元素是國家名稱，後面的元素是國家裏面的城市
　　/*
　　　　一、遍歷二維數組
　　　　二、獲得也是一個數組（國家對應關係）

　　　　三、拿到數組中的第一個值和傳遞過來的值作比較
　　　　四、若是相同，獲取到第一個值後面的元素
　　　　五、獲得city的select
　　　　六、添加過去（使用）appendChild方法
　　　　　　- 建立option（三步）
　　*/

　　/*
　　　　因爲每次都要向city裏面添加option
　　　　第二次添加，會追加。

　　　　* 每次添加以前，判斷一下city裏面是否有option，若是有，刪除
　　*/

十一、案例六：動態生成表格

*建立一個頁面：兩個輸入框和一個按鈕

*代碼和步驟
　　/*
　　　　一、獲得輸入的行和列的值
　　　　二、生成表格
　　　　　　** 循環行
　　　　　　** 在行裏面循環單元格
　　　　三、顯示到頁面上
　　　　　　- 把表格的代碼設置到div裏面
　　　　　　- 使用innerHTML屬性
　　*/
　　　　//獲取輸入的行和列
　　　　var h = document.getElementById("h").value;
　　　　var l = document.getElementById("l").value;

　　　　//把表格代碼放到一個變量裏面
　　　　var tab = "<table border='1' bordercolor='blue'>";
　　　　//循環行
　　　　for(var i=1;i<=h;i++) {
　　　　tab += "<tr>";
　　　　//循環單元格
　　　　for(var j=1;j<=l;j++) {
　　　　　　tab += "<td>aaaaaaa</td>"
　　　　　　}
　　　　　　tab += "</tr>";
　　　　}

　　　　tab += "</table>";

　　　　//alert(tab); 　　　　//獲得div標籤 　　　　var divv = document.getElementById("divv"); 　　　　//把table的代碼設置到div裏面去 　　　　divv.innerHTML = tab;　　}