1.DOM简介

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

2.常用DOM

  1. <!--通过标签id属性访问某一元素-->
  2. var objElement = document.getElementById("button1"); <!--button1为标签的id-->
  3. alert(objElement.tagName);
  4. <!--通过标签访问一组元素(数组)
  5. var objElements = document.getElementsByTagName("input"); <!--input为HTML标签-->
  6. alert(objElements[0].tagName);
  7. <!--通过name属性访问一组元素(数组)
  8. var objElementsN = document.getElementsByName("button"); <!--button为标签的name-->
  9. alert(objElementsN[0].tagName);
  10.  
  11. <!--从元素数组中取出某个元素的方法-->
  12. var obj = objElementsN[0];
  13. var obj = objElementsN.button1; <!--button1为标签的id-->
  14. var obj = objElementsN.item(0);
  15.  
  16. <!--通过某个元素来访问其父元素，子元素或同级元素-->
  17. var obj = objElement.parentNode;  <!--父元素，只能有一个-->
  18. var obj = objElement.previousSibling;   <!--同层上一个元素-->
  19. var obj = objElement.nextSibling; <!--同层下一个元素-->
  20. var obj = objElement.childNodes;  <!--子元素数组，子元素可能有多个标签元素-->
  21. var obj = objElement.firstChild;  <!--第一个子元素-->
  22. var obj = objElement.lastChild;   <!--最后一个子元素-->
  23.  
  24. <!--访问元素内的内容（内容：开始标签和结束之间的字符串；内容为HTML(HTML标签的嵌套)，需要解释；内容为Text，直接显示；-->
  25. objElement.innerHTML="标签修饰的内容为HTML";
  26. objElement.innerText="标签修饰的内容当成文本";
  27. objElement.firstChild.nodeValue:相当于innerText属性
  28.  
  29. <!--访问元素的属性值，也可以设置-->
  30. alert(objElement.id);   <!--元素名.属性名;这样就可以操作元素的属性值了-->
  31. objElement.setAttribute("属性名",属性值);
  32.  
  33. <!--增加新的节点-->
  34. var objImg = document.createElement("img");  <!--创建一个新元素-->
  35. objImg.setAttribute("src","a.gif");  <!--为新元素设置相应的属性值-->
  36. objFather.appendChild(objImg);  <!--为objFather元素添加一个子元素-->
  37. element.appendChild();

3.示例代码[html]

  1. <html>
  2.    <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.     <title>js测试</title>
  5.    </head>
  6.    <script type="text/javascript">
  7. 		<!--通过标签id属性访问某一元素 -->
  8. 		function test1(){
  9. 		   var objElement = document.getElementById("button1");
  10. 		   alert("元素值为："+objElement.value);
  11. 		}
  12. 		<!--通过标签访问一组元素(数组) -->
  13. 		function test2(){
  14. 		   var objElements = document.getElementsByTagName("input");
  15. 		   alert("第一个标签名为："+objElements[0].tagName);
  16. 		   alert("第二个元素值为："+objElements[1].value);
  17. 		}
  18. 		<!--通过某个元素来访问其父元素 -->
  19. 		function test3(){
  20. 		   var objElement = document.getElementById("button3");
  21. 		   var obj = objElement.parentNode;
  22. 		   alert("父元素的标签名："+obj.tagName);
  23. 		}
  24. 		<!--通过某个元素来访问其同层第一个元素 -->
  25. 		function test4(){
  26. 		   var objElement = document.getElementById("button4");
  27. 		   var obj = objElement.parentNode.firstChild;
  28. 		   alert("同层第一个元素:"+obj.value);
  29. 		}
  30. 		<!--标签修饰的内容当成文本 -->
  31. 		function test5(){
  32. 		   var objElements = document.getElementsByTagName("p");
  33. 		   objElements[0].innerText="CN:很高兴见到你！";
  34. 		   objElements[1].innerHTML='<a href="http://blog.csdn.net/nuptboyzhb/">NUPTboyZHB<a>';
  35. 		}
  36. 		<!--修改属性值 -->
  37. 		function test6(){
  38. 		   var objElement = document.getElementById("button6");
  39. 		   objElement.setAttribute("value","已修改");
  40. 		}
  41. 		<!--增加新的节点 -->
  42. 		function test7(){
  43. 		   var objFather = document.getElementById("button7").parentNode;
  44.            var objImgNewElement = document.createElement("img");
  45.            objImgNewElement.setAttribute("src","http://avatar.csdn.net/C/2/1/1_nuptboyzhb.jpg");
  46.            objFather.appendChild(objImgNewElement);
  47. 		}
  48.   </script>
  49.    <body>
  50.     <p>Nice to meet you!</p>
  51. 	<p>Hello world!</p>
  52. 	<div>
  53. 	  <input id="button1" type="button" value="getElementById" onclick="test1()">
  54. 	  <input id="button2" type="button" value="getElementByTagName" onclick="test2()">
  55. 	  <input id="button3" type="button" value="Get-ParentNode" onclick="test3()">
  56. 	  <input id="button4" type="button" value="Get-firstChild" onclick="test4()">
  57. 	  <input id="button5" type="button" value="innerText-HTML" onclick="test5()">
  58. 	  <input id="button6" type="button" value="setAttribute" onclick="test6()">
  59. 	  <input id="button7" type="button" value="addElement" onclick="test7()">
  60. 	</div>
  61.    </body>
  62. </html>
