Javascript進階篇——(DOM—認識DOM、ByName、ByTagName)—筆記整理


認識DOM
文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標准方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構(節點樹)。


將HTML代碼分解為DOM節點層次圖:


HTML文檔可以說由節點構成的集合,DOM節點有:
  1. 元素節點:上圖中<html>、<body>、<p>等都是元素節點,即標簽。
  2. 文本節點:向用戶展示的內容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
  3. 屬性節點:元素屬性,如<a>標簽的鏈接屬性href="http://www.imooc.com"。

節點屬性:


遍歷節點樹:

以上圖ul為例,它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。

DOM操作:


前兩個是document方法。

例:通過getElementById獲取id為con的h2標簽。修改h2標簽的樣式,將顏色設為紅色。修改h2標簽的樣式,將背景顏色設為灰色(#CCC)。通過style.display實現隱藏。

 1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>style樣式</title>
6 </head>
7 <body>
8 <h2 id="con">I love JavaScript</H2>
9 <p> JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
10 <script type="text/javascript">
11 var tite = document.getElementById("con");
12 tite.style.color = "red";
13 tite.style.backgroundColor = "#ccc";
14 tite.style.display = "none";
15 </script>
16 </body>
17 </html>

 

 

 

getElementsByName()方法
返回帶有指定名稱的節點對象的集合

語法:

document.getElementsByName(name)

與getElementById() 方法不同的是,通過元素的 name 屬性查詢元素而不是通過 id 屬性
注意:
  1. 因為文檔中的 name 屬性可能不唯一,所有 getElementsByName() 方法返回的是元素的數組,而不是一個元素。
  2. 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,從0開始。

例:

 1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script type="text/javascript">
5 function getnum(){
6 var mynode = document.getElementsByName("myt");
7 alert(mynode.length);
8 }
9 </script>
10 </head>
11 <body>
12 <input name="myt" type="text" value="1">
13 <input name="myt" type="text" value="2">
14 <input name="myt" type="text" value="3">
15 <input name="myt" type="text" value="4">
16 <input name="myt" type="text" value="5">
17 <input name="myt" type="text" value="6">
18 <br />
19 <input type="button" onclick="getnum()" value="看看有幾項?" />
20 </body>
21 </html>

運行結果:

 

 

 

getElementsByTagName()方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。

語法:

getElementsByTagName(Tagname)

1. Tagname是標簽的名稱,如p、a、img等標簽名。
2. 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,所以從0開始。

通過getElementsByTagName()獲取節點:

使用三種獲取節點的方法:

 1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>JavaScript</title>
6 </head>
7 <body>
8 <form name="Input">
9 <table align="center" width="500px" height="50%" border="1">
10 <tr>
11 <td align="center" width="100px">
12 學號:
13 </td>
14 <td align="center" width="300px">
15 <input type="text" id=userid name="user" onblur="validate();">
16 <div id=usermsg></div>
17 </td>
18 </tr>
19 <tr>
20 <td align="center" width="100px">
21 姓名:
22 </td>
23 <td align="center">
24 <input type="text" name="name">
25 </td>
26 </tr>
27 <tr>
28 <td align="center" width="%45">
29 性別:
30 </td>
31 <td align="center">
32 <input type="radio" name="sex" value="男">
33
34 <input type="radio" name="sex" value="女">
35
36 </td>
37 </tr>
38 <tr>
39 <td align="center" width="30%">
40 年齡:
41 </td>
42 <td align="center" width="300px">
43 <input type="text" name="age">
44 </td>
45 </tr>
46 <tr>
47 <td align="center" width="100px">
48 地址:
49 </td>
50 <td align="center" width="300px">
51 <input type="text" name="addr">
52 </td>
53 </tr>
54 </table>
55 </form>
56 <h1 id="myHead" onclick="getValue()">
57 看看三種獲取節點的方法?
58 </h1>
59 <p>
60 點擊標題彈出它的值。
61 </p>
62 <input type="button" onclick="getElements()"value="看看name為sex的節點有幾個?" />
63 <br/>
64 <input type="button" onclick="getTagElements()"value="看看標簽名為input的節點有幾個?" />
65 <script type="text/javascript">
66 function getValue(){
67 var myH = document.getElementById("myHead");
68 alert(myH.innerHTML)
69 }
70
71 function getElements(){
72 var myS = document.getElementsByName("sex");
73 alert(myS.length);
74 }
75
76 function getTagElements(){
77 var myI = document.getElementsByTagName("input")
78 alert(myI.length);
79 }
80 </script>
81 </body>
82 </html>

 

 

 

 

區別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明,人有能標識身份的身份證,有姓名,有類別(大人、小孩、老人)等。
  1. ID 是一個人的身份證號碼,是唯一的。所以通過getElementById獲取的是指定的一個人。
  2. Name 是他的名字,可以重復。所以通過getElementsByName獲取名字相同的人集合。
  3. TagName可看似某類,getElementsByTagName獲取相同類的人集合。如獲取小孩這類人,getElementsByTagName("小孩")。

把上面的例子轉換到HTML中如下:

<input type="checkbox" name="hobby" id="hobby1"> 音樂

input標簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。

方法總結如下:(方法區分大小寫)



通過下面的例子(6個name="hobby"的復選項,兩個按鈕)來區分三種方法的不同:

1 <input type="checkbox" name="hobby" id="hobby1">  音樂
2 <input type="checkbox" name="hobby" id="hobby2"> 登山
3 <input type="checkbox" name="hobby" id="hobby3"> 游泳
4 <input type="checkbox" name="hobby" id="hobby4"> 閱讀
5 <input type="checkbox" name="hobby" id="hobby5"> 打球
6 <input type="checkbox" name="hobby" id="hobby6"> 跑步
7 <input type="button" value = "全選" id="button1">
8 <input type="button" value = "全不選" id="button1">
1 document.getElementsByTagName("input"); //結果為獲取所有標簽為input的元素,共8個。
2
3 document.getElementsByName("hobby"); //結果為獲取屬性name="hobby"的元素,共6個。
4
5 document.getElementById("hobby6"); //結果為獲取屬性id="hobby6"的元素,只有一個,"跑步"這個復選項。

實現當點擊"全選"按鈕時,將選中所有的復選項。實現當點擊"全不選"按鈕時,將取消所有選中的復選項。在文本框中輸入輸入1-6數值,當點擊"確定"按鈕時,根據輸入的數值,通過id選中相應的復選項:

 1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>無標題文檔</title>
6 </head>
7 <body>
8 <form>
9 請選擇你愛好:<br>
10 <input type="checkbox" name="hobby" id="hobby1"> 音樂
11 <input type="checkbox" name="hobby" id="hobby2"> 登山
12 <input type="checkbox" name="hobby" id="hobby3"> 游泳
13 <input type="checkbox" name="hobby" id="hobby4"> 閱讀
14 <input type="checkbox" name="hobby" id="hobby5"> 打球
15 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
16 <input type="button" value = "全選" onclick = "checkall();">
17 <input type="button" value = "全不選" onclick = "clearall();">
18 <p>請輸入您要選擇愛好的序號,序號為1-6:</p>
19 <input id="wb" name="wb" type="text" >
20 <input name="ok" type="button" value="確定" onclick = "checkone();">
21 </form>
22
23 <script type="text/javascript">
24 function checkall(){
25 var hobby = document.getElementsByTagName("input");
26
27 for(i = 0; i < hobby.length; i++){
28 if(hobby[i].type == "checkbox"){
29 hobby[i].checked = true;
30 }
31 }
32 }
33 function clearall(){
34 var hobby = document.getElementsByName("hobby");
35
36 for(i = 0; i < hobby.length; i++){
37 if(hobby[i].type == "checkbox"){
38 hobby[i].checked = false;
39 }
40 }
41 }
42
43 function checkone(){
44 var j=document.getElementById("wb").value;
45
46 var hobby = document.getElementById("hobby" + j);
47
48 hobby.checked = true;
49 }
50 </script>
51 </body>
52 </html>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com