1、案例一:在末尾添加節點
第一步:獲取到ul標籤第二步:創建li標籤
document.createElement("標籤名稱")方法
第三步:創建文本
document.createTextNode("文本內容");
第四步:把文本添加到li下面
使用 appendChild方法
第五步:把裏添加到ul末尾
使用 appendChild方法
2、元素對象(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);
3、Node對象屬性一
* nodeName* nodeType
* nodeValue
* 使用dom解析html時候,需要html裏面的標籤,屬性和文本都封裝成對象
* 標籤節點對應的值
nodeType: 1
nodeName: 大寫標籤名稱 比如SPAN
nodeValue: null
* 屬性節點對應的值
nodeType: 2
nodeName: 屬性名稱
nodeValue: 屬性的值
* 文本節點對應的值
nodeType: 3
nodeName: #text
nodeValue: 文本內容
4、Node對象的屬性二
<ul><li>qqqqq</li>
<li>wwww</li>
</ul>
* 父節點
- ul是li的父節點- parentNode
- //得到li1var 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);
5、操作dom樹
** appendChild方法
- 添加子節點到末尾- 特點:類似於剪切黏貼的效果
** insertBefore(newNode,oldNode)方法
不能自己插入別人,通過父節點插入- 在某個節點之前插入一個新的節點
- 兩個參數
* 要插入的節點
* 在誰之前插入
- 插入一個節點,節點不存在,創建
1、創建標籤
2、創建文本
3、把文本添加到標籤下面
- 代碼
/*
1、獲取到li13標籤
2、創建li
3、創建文本
4、把文本添加到li下面
5、獲取到ul
6、把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方法:刪除節點
- 通過父節點刪除,不能自己刪除自己- /*
1、獲取到li24標籤
2、獲取父節點ul標籤
3、執行刪除(通過父節點刪除)
*/
//獲取li標籤
var li24 = document.getElementById("li24");
//獲取父節點
//兩種方式 1、通過id獲取 ; 2、通過屬性 parentNode獲取
var ul31 = document.getElementById("ulid31");
//刪除(通過父節點)
ul31.removeChild(li24);
** replaceChild(newNode,oldNode)方法: 替換節點
- 不能自己替換自己,通過父節點替換- 兩個參數
** 第一個參數:新的節點(替換成的節點)
** 第二個參數:舊的節點(被替換的節點)
- 代碼
/*
1、獲取到li34
2、創建標籤li
3、創建文本
4、把文本添加到li下面
5、獲取ul標籤(父節點)
6、執行替換操作 (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裏面/*
1、獲取到ul
2、執行復制方法 cloneNode方法複製 true
3、把複製之後的內容放到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方法:通過父節點替換6、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></tabl
e>";
var tab = "<table>";
tab += "</table>";
//相當於 var tab = "<table></table>";
div11.innerHTML = tab;
7、案例二:動態顯示時間
* 得到當前的時間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);
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<div id="times">
</div>
<script type="text/javascript">
function getD1() {
//當前時間
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//獲取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
//使用定時器實現每一秒寫一次時間
setInterval("getD1();",1000);
</script>
</body>
</html>
8、案例三:全選練習
** 使用複選框上面一個屬性判斷是否選中- checked屬性
- checked=true:選中
- checked=false:不選中
* 創建一個頁面
** 複選框和按鈕
- 四個複選框表示愛好
- 還有一個複選框操作 全選和選不選,也有一個事件
** 三個按鈕,分別有事件
- 全選
- 全不選
- 反選
* 全選操作
步驟:
/*
1、獲取要操作的複選框
- 使用getElementsByName()
2、返回是數組,
- 屬性 checked判斷複選框是否選中
*** checked = true; //表示選中
*** checked = false;//表示不選中
- 遍歷數組,得到的是每一個checkbox
* 把每一個checkbox屬性checked=true
*/
* 全不選操作
步驟
/*
1、獲取到要操作的複選框
2、返回的是數組,遍歷數組
3、得到每一個複選框
4、設置複選框的屬性 checked=false
*/
* 反選操作
步驟
/*
1、獲取到要操作的複選框
2、返回數組,遍歷數組
3、得到每一個複選框
4、判斷當前的複選框是選中還是不選中
- if(love1.checked == true) {}
5、如果選中,屬性checked設置成false,否則,設置成true
*/
* 使用複選框實現全選和全不選
步驟
/*
1、得到上面那個複選框
- 通過id獲取到
2、判斷這個複選框是否是選中
- if條件,checked==true
3、如果是選中,下面是全選
4、如果不是選中,下面是全不選
*/
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" id="boxid" οnclick="selAllNo();"/>全選/全不選
<br/>
<input type="checkbox" name="love"/>籃球
<input type="checkbox" name="love"/>排球
<input type="checkbox" name="love"/>羽毛球
<input type="checkbox" name="love"/>乒乓球
<br/>
<input type="button" value="全選" οnclick="selAll();"/>
<input type="button" value="全不選" οnclick="selNo();"/>
<input type="button" value="反選" οnclick="selOther();"/>
<script type="text/javascript">
//實現全選和全不選
function selAllNo() {
/*
1、得到上面那個複選框
- 通過id獲取到
2、判斷這個複選框是否是選中
- if條件,checked==true
3、如果是選中,下面是全選
4、如果不是選中,下面是全不選
*/
//得到上面複選框
var box1 = document.getElementById("boxid");
//判斷這個複選框是否是選擇
if(box1.checked == true) { //是選擇狀態
//調用全選方法
selAll();
} else { //不是選中狀態
//調用全不選方法
selNo();
}
}
//實現反選的操作
function selOther() {
/*
1、獲取到要操作的複選框
2、返回數組,遍歷數組
3、得到每一個複選框
4、判斷當前的複選框是選中還是不選中
- if(love1.checked == true) {}
5、如果選中,屬性checked設置成false,否則,設置成true
*/
//獲取要操作的複選框
var loves11 = document.getElementsByName("love");
//遍歷數組
for(var a=0;a<loves11.length;a++) {
//得到每一個複選框
var love11 = loves11[a];
//判斷當前這個複選框是什麼狀態
if(love11.checked == true) { //是選中的狀態
//設置checked=false
love11.checked = false;
} else { //是不選中的狀態
//把checked=true
love11.checked = true;
}
}
}
//實現全不選的操作
function selNo() {
/*
1、獲取到要操作的複選框
2、返回的是數組,遍歷數組
3、得到每一個複選框
4、設置複選框的屬性 checked=false
*/
//得到要操作的複選框
var loves1 = document.getElementsByName("love");
//遍歷數組
for(var j=0;j<loves1.length;j++) {
//得到每一個複選框
var love1 = loves1[j];
//設置屬性的值checked = false;
love1.checked = false;
}
}
//實現全選的操作
function selAll() {
/*
1、獲取要操作的複選框
- 使用getElementsByName()
2、返回是數組,
- 屬性 checked判斷複選框是否選中
*** checked = true; //表示選中
*** checked = false;//表示不選中
- 遍歷數組,得到的是每一個checkbox
* 把每一個checkbox屬性checked=true
*/
//獲取要操作的複選框
var loves = document.getElementsByName("love");
//遍歷數組,得到每一個複選框
for(var i=0;i<loves.length;i++) {
var love1 = loves[i]; //得到每一個複選框
//設置屬性是true
love1.checked = true;
}
}
</script>
</body>
</html>
9、案例四:下拉列表左右選擇
* 下拉選擇框<select>
<option>111</option>
<option>111</option>
</select>
* 創建一個頁面
** 兩個下拉選擇框
- 設置屬性 multiple屬性
** 四個按鈕,有事件
* 選中添加到右邊
步驟
/*
1、獲取select1裏面的option
- getElementsByTagName()返回是數組
- 遍歷數組,得到每一個option
2、判斷option是否被選中
- 屬性 selected,判斷是否被選中
** selected= true: 選中
** selected= false:沒有選擇
3、如果是選中,把選擇的添加到右邊去
4、得到select2
4、添加選擇的部分
- appendChild方法
*/
* 全部添加到右邊
步驟
/*
1、獲取第一個select下面的option對象
2、返回數組,遍歷數組
3、得到每一個option對象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
* 選中添加到左邊
步驟
/*
1、獲取select2裏面的option對象
2、返回是數組,遍歷數組
3、得到每一個option對象
4、判斷option是否被選中
- if條件 屬性 selected == true:選擇
5、獲取select1
6、添加到select1裏面
- 使用appendChild方法
*/
* 全部添加到左邊
步驟
/*
1、獲取select2裏面的option對象
2、返回是數組,遍歷數組
3、得到每一個option對象
4、獲取到select1
5、添加到select1裏面
- 使用appendChild方法
*/
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<div id="s1" style="float:left;">
<div>
<select id="select1" multiple="multiple" style="width:100px;height:100px;">
<option>AAAAAAAA</option>
<option>BBBBBBBB</option>
<option>CCCCCCCC</option>
<option>DDDDDDDD</option>
<option>EEEEEEEE</option>
</select>
</div>
<div>
<input type="button" value="選中添加到右邊" οnclick="selToRight();"/><br/>
<input type="button" value="全部添加到右邊" οnclick="allToRight();"/>
</div>
</div>
<div id="s2">
<div>
<select id="select2" multiple="multiple" style="width:100px;height:100px;">
<option>QQQQQQQQ</option>
</select>
</div>
<div>
<input type="button" value="選中添加到左邊" οnclick="selToLeft();"/><br/>
<input type="button" value="全部添加到左邊" οnclick="allToLeft();"/>
</div>
</div>
<script type="text/javascript">
//實現全部添加到左邊
function allToLeft() {
/*
1、獲取select2裏面的option對象
2、返回是數組,遍歷數組
3、得到每一個option對象
4、獲取到select1
5、添加到select1裏面
- 使用appendChild方法
*/
//獲取select2
var select2 = document.getElementById("select2");
//獲取select1
var select1 = document.getElementById("select1");
//獲取select2裏面的option
var options1 = select2.getElementsByTagName("option");
//遍歷數組
for(var m=0;m<options1.length;m++){
//得到每一個option
var op11 = options1[m];
//添加到select1裏面
select1.appendChild(op11);
m--;
}
}
//選擇添加到左邊
function selToLeft() {
/*
1、獲取select2裏面的option對象
2、返回是數組,遍歷數組
3、得到每一個option對象
4、判斷option是否被選中
- if條件 屬性 selected == true:選擇
5、獲取select1
6、添加到select1裏面
- 使用appendChild方法
*/
//獲取select1
var s1 = document.getElementById("select1");
//獲取到select2
var s2 = document.getElementById("select2");
//得到s1裏面的option對象
var opss = s2.getElementsByTagName("option");
//遍歷數組
for(var aa=0;aa<opss.length;aa++) {
//得到每一個option
var op = opss[aa];
//判斷是否被選中
if(op.selected == true) { //被選中
//添加到select1裏面
s1.appendChild(op);
aa--;
}
}
}
//全部添加到右邊
function allToRight() {
/*
1、獲取第一個select下面的option對象
2、返回數組,遍歷數組
3、得到每一個option對象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
//得到select2
var s2 = document.getElementById("select2");
//得到select下面的option對象
var s1 = document.getElementById("select1");
var ops = s1.getElementsByTagName("option");//返回的是數組
//遍歷數組
for(var j=0;j<ops.length;j++) {
//得到每一個option對象
var op1 = ops[j];
//添加option到s2下面
s2.appendChild(op1);
j--;
}
}
//實現選中添加到右邊
function selToRight() {
/*
1、獲取select1裏面的option
- getElementsByTagName()返回是數組
- 遍歷數組,得到每一個option
2、判斷option是否被選中
- 屬性 selected,判斷是否被選中
** selected= true: 選中
** selected= false:沒有選擇
3、如果是選中,把選擇的添加到右邊去
4、得到select2
4、添加選擇的部分
- appendChild方法
*/
//獲取select1裏面的option
//獲取select2
var select2 = document.getElementById("select2");
//得到select1
var select1 = document.getElementById("select1");
//得到option
var options1 = select1.getElementsByTagName("option");
//遍歷數組
for(var i=0;i<options1.length;i++) {
//alert(i);
//第一次循環 i=0 length:5
//第二次循環 i=0 length:4
// i=0 length: 3
var option1 = options1[i];//得到每一個option對象
//判斷是否被選中
if(option1.selected == true) {
//添加到select2裏面
select2.appendChild(option1);
i--;
}
}
}
</script>
</body>
</html>
10、案例五:省市聯動
* 創建一個頁面,有兩個下拉選擇框* 在第一個下拉框裏面有一個事件 :改變事件 onchange事件
- 方法add1(this.value);表示當前改變的option裏面的value值
* 創建一個二維數組,存儲數據
* 每個數組中第一個元素是國家名稱,後面的元素是國家裏面的城市
*
/*
1、遍歷二維數組
2、得到也是一個數組(國家對應關係)
3、拿到數組中的第一個值和傳遞過來的值做比較
4、如果相同,獲取到第一個值後面的元素
5、得到city的select
6、添加過去(使用)appendChild方法
- 創建option(三步)
*/
/*
由於每次都要向city裏面添加option
第二次添加,會追加。
* 每次添加之前,判斷一下city裏面是否有option,如果有,刪除
*/
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
<select id="countryid" οnchange="add1(this.value);">
<option value="0">--請選擇--</option>
<option value="中國">中國</option>
<option value="美國">美國</option>
<option value="德國">德國</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
</select>
</body>
<script type="text/javascript">
//創建一個數組存儲數據
//二維數組
var arr = new Array(4);
arr[0] = ["中國","南京","撫州","臨洮","日喀則","哈密"];
arr[1] = ["美國","華盛頓","底特律","休斯頓","紐約"];
arr[2] = ["德國","慕尼黑","柏林","法蘭克福","狼堡"];
arr[3] = ["日本","東京","北海道","大阪","廣島","長崎"];
function add1(val) {
alert(val);
/*
1、遍歷二維數組
2、得到也是一個數組(國家對於關係)
3、拿到數組中的第一個值和傳遞過來的值做比較
4、如果相同,獲取到第一個值後面的元素
5、得到city的select
6、添加過去(使用)appendChild方法
- 創建option(三步)
*/
/*
由於每次都要想city裏面添加option
第二次添加,追加
* 每次添加之前,判斷一下city裏面是否有option,如果有,刪除
*/
//獲取city的select
var city1 = document.getElementById("cityid");
//得到city裏面的option
var options1 = city1.getElementsByTagName("option");
//遍歷數組
for(var m=0;m<options1.length;m++) {
//得到每一個option
var op = options1[m];
//刪除這個option 通過父節點刪除
city1.removeChild(op);
m--;
}
//遍歷二維數組
for(var i=0;i<arr.length;i++) {
//得到二維數組裏面的每一個數組
var arr1 = arr[i];
//得到遍歷之後的數組的第一個值
var firstvalue = arr1[0];
//判斷傳遞過來的值和第一個值是否相同
if(firstvalue == val) { //相同
//得到第一個值後面的元素
//遍歷arr1
for(var j=1;j<arr1.length;j++) {
var value1 = arr1[j]; //得到城市的名稱
//alert(value1);
//創建option
var option1 = document.createElement("option");
//創建文本
var text1 = document.createTextNode(value1);
//把文本添加到option1裏面
option1.appendChild(text1);
//添加值到city1裏面
city1.appendChild(option1);
}
}
}
}
</script>
</html>
11、案例六:動態生成表格
*創建一個頁面:兩個輸入框和一個按鈕*代碼和步驟
/*
1、得到輸入的行和列的值
2、生成表格
** 循環行
** 在行裏面循環單元格
3、顯示到頁面上
- 把表格的代碼設置到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;
}
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
</style>
</head>
<body>
行:<input type="text" id="h" />
列:<input type="text" id="l" />
<br/>
<input type="button" value="生成" οnclick="add2();"/>
<div id="divv">
</div>
<script type="text/javascript">
function add2() {
/*
1、得到輸入的行和列的值
2、生成表格
** 循環行
** 在行裏面循環單元格
3、顯示到頁面上
- 把表格的代碼設置到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;
}
</script>
</body>
</html>