你的位置:首页 > 软件开发 > Java > javascript DOM 操作

javascript DOM 操作

发布时间:2016-05-25 01:00:18
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识。一、JavaScript DOM 操作1.1、DOM概念  DOM :Document Object Model(文本对象模型)。  D : 文档(html或  O : 对象(文档对象)  ...

javascript DOM 操作

 在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识。

一、JavaScript DOM 操作

1.1、DOM概念

  DOM :Document Object Model(文本对象模型)。

  D : 文档(html或

  O : 对象(文档对象)

  M : 模型

1.2、DOM结构

  DOM将文档以家谱树的形式来表现。

 

  下面是一个简单的html文档,我们可以看出该文档的DOM结构如下

  

 

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6   </head> 7   <body> 8     <p title="hello">该实例使用 addEventListener() 方法来向按钮添加点击事件。</p> 9       10     11     <ul>12       <li>1</li>13       <li>2</li>14       <li>3</a>15     </ul>16     17   </body>18 </html>19 
 

二、JavaScript DOM 常用操作

  2.1、获取元素节点   

   1). document.getElementById: 根据 id 属性获取对应的单个节点

   2). document.getElementsByTagName: 根据标签名获取指定节点名字的数组,通过数组对象 length 属性可以获取数组的长度

   3). document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组

 

   案例:

    

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title></title> 6     <script> 7       //文档加载完后执行 onload 方法 8       window.onload = function(){ 9         // 根据 id 属性获取对应的单个节点10         var inputText = document.getElementById("txt");11         alert(inputText.value);12         13         //根据标签名获取指定节点名字的数组,通过数组对象 length 属性可以获取数组的长度14         var cityNodes = document.getElementsByTagName("li");15         alert(cityNodes.length);16         17         //根据节点的 name 属性获取符合条件的节点数组18         var dirNodes = document.getElementsByName("direction");19         alert(dirNodes.length);20       }21     </script>22   </head>23   <body>24     25     <input type="text" id="txt" value="test getElementById"/>26     27     <br /><br /><br />28     <ul id="city">29       <li>北京</li>30       <li>华盛顿</li>31       <li>伦敦</li>32       <li>巴黎</li>33     </ul>34     35     <br /><br /><br />36     37     <ul>38       <li name="direction">east</li>39       <li name="direction">south</li>40       <li name="direction">west</li>41       <li name="direction">north</li>42     </ul>43     44     45   </body>46 </html>

原标题:javascript DOM 操作

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。