php 改变页面元素,动态更改网页HTML元素(对象)内容_经验交流
动态HTML的出现为用户提供了一种基于传统标准HTML来创建交互式页面的机制。本文主要针对IE 5.0谈谈如何通过其提供的HTML文档对象(DOM)模型使用脚本添加、删除、修改页面中的HTML元素(对象)及元素(对象)内容。
动态更改网页HTML元素(对象)内容
HTML块级元素(对象)提供的4个可读写属性innerHTML、innerText、 outerHTML、outerText来更改元素(对象)内容(如表1所示)。
当设置innerHTML属性时,给定字符串完全替换现有的元素(对象)内容,如果给定字符串中含有HTML格式标签,那么该字符串就会进行解析并格式化。当用innerText属性设置时,给定字符串也完全替换现有元素(对象)文本内容,但与innerHTML不同的是HTML格式标签是当做文本直接显示在页面中。若用outerHTML和outerTexe属性设置时,则完全替换元素(对象)。具体操作示例请参见PC World China网站的相关内容。
修改网页HTML元素
IE 5.0中文档对象模型(DOM)提供的修改元素(节点)的方法如表2所示。
在网页中添加新元素分为2个步骤,先创建新元素(对象),然后再将新创建的元素(对象)插入到网页中。在插入到网页之前,允许对该元素(对象)有关属性进行设置,但不能通过元素(对象)ID来引用。也可以使用document.createElement创建新元素,该方法所带参数为用于元素的合法HTML格式标签字符串(包含元素属性)。此外还可以通过元素(对象)cloneNode方法复制该元素(对象)的途径来创建新元素。将新元素插入文档可以通过使用元素(对象)appendChild或insertBefore方法来实现,前者是在元素(对象)子元素集合末尾插入新元素,后者是在元素(对象)子元素集合中某个子元素前插入新元素。
替换、删除元素(对象)需要注意: ①在replaceChild、removeChild中指定的参数必须为该元素(对象)的直接子元素(对象); ②在使用replaceNode替换元素(对象)时,所有与该元素(对象)相关的属性和内容也将被替换;③如果removeNode中指定参数为true,则该元素包含的所有子元素(节点)也将被删除,默认false,即不删除子元素(节点)。具体操作示例请参见PC World China网站的相关内容。
插入网页新元素(对象)、HTML或文本内容 此外,也可用insertAdjacenElement、insertAdjacentHTML和insertAdjacentText等方法分别在元素(对象)的指定位置插入新元素(对象)、Html或文本内容(如表3所示)。
元素(对象)、HTML或文本内容插入的位置由参数指定。BeforeBegin指定插入在元素(对象)之前; afterBegin指定插入在元素(对象)的所有内容之前; beforeEnd指定插入在元素(对象)的所有内容之后; afterEnd指定插入在元素(对象)之后。具体操作示例请参见PC World China网站的相关内容。
网页动态更改综合运用 我们以菜单程序为例演示网页元素及元素内容修改的应用。该程序灵活运用了元素创建、追加、删除等方法及innerHTML属性建立菜单及子菜单(该程序利用了XML技术读取菜单数据,有关XML技术请参考相关手册),该程序略加修改即可成为一个功能非常强大的实用菜单程序。综合运用示例源代码如下。
---- < html >< head >
---- < title >综合运用示例< /title >
---- < script > var activeMenu,menuContainer=null;
---- function menusetup(){
---- var parentMenuItems=MENUXML.selectNodes("//Menulist/menu");
---- var xmlElement=parentMenuItems.nextNode();
---- while (xmlElement!=null){
---- var newElement=document.createElement("span");
---- newElement.innerText =xmlElement.getAttribute("display");
---- newElement.id=xmlElement.getAttribute("value")
---- newElement.type="parentMenu"
---- newElement.style.width=100;
---- newElement.style.backgroundColor="#CCCCCC";
---- menubar.appendChild(newElement);
---- xmlElement = parentMenuItems.nextNode(); }}
---- function menuClick(){
---- EventSource=event.srcElement
---- switch(EventSource.type){
---- case "parentMenu":
---- removeSubMenu();
---- buildSubMenu(EventSource.id);
---- EventSource.setCapture();
---- activeMenu=EventSource;
---- break;
---- default:
---- activeMenu.releaseCapture();
---- removeSubMenu();
---- activeMenu=null;
---- break;} }
---- function buildSubMenu(EventSourceid){
---- menuContainer=document.createElement("div");
---- menuContainer.style.backgroundColor="#DD00DD";
---- menuContainer.style.width=100;
---- eval(EventSourceid).appendChild(menuContainer);
---- var subMenuItems=MENUXML.selectNodes("//menu[@value='"+EventSourceid+"']/Item");
---- var xmlElement=subMenuItems.nextNode();
---- while (xmlElement!=null){
---- var newElement=document.createElement("div");
---- newElement.innerHTML=xmlElement.getAttribute("display");
---- menuContainer.appendChild(newElement);
---- xmlElement=subMenuItems.nextNode(); }}
---- function removeSubMenu(){
---- if(menuContainer!=null)menuContainer.removeNode(true);}
---- < /script >
---- < /head >< body οnlοad=menusetup() >
---- < xml id=MENUXML >< Menulist >
---- < menu display="File" value="File" >
---- < Item display="New" value="New"/ >
---- < Item display="Open" value="Open" / >
---- < Item display="Save" value="Save" / >
---- < /menu >
---- < /Menulist >< /xml >
---- < div id=menubar οnclick=menuClick() >< /div >
---- < /body >< /html >
站长用javascript直接生成元素的代码
-----------start----------------------------
ABCDE
-----------------end------------------
关于动态HTML
又称DHTML,是近年来网络发展进程中最令人激动的创新之一,它提供了一种在网页下载后仍可以通过客户端浏览器来随时更换内容或外观的能力。它不是一项专门技术,而是通过各种技术的综合发展得以实现的概念,这些技术包括DOM(文档对象模型)、Jscript、CSS等。DHTML的核心是DOM模型,正是它使得传统HTML语言所编写的网页具备了动态特性。注意: 不同浏览器所支持的DOM模型是不完全相同的。
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php 改变页面元素,动态更改网页HTML元素(对象)内容_经验交流相关推荐
- 【小程序】当前“页面B”动态更改title,点击返回按钮,更改的标题会显示在“来源页面A”...
最近在做小程序的时候遇到这么一个有趣的问题,就是从A页面跳转到B页面,如果B页面需要在接口加载之后更改title, 并且如果接口请求过慢,还灭有请求完毕时就点击返回按钮回到A页面,这时B页面的请求会继 ...
- python动态页面元素爬取_Python开发爬虫之动态网页抓取篇:爬取博客评论数据——通过浏览器审查元素解析真实网页地址...
由于主流网站都使用JavaScript展示网页内容,和前面简单抓取静态网页不同的是,在使用JavaScript时,很多内容并不会出现在HTML源代码中,而是在HTML源码位置放上一段JavaScrip ...
- Python开发爬虫之动态网页抓取篇:爬取博客评论数据——通过浏览器审查元素解析真实网页地址...
由于主流网站都使用JavaScript展示网页内容,和前面简单抓取静态网页不同的是,在使用JavaScript时,很多内容并不会出现在HTML源代码中,而是在HTML源码位置放上一段JavaScrip ...
- asp是什么文件?html和asp的区别?(HTML是客户端语言,主要用于创建静态网页;asp是服务器端语言,用于设计用户交互式页面或动态页面)
1.HTML是一种客户端语言,它允许Web浏览器解析并显示在标签之间写入的内容,允许把图像和对象嵌入到网页中.ASP是一种服务器端语言,这意味着写入的代码将被发送到服务器中,并根据要求执行的操作返回一 ...
- 比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格 效果如下: 源代码如下: <!DOCTYPE htm ...
- Selenium一些特殊情况的处理:失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入
Selenium一些特殊情况的处理 失去焦点focus 有时候click()或者send_keys(),没有反应.那是因为失去了焦点.使用driver. switch_to_active_elemen ...
- Vue-cli3项目seo优化--静态化打包(动态改变页面Titl、keyWords、description)
Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWords.description) 文章目录 Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWord ...
- 24种页面元素与iDo网页设计工具箱
只要换成庖丁解牛的眼光来审视一个网站,就会发现网页是由视觉效果和显示内容构成的. 视觉效果包括网页的背景.区域的背景.各种装饰,而显示内容则包括各种类型的列表.文本内容.标题.图片.动画和幻灯片等,视 ...
- 宫格布局,动态更改背景颜色,图标,跳转页面(笔记)
html <u-grid :col="4" :border="false">//循环数据,动态渲染每块的跳转页面<u-grid-item v- ...
最新文章
- InnerHTML、InnerText、outerHTML、outerText的区别
- hadoop学习--多表关联
- 第八九章 正态分布与超越正态
- Python for循环本质
- U-Boot提供的命令【整理】
- ring0检测隐藏进程
- python简单应用_python之Click的简单应用
- 单点登录系统原理与接入
- Silvaco仿真入门
- 截图文字识别工具(OCR),图片上的文字也能轻松复制
- 什么是十六进制法_什么是十六进制-十六进制详解-嗨客网
- 蓝牙RFCOMM协议
- 关于(广义)代数特征值问题的一点注记
- Spring Data Redis 实践
- 【NOIP模拟赛】【数学真奇妙系列】纸盒子
- 区分H5调用手机相机与相册
- JS中call用法理解
- 数据库常见问题汇总Subquery returns more than 1 row
- 口罩危机下的电商大考
- Vue路由守卫(拦截)
热门文章
- SOA面向服务架构简述
- Javascript iframe交互并兼容各种浏览器的解决方案
- 关于style设置方法,obj.setAttribute(style.)和obj.style.stylename
- Git基础知识与常用命令
- 一起谈.NET技术,asp.net页面中输出变量、Eval数据绑定等总结
- ubuntu上安装python3.7教程_ubuntu中安装Python3.7
- 谷歌云服务器支持udp,谷歌浏览器扩展使用UDP
- 编程计算机教小明加法,Python校本课程第四课——教案
- 用python把相同名称的放在一起,python实现将具有相同名称的文件放入相应的文件夹中,把,对应,内...
- python idle使用教程_PythonIDLE使用教程