详解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 相关文章推荐
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python编写简单端口扫描器
2019/09/04 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
大学生创业感言
2014/01/25 职场文书
设计师个人求职信范文
2014/02/02 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
创业计划书之便利店
2019/09/05 职场文书