在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识。一、JavaScript DOM 操作1.1、DOM概念 DOM :Document Object Model(文本对象模型)。 D : 文档(html或 O : 对象(文档对象) ...
在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
(#换成@)。