Javaweb第八天學習
實現一個列表後面新增文字
<body>
<ulid="ulid">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<br/>
<inputtype="button" value="新增" οnclick="add1();" />
<scripttype="text/javascript">
functionadd1() {
var ul1 =document.getElementById("ulid");//獲取ul物件
var li1 =document.createElement("li");//獲取li標籤
var text1 = document.createTextNode("222");//獲取文字物件
li1.appendChild(text1);//把文字新增到標籤下面
ul1.appendChild(li1);//把標籤加到ul1下面
}
</script>
</body>
2元素物件（Element物件）
要操作element物件。首先要使用document裡面的方法獲取
方法：獲取屬性裡面的值getAttribute(屬性的名字)
<input type="text" id="id"value="aaa">
<script type="text/javascript">
varv=document.getElementById("id");
//alert(v.value);
alert(v.getAttribute("value"));呼叫了getAttribute()方法
</script>
setAttribute()設定屬性的值
v.setAttribute("class","name");
alert(v.getAttribute("class"));
removeAttribute()刪除屬性，不能刪除value
想要獲取標籤下面的子標籤可以使用屬性ChileNodes，但是相容性很差，唯一有效的方法是getElementByTagName()
Node物件屬性一
nodeName
nodeType
nodeValue
使用dom解析HTML的時候，需要HTML裡面的標籤屬性和文字都封裝從物件
標籤節點對應的值：
nodeType:1
nodeName:大寫的標籤名稱
nodeValue:null
屬性節點對應的值
nodeType:2
nodeName:屬性的名稱
nodeValue:屬性的值
文字節點對應的值
nodeType:3
nodeName:#text
nodeValue:文字內容
Node物件的屬性二
<ul id=”1”> <li id=”2”>qqq</li><liid=”3”>www</li></ul>
父節點：ul是li的父節點，屬性parentNode
var li1=document.getElementById(“2”); li1.parentNode可以得到ul節點物件
子節點：li是ul的子節點
Var ul1=document.getElementById(“1”); ul1.childNodes得到左右子節點，相容性差
Ul1.firstChild得到第一個子節點物件
Ul2.lastChild得到最後一個子節點物件
同輩節點：nextSibling得到這個節點的同輩節點中的下一個節點物件
previouSibling得到這個節點的同輩節點的上一個節點物件
操作Dom數
appendChild方法：新增子節點倒尾部。類似與剪下貼上的效果
insertBefore(newNode,OldDode)在某個節點之前插入一個節點
引數：要插入的節點 在誰之前插入
步驟：在熊勇前面新增王美華
<input type="button"id="id" value="新增" οnclick="add()">
<script type="text/javascript">
function add() {
//1獲取“3”標籤
var li3 =document.getElementById("3");
//建立li標籤
var li6 =document.createElement("li");
//建立文字
var text6 =document.createTextNode("王美華");
//把文字新增的到標籤下
li6.appendChild(text6);
//建立ul標籤
var ul1 =document.getElementById("1");
//新增
ul1.insertBefore(li6, li3);
}
</script>
removeChild刪除節點
只能通過父節點刪除：刪除熊勇
<ul id="1">
<li id="2">史文華</li>
<li id="3">熊勇</li>
<li id="4">張翼</li>
</ul>
<input type="button" id="remove" value=刪除" οnclick="remove()">
<script type="text/javascript">
//刪除熊勇
function remove() {
//獲取3號標籤
var li3 = document.getElementById("3");
//獲取ul標籤
var ul1 = document.getElementById("1");
//刪除
ul1.removeChild(li3);
}
</script>
replaceChild()替換節點
引數：第一個新節點，第二個舊節點
1、獲取舊節點
2、建立新節點標籤
3、建立文字
4、將文字新增到標籤下
5、獲取父標籤
6、執行ul.replaceChild(new,old);
cloneNode複製節點
將ul標籤複製到div中
<ulid="1">
<li id="2">史文華</li>
<li id="3">熊勇</li>
<li id="4">張翼</li>
</ul>
<div id="divv"></div>
<input type="button" id="cope" value="複製"οnclick="cope()">
<script type="text/javascript">
function cope() {
//1獲取ul
var ul31 = document.getElementById("1");
//執行復制方法cloneNode(true)ture複製子節點
var ul666 = ul31.cloneNode(true);
//獲取div
var divv = document.getElementById("divv");
//appendChild
divv.appendChild(ul666);
}
</script>
總結：
獲取節點使用：getElementById(),getElementsByName(),getElementsByTagName()
插入節點：insertBefore(要插入的節點，目標節點),appendChild()結尾新增
刪除節點：removeChild()通過父節點刪除
替換節點：replaceChild():通過父節點
innerHTML屬性
不是dom的組成部分，但是大多數瀏覽器都支援的屬性
第一個作用：獲取文字內容
Var span = document.getElementById(“sid”);alert(span1.innerHTML);
第二個作用：設定文字內容（也可以是HTML程式碼）
Var divv11= document.getElementById(“divv11”);divv11.innerHTML=”<h1>qq</h1>”
案例2 動態顯示時間
</div>
<scripttype="text/javascript">
function getD1(){
var date = new Date();//獲取當前時間
var d1 = date.toLocaleString();//格式化時間
var divv =document.getElementById("time");//獲取Div
divv.innerHTML=d1;//設定divv的時間
}
//使用定時器
setInterval("getD1();",1000);
</script>
案例三：全選練習
<body>
<input type="checkbox"id="ch1" οnclick="selAllNo()" />全選/全不選
<input type="checkbox"name="love" />籃球
<input type="checkbox"name="love" />足球
<input type="checkbox"name="love" />羽毛球
<input type="checkbox"name="love" />棒球
<input type="button" value="全選" οnclick="selAll();" />
<input type="button" value="全不選" οnclick="selNo();" />
<input type="button" value="反選" οnclick="selOther();" />
<script type="text/javascript">
function selAll() {//全選
var loves =document.getElementsByName("love");//得到陣列
for (var i =0; i < loves.length; i++) {
var lovess =loves[i];
lovess.checked = true;}}
function selNo() {//全不選
var loves =document.getElementsByName("love");
for (var i =0; i < loves.length; i++) {
var loves1 =loves[i];
loves1.checked = false;}}
function selOther() {//反選
var loves =document.getElementsByName("love");
for (var i =0; i < loves.length; i++) {
var loves3 =loves[i];
if(loves3.checked == true) {
loves3.checked= false;
} else {
loves3.checked= true;}}}
function selAllNo() {
var check1 =document.getElementById("ch1");
if (check1.checked== true) {selAll();} else {selNo();}}</script></body>