`
asgab
  • 浏览: 41895 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

页面内容动态改变(dhtml)

    博客分类:
  • jsp
阅读更多

IE的DHTML对象提供了四个可读写的属性来动态操作页面元素的内容:innerText, outerText,innerHTML, outerHTML.

  需注意两点:

  1. 其中innerText,outerText属性的值是作为普通文本呈现的,即使它含有HTML标签也如实反应出来;而innerHTML, outerHTML呈现的是经HTML引擎解析后文本,它可以反应属性中HTML标签的表现效果。

  2. 对对象的outerText,outerHTML属性赋值(即写操作)会删除该对象。

  以上四个属性的赋值操作只是替换原对象的文本内容,想要在页面中指定元素相关位置新增文本内容,需采用insertAdjacentHTML和insertAdjacentText方法。形式如下:

  object.insertAdjacentText(sWhere, sText)
  object.insertAdjacentHTML(sWhere, sText)

  其中 sWhere 表示插入的文本相对于html标签的位置,有如下四个预设值:

  beforeBegin,afterBegin,beforeEnd,afterEnd

  使用中需注意如下几点:

  1. 这两种方法必须在整个文档装载完成之后才能使用,否则将出错。

  2. InsertAdjacentText只能插入普通文本,InsertAdjacentHTML插入html格式的文本

  3. 用InsertAdjacentHTML插入脚本,必须在script元素中使用defer属性,否则脚本执行将出现运行期错误

  4.InsertAdjacentHTML插入html元素后,all以及其他可能的元素集合将自动更新以反应动态变化。如页面后续元素的sourceIndex 属性将改变。

  5.当赋予InsertHTML/outerHTML属性无效的HTML标签,该方法可能出现运行时错。如以下代码将出错:

  <BODY>

   <p id=pdiv></p>

   <SCRIPT LANGUAGE="javascript">
  
    pdiv.innerHTML = "<p>hello</p>"

   </SCRIPT>

  </BODY>
 
  此外,页面内容动态操作还需要注意如下一些细节:

  1.只有文档BODY内显示的内容能被以上属性和方法动态改变,BODY对象的内容能被动态操作,但BODY对象本身无法被替换。

  2.以上属性和方式不能操作空标签(没有内容的html标签),如input,img。

  3.对于table对象而言,只有td(innerHTML/innerText)和table(outerHMTL/outerText)对象可以用某些属性来替换或插入内容;而其他table对象,如tr、tbody不能用这些属性来改变内容。

分享到:
评论

相关推荐

    DHTML.api手册

     DHTML 是一种用来创建动态站点的技术组合物。  对大多数人来说,DHTML 意味着 HTML 4.0、样式表以及 JavaScript 的结合物。  W3C 曾讲过:“动态HTML是一个被某些厂商用来描述可使文档动态性更强的HTML、样式...

    ASP动态网页教程下载

    DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理,而在浏览器中直接动态地更新网页的内容、排版样式、动画。比如,当鼠标移至文章段落中,段落能够变成蓝色,或者当你点击一个超链后会自动生成一个下拉式的...

    编译的 HTML 帮助文件 (.chm) DHTML手册

    ondocumentready 事件将通知 DHTML 行为包含该行为的主 Web 页面的 document 对象可用。只要 ondocumentready 被触发,行为就可以开始处理主 document 属性。 行为中的脚本可以在 HTC 或主文档中引用 document 对象...

    PHP动态网站开发插件

    动态改变页面的背景颜色。 Fluid Browser Window.mxp Download 点击下载 设置浏览器窗口由小到大动态打开。 Pagetime.mxp Download 点击下载 设置在什么时间载入什么页面。 Just-So Picture Window.mxp Download ...

    SEO编程PHP中文版

    5.1.2 内容盗窃导致的重复内容 5.2 排除重复内容 5.2.1 使用Robots meta标签 5.2.2 robots.txt模式排除 5.3 常见重复页面的解决方案 5.3.1 打印友好的页面 5.3.2 导航链接和眉毛导航 5.3.3 相似页面 5.3.4 ...

    搜索引擎优化高级编程(PHP版)

    5.1.2 内容盗窃导致的重复内容 5.2 排除重复内容 5.2.1 使用Robots meta标签 5.2.2 robots.txt模式排除 5.3 常见重复页面的解决方案 5.3.1 打印友好的页面 5.3.2 导航链接和眉毛导航 5.3.3 相似页面 5.3.4 具有重复...

    dreamweaver上PHP网站开发相关插件

    动态改变页面的背景颜色。 Fluid Browser Window.mxp 设置浏览器窗口由小到大动态打开。 Pagetime.mxp 设置在什么时间载入什么页面。 Just-So Picture Window.mxp 设置一幅图片在新窗口中打开,点击任何部位就...

    鼎太播客 v5.0.rar

    V5是鼎太播客的一次革命, 采用了全新框架,全新的前台展现方式,融入CMS(内容管理系统)理念,为广大客户打造的一款极速的视频服务产品。 鼎太播客V5 的最新特色: 1) 极速前台 - HTML的魅力 以往的Web产品绝大...

    JavaScript应用177例

    29.2.htm 显示和修改文字内容(DHTML) 29.3.htm 处理网页表格内容(DHTML) 29.4.htm 显示和修改网页内容(W3C) 29.5.htm 处理网页表格内容(W3C) 29.6.htm 综合...

    什么是DOM(Document Object Model)文档对象模型

    浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关、语言无关的API,程序或脚本通过其动态访问、修改文档的内容、样式、...

    Ajax改造,第3部分:用jQuery、Ajax选项卡和照片carousel改进现有的站点

    火龙果软件工程技术中心 本文内容包括:关于本文回顾第1部分和第2部分第3部分的目标两种产品细节页面:单页面和多页面改造单页面版本改造多页面版本结束语下载参考资料Ajax技术已经改变了大型商用Web应用程序的面貌...

    精通javascript

    • 13.3.htm DHTML对象模型方法显示和修改网页文字内容 • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象...

    Cookies高级窃取法之Ajax

    Ajax(Asynchronous Javascript and XML)去除了通过DHTML特效带来的烦琐的页面更新和链接。并将其变成十分有趣的桌面式应用程序。Ajax不仅是一项技术。而且更不是单纯的技术的集合,当这些技术一起使用时。它提供了...

    精通JavaScript

    • 13.3.htm DHTML对象模型方法显示和修改网页文字内容 • 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象...

    ajax原理总结附简单实例及其优点

    详情请移步Ajax: A New Approach to Web Applications 【原理】 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面内的元素,从而达到改变页面内容的...

    abraham-lincoln-assassination-trivia

    这个网络项目是一个教育工具,向学习者展示 JavaScript 如何动态改变 HTML 页面 (DHTML)。 由于该项目是在 2015 年 4 月(亚伯拉罕·林肯逝世 150 周年)期间开发的,因此围绕他被暗杀的事实被用作此示例的驱动内容...

    JS学习资料

    在CSS彻底改变了Web页面布局的方式之后,万维网联盟跨浏览器的DOM标准的制定,使JavaScript终于突破瓶颈,成了大大改善网页用户体验的利器。 本书在简洁明快地讲述JavaScript和DOM的基本知识之后,过几个实例演示了...

    JavaScript CSS修改学习第三章 修改样式表

    在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表。在这里查看W3C DOM-CSS的兼容性列表。定义 一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里...

Global site tag (gtag.js) - Google Analytics