你的位置:首页 > Java教程

[Java教程]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>