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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
详解VUE 数组更新
Dec 16 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
最小化数据传输――在客户端存储数据
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
使用PHP编写发红包程序
2015/07/22 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python 获取url中的参数列表实例
2018/12/18 Python
python添加菜单图文讲解
2019/06/04 Python
Python实现FM算法解析
2019/06/18 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
保护环境建议书100字
2014/05/13 职场文书
爱国口号
2014/06/19 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
教师见习报告范文
2014/11/03 职场文书
酒会邀请函
2015/01/31 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS