javascript中的DOM操作初探

javascript中的DOM操作初探
2021年08月19日19:26:20 0 342

javascript中的DOM操作初探

 

DOM是Document Object Model的缩写,意思是文档对象模型。根据W3C DOM规范,DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

javascript中的DOM操作初探

dom树

一般来说,DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。


javascript中的DOM操作初探

DOM

1.DOM Core

DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,例如XML。

javascript中的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法,这些都是DOM Core的组成部分。

使用DOM Core来获取表格对象的方法:

document.getElementByTagName("table");

使用DOM Core来获取某元素的src属性的方法:

element.getAttribute("src");

javascript中的DOM操作初探

2.HTML-DOM

在使用javascript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性,它提供了一些更简明的记号来描述各种HTML元素的属性。

使用HTML-DOM来获取表单对象的方法:

document.forms;//获取的是一个数组

使用HTML-DOM来获取某元素的src属性的方法:

element.src;

获取某些对象、属性既可以使用DOM Core来实现,也可以使用HTML-DOM来实现。HTML-DOM的代码比较简短,不过它只能用来处理web文档。

3.CSS-DOM

CSS-DOM是针对CSS的操作。在javascript中CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性,可以使网页呈现出各种不同的效果。

设置某元素颜色的方法:

element.style.color="red";

javascript中的DOM操作初探


以上即为jquery中DOM操作的简单介绍。

 

打赏 点赞(0)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
猜您今天喜欢
猜您
喜欢
历史上的今天
05月
21
设计模式,简介,设计模式,简介,Design,pattern, 菜鸟教程

设计模式简介

设计模式简介 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。...
XSLT,浏览器,XSLT,浏览器,几乎,所有主,要的,均, 菜鸟教程

XSLT 浏览器

XSLT 浏览器 几乎所有主要的浏览器均支持 XML 和 XSLT。 Mozilla Firefox 从 1.0.2 版本开始,Firefox 就已开始支持 XML 和 XSLT(...
javascript,函数,参数 菜鸟教程

JavaScript 函数参数

JavaScript 函数参数JavaScript 函数对参数的值没有进行任何的检查。函数显式参数(Parameters)与隐式参数(Arguments)在先前的教程中,我们已经学...
file:// 菜鸟教程

file://

file://file:// — 访问本地文件系统说明文件系统 是 PHP 使用的默认封装协议,展现了本地文件系统。当指定了一个相对路径(不以/、\、\\或 Windows 盘符开...

Comment list 共有 0 条评论

暂无评论