JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法


Posted in Javascript onJanuary 20, 2017

本文实例讲述了JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法。分享给大家供大家参考,具体如下:

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应。

效果图:

JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript HTML DOM</title>
<head>
 <style type="text/css">
  body {background-color:#eeeeee}
 </style>
</head>
<body>
 <h3>(一)通过 id 查找 HTML 元素</h3>
 <p id = "hw">Hello world!</p>
 <script>
  x = document.getElementById("hw");
  document.write('<p>id="hw"的段落的文本是:'+x.innerHTML+'</p>');
 </script>
 <button onclick = "setCurrentTime()">将id="hw"的文字改为当前时间</button>
 <script>
  function setCurrentTime(){
   x = document.getElementById("hw");
   x.innerHTML = Date()
  }
 </script>
 <h3>(二)通过 标签名 查找 HTML 元素</h3>
 <div id = "mainDiv">
  <p>This is a paragragph.</p>
  <p>This is another paragragph.</p>
  <p>Yes you're right! This is also paragragph.</p>
 </div>
 <script>
  xx = document.getElementById("mainDiv");
  tagContents = xx.getElementsByTagName("p");
  document.write("<p>使用Javascript查找id为mainDiv下的p标签的内容</p>");
  for(i=0;;i++){
   var tag = tagContents[i]
   if(tag!=null){
    document.write("<p>"+tag.innerHTML+"</p>")
   }else{
    document.write("<p>共有"+i+"条内容</p>")
    break;
   }
  }
 </script>
 <h3>(三)修改 HTML 的属性</h3>
 <img id = "bol" src = "images/eg_bulboff.gif" width="70px" height="120px"/>
 <p><button onclick = "changeSrc()">改变图片资源</button></p>
 <script>
  function changeSrc(){
   x = document.getElementById("bol");
   if (x.src.match("eg_bulboff.gif")){
    x.src = "images/eg_bulbon.gif"
   }else{
    x.src = "images/eg_bulboff.gif"
   }
  }
 </script>
 <h3>(四)修改 CSS 样式</h3>
 <p>
  <span id = "para_1">This is a test paragraph.</span>
  <button onclick="changeTextColor()">改变文字颜色</button>
 </p>
 <p>
  <span id = "para_2">This is another paragraph.
  <button onclick="changeTextFont()">改变字体</button>
 </p>
 <p>
  <span id = "para_3">This is HELLO WORLD.</span>
  <button onclick="changeTextSize()">改变字号</button>
 </p>
 <p>
  <button onclick="changeVisibility()">显示/隐藏</button>
  <span id = "para_4">示例文字</span>
 </p>
 <script>
  function changeTextColor(){
   ele_1 = document.getElementById("para_1");
   ele_1.style.color = "red";
  }
  function changeTextFont(){
   ele_2 = document.getElementById("para_2");
   ele_2.style.fontFamily = "Arial";
  }
  function changeTextSize(){
   ele_3 = document.getElementById("para_3");
   ele_3.style.fontSize = "larger";
  }
  document.getElementById("para_4").style.visibility = "visible"
  function changeVisibility(){
   ele_4 = document.getElementById("para_4");
   if(ele_4.style.visibility.match("visible")){
    ele_4.style.visibility = "hidden"
   }else{
    ele_4.style.visibility = "visible"
   }
  }
 </script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 #Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 #Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 #Javascript
JS中from 表单序列化提交的代码
Jan 20 #Javascript
jquery表单验证插件validation使用方法详解
Jan 20 #Javascript
jquery表单插件form使用方法详解
Jan 20 #Javascript
AngularJs上传前预览图片的实例代码
Jan 20 #Javascript
You might like
PHP环境搭建最新方法
2006/09/05 PHP
php中autoload的用法总结
2013/11/08 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
Javascript 继承机制实例
2009/08/12 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python 元组和列表的区别
2020/12/30 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
软件测试面试题
2014/01/05 面试题
清洁工岗位职责
2014/01/29 职场文书
店长岗位职责
2015/02/11 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Python利用zhdate模块实现农历日期处理
2022/03/31 Python