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基本选择器选择元素使用介绍
Apr 18 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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/10/09 PHP
smarty实例教程
2006/11/19 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php和nginx交互实例讲解
2019/09/24 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
Python内置数据类型详解
2014/08/18 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
python的socket编程入门
2018/01/29 Python
使用python3实现操作串口详解
2019/01/01 Python
python编写俄罗斯方块
2020/03/13 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
书法比赛获奖感言
2014/02/10 职场文书
搞笑爱情保证书
2014/04/29 职场文书
医院营销工作计划
2015/01/16 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang