javascript中的DOM操作初探

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

javascript中的DOM操作初探

dom树

一般来说,DOM操作分为3个方面,即DOM Core(核心)、HTML-DOMCSS-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操作的简单介绍。