未经允许，不得用于商业目的

js与DOM初步：访问html元素的更多相关文章

  1. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  2. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  3. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  4. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  5. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  6. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  7. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  8. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  9. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

随机推荐

  1. 一个RPC的demo

    从下面的例子中可以看到,Consumer(client)的代码中引用了Provider部分的class,本例中是 com.provider.EchoServiceImpl和com.provider.E ...

  2. [置顶] 图书推荐：SQL Server 2012 T-SQL基础 Itzik Ben-Gan

    经过近三个月的不懈努力,终于翻译完毕了.图书虽然是基础知识,但是,即使你已经使用T-SQL几年,很多地方还是能够弥补你的知识空白.大师级的人物写基础知识,或许你想知道这基础中还有哪些深奥,敬请期待吧. ...

  3. JDK1.6官方下载

    JDK1.6官方下载_JDK6官方下载地址:http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin- ...

  4. GridView控件-01-[简单的数据显示]

    GridView绑定数据分为两种,一种是多值绑定,另一种是字段绑定. 多值绑定(直接绑定到数据源就行,不需要使用字段): 前台代码: <asp:GridView ID="GridVie ...

  5. POJ1700（过河问题）

    #include<iostream> #include<algorithm> using namespace std; ]; int main() { int t,i; cin ...

  6. Linux下安装yum工具

    Linux下安装yum工具 http://blog.csdn.net/caoshichaocaoshichao/article/details/13171919

  7. Smarty模板Windows下写代码 放到CentOS6.5无法正确解析

    如题:报错: Unable to load template file 'System/header.htm' in '/var/www/website/cms/Template/Default/We ...

  8. JAVA刚碰见的问题( java.lang.SecurityException: The jurisdiction policy files are not signed by a trusted signer)

    原文:刚碰见的问题 1.  failed to load the jni shared library jre bin server jvm.dll 解决:这个主要是eclipse的版本和安装的jdk ...

  9. 重探 DFT

    感觉上次学习DFT简直是乱来了.不知道误导了多少人,这里深感抱歉. 这次我再看了看<算法导论>,觉得收获很大,终于粗略的知道DFT的原理了! 如何将两个多项式相乘 对于一个n次多项式,\( ...

  10. Atitit.Gui控件and面板----web server区----- web服务器监控面板and控制台条目

    Atitit.Gui控件and面板----web server区----- web服务器监控面板and控制台条目 1. Resin4.0.22 1 2. 查看http连接数::Summary>& ...