详解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 相关文章推荐
Javascript模板技术
Apr 27 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
Jquery使用val方法读写value值
May 18 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
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 $_FILES函数详解
2011/03/09 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
在Python程序中实现分布式进程的教程
2015/04/28 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
反对四风问题自我剖析材料
2014/09/29 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
爱心助学感谢信
2015/01/21 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
JavaScript流程控制(分支)
2021/12/06 Javascript
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