MENU

JavaScript获取DOM对象的几种方式以及DOM模型的简单介绍

January 11, 2021 • 数据采集与数据分析(python)

使用document对象的方法(如下)来获取与HTML元素对象的DOM类:

1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用

2.getElementsByName() 方法可返回带有指定名称的对象的集合

3.getElementsByTagName() 方法可返回带有指定标签名的对象的集合

4.getElementsByClassName() 方法可返回带有指定类名的对象的集合

5.document.querySelector() 方法可返回匹配指定 CSS 选择器的一个对象的引用

6.document.querySelectorAll() 方法可返回匹配指定 CSS 选择器的的对象的集合

7.document.body提供对 <body> 元素的直接访问

8.document.forms返回对文档中所有 Form 对象引用

9.表单名.控件名.value可以用来获取表单控件的值

9.document.title返回当前文档的标题

DOM模型概述
DOM是文档对象模型(Document Object Model)的简称。借助DOM模型可以将结构化文档转换成DOM树。程序员可以访问,修改,添加树节点。一旦掌握了DOM编程模型就拥有了使用Javascript脚本动态修改HTML页面的能力。
DOM中各类继承关系图:
DOM中各类继承关系图.png(Node、Document、Element、HTMLElement都是普通HTML元素的超类,不直接对应HTML页面控件,但他们所包含的方法也可被其他页面元素调用。)

DOM为常用HTML元素提供了一套完整的继承体系。从页面的document对象到每个常用的HTML元素,DOM模型都提供了对应的类,每个类都提供了相应的方法来操作DOM元素本身、属性以及其他子元素。DOM模型允许以树的方式操作HTML文档中的每个元素。

关于DOM更多内容可参考DOM