DHTML对象模型方法-innerHTML

原创 2007年10月15日 14:17:00
<li>*     DHTML对象模型方法为JavaScript提供了得到网页对象的另外方法,使用时可以不必具体了解文档对象模型的结构层次,而直接得到网页中的所需元素对象。这样,JavaScript就可以方便地改变网页内容及网页的表现方式。

<li>*     该对象模型方法具有如下特点。在HTML中,网页中的每一对标记就是一个元素对象,例如,&lt;p&gt;&lt;/p&gt;、&lt; div&gt;&lt;/div&gt;、&lt;table&gt;&lt;/table&gt;等。为得到网页中的对象,可先将每一个标记赋值为一个惟一的id,例如,&lt;p id="block1"&gt;&lt;/p&gt;、&lt;div id="titleBar"&gt;&lt;/div&gt;等。

<li>*     通过对对象id的引用,就可以使用“document.getElementById(元素标识)”方法得到所需的方法。

<li>*     innerHTML属性允许对HTML元素内容的简单读取和修改。在IE中,还支持innerText、outerText、outerHTML属性。

<li>*     innerText与innerHTML类似,只是用innerText设置的内容都被作为纯文本来处理。因此,不会生成相应的HTML元素。outerText与outerHTML属性,分别和相对的Inner属性相似,只是这两个属性还对元素本身进行修改。

<html>

<head>

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

      <title>DHTML对象模型方法-innerHTML</title>

      <script language="JavaScript">

      <!--

            function display()          //函数:显示内容

            {

                  var title = document.getElementById('titleBar').innerHTML;

                  alert(title);

            }

            function change()          //函数:修改内容

            {

                document.getElementById('titleBar').innerHTML =

                                  '这是<span style="border:1px solid">改变后</span>的文本';

            }

      //-->

      </script>

</head>

<body bgcolor="#ffc0c0">

       <h2>显示和修改网页中文字的内容</h2><hr>

       <h1 id="titleBar">这是一行测试文本</h1><hr>

       <div style="margin-top:10px;">

             <!--分别通过onclick调用display()函数和change()函数,用以显示内容和修改内容-->

             <input type="button" value="显示"  onclick="display();">

             <input type="button" value="改变" onclick="change()">

      </div>

</body>

</html>

JavaScript第五章知识点总结——常用DHTML对象 Window对象 对话框 定时器

JavaScript第五章知识点总结——常用DHTML对象 Window对象 对话框 定时器 知识点预览 DHTML概述 Window对象 对话框 定时器     ...
  • yasiyuan
  • yasiyuan
  • 2014年10月11日 15:58
  • 307

用innerHTML创建元素

用.innerHTML偷懒创建元素
  • crazy_littlepig
  • crazy_littlepig
  • 2016年05月11日 18:23
  • 683

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

今天面试又看到这样的题了,总结下供大家参考: 概念性问题 innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式...
  • u014678107
  • u014678107
  • 2014年04月12日 16:46
  • 329

xhtml,xml,html,和dhtml的关系和区别

XHTML产生的原因,一方面是为了和未来的XML大规模的应用接轨,一方面还要兼容目前的数以万计的用HTML编写的网页以及他们的设计者,开发者相兼容,于是便出现了这个东西。以HTML编写的网页中,标记使...
  • a519781181
  • a519781181
  • 2016年07月29日 10:47
  • 1660

JavaScript Window浏览器对象模型方法与属性汇总

Window 对象 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全...
  • u012172536
  • u012172536
  • 2016年06月26日 00:53
  • 307

javascript中的innerHTML是什么意思,怎么个用法?

nnerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容; 如:这是内容 ,我们可以通过 document.getElementById('aa').innerHTML 来获取id为...
  • qq_27918787
  • qq_27918787
  • 2016年09月22日 21:42
  • 21575

javascript(七)window其他子对象(DHTML模型)

7.1screen对象 1)包含有关客户端显示屏幕的信息(封装了屏幕相关的信息,供读取)。 2)常用属性:width/height、availWidth/availHeight 例如:var...
  • wzq6578702
  • wzq6578702
  • 2015年05月17日 22:13
  • 280

javascript(七)window其他子对象(DHTML模型)

7.1对象 1)包含有关客户端显示屏幕的信息(封装了屏幕相关的信息,供读取)。 2)常用属性:width/height、availWidth/availHeight 例如:var n =screen...
  • wzq6578702
  • wzq6578702
  • 2015年05月17日 17:06
  • 323

面向过程、面向对象 的模型和方法

“面向过程”(Procedure Oriented)是一种以“过程”为中心的编程思想,所谓“面向过程”的编程就是以“什么事情发生”或“什么流程进行”为目标或单元进行编程,而面向对象的则是以“谁在受影...
  • conquer0715
  • conquer0715
  • 2017年02月14日 12:04
  • 3381

对象建模方法与技术学习笔记(一)

面向对象为什么要面向对象面向对象的思想认为,在需求中人和物是相对稳定的,他们是事物的本质;而需求中的功能和行为是以人和物为主体的特征;人和物是相对稳定的,而功能和行为是易变的。因此,反映需求分析与软件...
  • u013745854
  • u013745854
  • 2015年08月01日 16:45
  • 1347
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DHTML对象模型方法-innerHTML
举报原因:
原因补充:

(最多只允许输入30个字)