实现HTML页面动态处理
2024-05-13 22:39:46
- HTML DOM 可以可以对HTML中的元素进行删除,增加的操作,要操作HTML DOM可以使用JavaScript的语言对HTML DOM进行访问.
- 原html文件
<html><head><title>欢迎页面!</title><meta charset="utf-8"/></head><body><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><div><span id="10">Hello World!</span></div></body>
</html>
- 使用getElementsByTagName()方法取得所有span元素,
<script type="text/javascript">window.onload = function (){//取得"span元素var spanELes = document.getElementsByTagName("span");}</script>
- 动态设置元素样式,假设有如下样式,将偶数位的span元素设置为init0样式,将奇数位的span设置为init1的样式
<style type="text/css">.init0{color:green;font-size:20px;display:block;}.init1{color:red;font-size:20px;display:block;}
</style>
- 循环得到的span节点集合,设置每个节点的class属性
<script type="text/javascript">window.onload = function(){//取得"span元素var spanELes = document.getElementsByTagName("span");for(var x = 0; x < spanELes.length; x ++){spanELes[x].setAttribute("class","init"+(x%2));}}</script>
- 页面运行效果
删除元素
- 再删除元素的时候需要注意的是,如果使用getELementsByTagName()方法得到一个节点的集合,如果使用removeChild()方法删除集合中的一个元素,则这个集合的长度会发生改变.
- 假设现在的html中的内容变为如下, 如果此时要删除所有带有"del"内容的span元素
<html><head><title>欢迎页面!</title><meta charset="utf-8"/></head><body><span>Hello World! del</span><span>Hello World! del</span><span>Hello World!</span><span>Hello World!</span><span>Hello World del !</span><span>Hello World!</span><span>Hello del World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello World!</span><span>Hello del World!</span><span>Hello World!</span><div><span id="10">Hello World!</span></div></body>
</html>
- 先使用getElementsByTagName()取得每一个span属性
- 然后使用firstChild.nodeValue得到每一个span节点的内容
- 然后将带有"del" 内容的节点保存到一个数组中.
- 再使用parentNode得到要删除节点的父节点
- 再使用removeChild()删除所有子节点
<script type="text/javascript">window.onload = function(){//取得"span元素var spanEles = document.getElementsByTagName("span");//得到原集合的长度var len = spanEles.length;//保存要删除的子节点数组var delList = new Array();//操作数组的下标var foot = 0;for(var x = 0; x < spanEles.length; x ++){spanEles[x].setAttribute("class","init1");//得到每个节点的内容var strValue = spanEles[x].firstChild.nodeValue;//判断是是否有"del"字符的节点if(strValue.indexOf("del")!=-1){//将每一个要删除的内容保存到数组中delList[foot ++] = spanEles[x];}}//循环删除数组中的每一个节点for(var j = 0; j < delList.length; j++){//得到当前节点的父节点,然后删除父节点的子元素delList[j].parentNode.removeChild(delList[j]);}}</script>
- 运行结果
取得属性内容
- 假设现在的html文件内容为,如果要取得id为:"10"的span元素中的属性内容
<html><head><title>欢迎页面!</title><meta charset="utf-8"/></head><body><div><span id="10 class="init0" >Hello World!</span></div></body>
</html>
- 可以使用document.getElementById()方法取得一个指定id的元素-,正常情况下可以直接使用"元素.属性"取得元素内容
window.onload = function(){//取得span属性var spanEle = document.getElementById("10");//向控制台输出,属性内容console.log("id = "+spanEle.id);console.log("class = "+spanEle.className);}
- 控制台输出
- 如果直接使用"元素.属性" 的方式取得属性内容,表示这个属性已经被定义过了,而一些我们自定义的属性,是无法使用这样的方式取得属性内容的,但是也可以通过以下的方法取得属性内容
Element.getAttribute("属性名称");
- 例如html中定义有如下的内容
<div><span id="10" class="init0" obj="spanObj" >Hello World!</span></div>
- 如果要取得span元素中的obj属性内容,可以通过以下方式
<script type="text/javascript">window.onload = function(){//取得span属性var spanEle = document.getElementById("10");//向控制台输出,属性内容console.log("obj = "+ spanEle.getAttribute("obj"));}</script>
- 使用DOM控制元素的属性,更加的灵活
实现HTML页面动态处理相关推荐
- 详细解剖大型H5单页面应用的核心技术点
阐述下项目 Xut.js 开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...
- div中加载html js,Div里面载入另一个页面的实现(Ajax取代框架)
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
- 大型电商网站的页面静态化方案是如何支撑亿级流量的？
前言 我们小伙伴们在访问淘宝.网易等大型网站时有没有考虑到,网站首页.商品详情页以及新闻详情页面是如何处理的?怎么能够支撑这么大流量的访问呢? 很多小伙伴们就会提出他们都采用了静态化的方案,这样用户请 ...
- div内嵌网页ajax,Div里面载入另一个页面的实现(取代框架)（AJax）（转）
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
- 前端复盘: knockout + require + director 构建单页面程序
关注并将「趣谈前端」设为星标 每早08:30按时推送技术干货/优秀开源/技术思维 目前react,vue,angular等框架都支持单页面程序,最近在回顾一些知识,想起刚毕业的时候接触到knockou ...
- 大型网站的页面静态化
目录 前言 方案一:网页静态HTML化 伪静态 布局样式模板化 应用层nginx 分发层nginx 前言 我们小伙伴们在访问淘宝.网易等大型网站时有没有考虑到,网站首页.商品详情页以及新闻详情页面是如 ...
- Myeclipse中项目没有代码错误提示，jsp页面无编译迹象？如何解决
在使用Myeclipse开发项目时,发现jsp页面中嵌入的java代码没有编译的迹象,错误的get方法没有报错,没有报错信息我们如何知道我们开发的内容是正确的呢? 接下来就演示一下如何解决
- 使用ajax不刷新页面获取、操作数据
在使用jsp或html时,利用ajax达到不刷新页面就可以获取.操作数据. 首先上代码 (html+js) 在此处需要引入jquery插件 <!-- 这是页面部分 html--> < ...
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
最新文章
- Fine-tune之后的NLP新范式：Prompt越来越火，CMU华人博士后出了篇综述文章
- IROS2021 | F-LOAM : Fast LiDAR Odometry and Mapping 解析
- golang 返回值报错 cannot use nil as type string in return argument
- 普通爬虫有啥意思，我写了个通用Scrapy爬虫
- 新字符设备驱动实验(自动分配设备号、自动创建应用层设备节点、新字符设备注册到内核的结构体)
- 动态内存的分配用法和构造动态一维数组
- d3.js 绘制极坐标图(polar plot)
- Openstack虚拟机实例备份方案测试
- yii selenium php,Yii 单元测试用例
- mxnet入门--第4篇
- web登录框，div半透明
- 计算机绘画小房子教案,中班绘画《房子》教案
- 身份证二要素，帮你轻松搞定实名认证
- jeecg ajax验证,jeecg权限模块学习
- After Effects快捷键
- Android中MVP框架理解
- PMS权限管理和鉴权过程
- python和excel数据分析有什么区别_用Excel、SQL、Python做数据分析有何不同？
- 非常有用的10个谈话技巧
- APICloud入门
热门文章
- Android波纹进度条 轻松地让它浪起来
- java编写一个学生类和教师类,Java创建一个学生类
- C 三个学生四门成绩，求成绩总和与平均值
- 网络131余文康 作业
- vs2015下pthread的使用
- Few-shot Learning survey-详细易懂-小样本综述
- 【论文笔记】A Reinforcement Learning Method for Multi-AGV Scheduling in Manufacturing
- Android 高质量开发之崩溃优化，kotlin协程跟线程
- 小学生都能读懂的区块链原理和术语介绍（故事图文）-引自《从零开始自己动手写区块链》
- pdf怎么转换成word文档呢?