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 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
通过实践编写优雅的JavaScript代码
May 30 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php数组合并的二种方法
2014/03/21 PHP
php自定义session示例分享
2014/04/22 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python ZipFile模块详解
2013/11/01 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python的faker库用法
2019/11/28 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python实现一个优先级队列的方法
2020/07/31 Python
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
目标责任书范本
2014/04/16 职场文书
英语系毕业生求职信
2014/07/13 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
黄石寨导游词
2015/02/05 职场文书