你的位置:首页 > 软件开发 > Java > JavaScript学习总结【5】、JS DOM

JavaScript学习总结【5】、JS DOM

发布时间:2015-11-23 14:00:19
1、DOM简介。  当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构,即节点树。通过DOM,JS可创建动态的HTML,可以使网页显 ...

1、DOM简介。

  当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构,即节点树。通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式,并对页面中所有事件做出响应。所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作。

2、DOM获取元素。

  JS要想操作HTML元素,那么首先就必须先找到该元素。通常使用以下几种方法完成:

  通过元素设置的id找到HTML元素。

  通过标签名找到HTML元素。

  通过元素设置的名称(name)找到HTML元素。

  所谓的DOM,实际上就是document,获取元素就是操作document。

  (1)、通过id找到元素

  方法:document.getElementById('id');

  网页是由标签将信息组合起来的,id属性值是唯一的,就像身份证一样,通过一个身份证可以找到相对应的人,所以通过该方法,可以获取到与之相对应的标签,而获取的元素在JS中是一个对象,若想对元素进行操作,则需要通过他的属性或方法。

  (2)、通过标签名找到元素

  方法:document.getElementsByTagName('Tagname');

  通过该方法,返回的是带有指定标签名的对象的集合,也就是以数组的形式返回,返回的顺序是他们在文档中的顺序。

  (3)、通过name找到元素

  方法:document.getElementsByName('name');

  该方法与getElementById()方法有点相似,都是通过设置的属性值找到元素,只不过该方法是通过设置的name属性值查找元素。name属性在文档中可能不唯一,所以该方法返回的也是元素的数组,而不是一个元素。

 1 <body> 2 <input name="txt" type="text" value="1"> 3 <input name="txt" type="text" value="2"><br> 4 <input name="txt" type="text" value="3"> 5 <input name="txt" type="text" value="4"><br> 6 <input name="txt" type="text" value="5"> 7 <input name="aaa" type="text" value="6"> 8 <script> 9 //获取所有name值为txt的元素10 var oTxt=document.getElementsByName("txt"); 11 12 //获取元素的个数13 alert(oTxt.length);    //返回:514 15 //获取第二个元素的值16 alert(oTxt[1].value);  //返回:217 </script>18 </body> 

原标题:JavaScript学习总结【5】、JS DOM

关键词:JavaScript

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