1.DOM简介

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

2.常用DOM

<!--通过标签id属性访问某一元素-->

var objElement = document.getElementById("button1"); <!--button1为标签的id-->

alert(objElement.tagName);

<!--通过标签访问一组元素(数组)

var objElements = document.getElementsByTagName("input"); <!--input为HTML标签-->

alert(objElements[0].tagName);

<!--通过name属性访问一组元素(数组)

var objElementsN = document.getElementsByName("button"); <!--button为标签的name-->

alert(objElementsN[0].tagName);

<!--从元素数组中取出某个元素的方法-->

var obj = objElementsN[0];

var obj = objElementsN.button1; <!--button1为标签的id-->

var obj = objElementsN.item(0);

<!--通过某个元素来访问其父元素，子元素或同级元素-->

var obj = objElement.parentNode;  <!--父元素，只能有一个-->

var obj = objElement.previousSibling;   <!--同层上一个元素-->

var obj = objElement.nextSibling; <!--同层下一个元素-->

var obj = objElement.childNodes;  <!--子元素数组，子元素可能有多个标签元素-->

var obj = objElement.firstChild;  <!--第一个子元素-->

var obj = objElement.lastChild;   <!--最后一个子元素-->

<!--访问元素内的内容（内容：开始标签和结束之间的字符串；内容为HTML(HTML标签的嵌套)，需要解释；内容为Text，直接显示；-->

objElement.innerHTML="标签修饰的内容为HTML";

objElement.innerText="标签修饰的内容当成文本";

objElement.firstChild.nodeValue:相当于innerText属性

<!--访问元素的属性值，也可以设置-->

alert(objElement.id);   <!--元素名.属性名;这样就可以操作元素的属性值了-->

objElement.setAttribute("属性名",属性值);

<!--增加新的节点-->

var objImg = document.createElement("img");  <!--创建一个新元素-->

objImg.setAttribute("src","a.gif");  <!--为新元素设置相应的属性值-->

objFather.appendChild(objImg);  <!--为objFather元素添加一个子元素-->

element.appendChild();

3.示例代码[html]

<html>

   <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>js测试</title>

   </head>

   <script type="text/javascript">

		<!--通过标签id属性访问某一元素 -->

		function test1(){

		   var objElement = document.getElementById("button1");

		   alert("元素值为："+objElement.value);

		}

		<!--通过标签访问一组元素(数组) -->

		function test2(){

		   var objElements = document.getElementsByTagName("input");

		   alert("第一个标签名为："+objElements[0].tagName);

		   alert("第二个元素值为："+objElements[1].value);

		}

		<!--通过某个元素来访问其父元素 -->

		function test3(){

		   var objElement = document.getElementById("button3");

		   var obj = objElement.parentNode;

		   alert("父元素的标签名："+obj.tagName);

		}

		<!--通过某个元素来访问其同层第一个元素 -->

		function test4(){

		   var objElement = document.getElementById("button4");

		   var obj = objElement.parentNode.firstChild;

		   alert("同层第一个元素:"+obj.value);

		}

		<!--标签修饰的内容当成文本 -->

		function test5(){

		   var objElements = document.getElementsByTagName("p");

		   objElements[0].innerText="CN:很高兴见到你！";

		   objElements[1].innerHTML='<a href="http://blog.csdn.net/nuptboyzhb/">NUPTboyZHB<a>';

		}

		<!--修改属性值 -->

		function test6(){

		   var objElement = document.getElementById("button6");

		   objElement.setAttribute("value","已修改");

		}

		<!--增加新的节点 -->

		function test7(){

		   var objFather = document.getElementById("button7").parentNode;

           var objImgNewElement = document.createElement("img");

           objImgNewElement.setAttribute("src","http://avatar.csdn.net/C/2/1/1_nuptboyzhb.jpg");

           objFather.appendChild(objImgNewElement);

		}

  </script>

   <body>

    <p>Nice to meet you!</p>

	<p>Hello world!</p>

	<div>

	  <input id="button1" type="button" value="getElementById" onclick="test1()">

	  <input id="button2" type="button" value="getElementByTagName" onclick="test2()">

	  <input id="button3" type="button" value="Get-ParentNode" onclick="test3()">

	  <input id="button4" type="button" value="Get-firstChild" onclick="test4()">

	  <input id="button5" type="button" value="innerText-HTML" onclick="test5()">

	  <input id="button6" type="button" value="setAttribute" onclick="test6()">

	  <input id="button7" type="button" value="addElement" onclick="test7()">

	</div>

   </body>

</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. Qt5程序开机自启动(windows)

    简介 window下开机启动最简单的实现方式就是在注册表中添加启动项目 添加位置有两个 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVer ...

  2. Android常用动画Animation的使用

    Andriod中有几种常用的Animation AlphaAnimation  淡入淡出效果 RotateAnimation 旋转效果 ScaleAnimation 缩放动画 TranslaAnima ...

  3. Page的生命周期及相关事件苛

    (1)请求页面:页请求发生在页生命周期开始之前. (2)开始:在开始阶段,将设置页属性,如Request和Response.在此阶段,页还将确定请求是回发请求还是新请求,并设置IsPostBack属性 ...

  4. HDU2191：悼念512汶川大地震遇难同胞——珍惜现在，感恩生活(多重背包)

    Problem Description 急!灾区的食物依然短缺! 为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元,而市场有m种大米,每种大米都是袋装产品 ...

  5. QVector 和vector的比较（QVector默认使用隐式共享，而且有更多的函数提供）

    QVector和vector的比较: Qvector默认使用隐式共享,可以用setSharable改变其隐式共享.使用non-const操作和函数将引起深拷贝.at()比operator[](),快, ...

  6. Ruby on Rails: 使用devise+cancan+rolify建立完整的权限管理系

    devise.cancan和rolify这三个组件结合,可以建立完整而强大的用户权限模型. devise介绍,负责用户注册.登录.退出.找回密码等操作.细节参考devise on github can ...

  7. cocos2d-x游戏开发系列教程-坦克大战游戏之敌方坦克AI的编写

    在上篇我们完成了子弹和地图碰撞的检测,在这篇我们将完成敌方坦克AI的编写. 具体思路是屏幕中保持有四个敌方坦克,然后坦克随机方向运动,并且子弹消失后1秒发射一次 1.我们新建一个敌方坦克的AI类来控制 ...

  8. qrcode 4.0.4 : Python Package Index

    qrcode 4.0.4 : Python Package Index qrcode 4.0.4 Download qrcode-4.0.4.tar.gz QR Code image generato ...

  9. 最小生成树(MST)[简述][模板]

    Prim(添点法) 1. 任选一点(一般选1), 作为切入点,设其与最小生成树的距离为0(实际上就是选一个点,将此树实体化),. 2. 在所有未选择的点中选出与最小生成树距离最短的, 累计其距离, 并 ...

  10. SSH框架之Hibernate（1）——映射关系

    ORM的实现思想就是将关系数据库中表的数据映射成对象.以对象的形式展现,这样开发者就能够把对数据库的操作转化为对这些对象的操作.Hibernate正是实现了这样的思想,达到了方便开发者以面向对象的思想 ...