详解JavaScript操作HTML DOM的基本方式


Posted in Javascript onOctober 21, 2015

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:
详解JavaScript操作HTML DOM的基本方式
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素
  • 通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
本例查找 id="intro" 元素:
实例

var x=document.getElementById("intro");

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。
如果未找到该元素,则 x 将包含 null。
通过标签名查找 HTML 元素
本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:
实例

var x=document.getElementsByClassName("intro");

改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容:
今天的日期是: Wed Oct 21 2015 14:43:25 GMT+0800 (中国标准时间)
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

lamp 绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
document.getElementById(id).innerHTML=new HTML
本例改变了 <p>元素的内容:
实例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

本例改变了 <h1> 元素的内容:
实例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

实例讲解:

  • 上面的 HTML 文档含有 id="header" 的 <h1> 元素
  • 我们使用 HTML DOM 来获得 id="header" 的元素
  • JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:

document.getElementById(id).attribute=new value

本例改变了 <img> 元素的 src 属性:
实例

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

实例讲解:

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素
  • 我们使用 HTML DOM 来获得 id="image" 的元素
  • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")
Javascript 相关文章推荐
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
详解JavaScript作用域 闭包
Jul 29 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
JavaScript函数的调用以及参数传递
Oct 21 #Javascript
Java中Timer的用法详解
Oct 21 #Javascript
JS实现的竖向折叠菜单代码
Oct 21 #Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 #Javascript
纯javascript实现自动发送邮件
Oct 21 #Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 #Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 #Javascript
You might like
PHP反向代理类代码
2014/08/15 PHP
php实现点击可刷新验证码
2015/11/07 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
python实现2048小游戏
2015/03/30 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python实现自动打卡的示例代码
2020/10/10 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
大学生交通专业求职信
2014/09/01 职场文书
介绍信范文大全
2015/05/07 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书