DOM对象

DOM


文档对象模型

Document Object Model

文档:标记型文档(HTML、XML)

对象:封装属性和行为

模型:共性、特征的体现


DOM解析HTML,通过DOM的方法,将标记型文档全部(元素即标签、文本、属性)都封装成了对象。

DOM想要操作标记型文档,必须解析。


HTML:

解析器:浏览器可以充当解析器解析HTML。

XML:

需要调用java提供的类,创建解析器,从而解析XML。


浏览器通过DOM方式如何解析HTML?



解析



注意:

  1. 树只有一个根节点;
  2. 没有子节点的节点是叶子节点;
  3. 没有父节点的节点是根节点;
  4. 每个节点只有一个父节点,但是可以有多个子节点;
  5. 树的高度:层级

Document:代表整个文档

Element:元素(标签)对象
Attribute:属性的对象
Text:文本对象

Node:节点对象

Element、Attribute、Text属于Node,如果想操作这三个,可以在node中去找。


### DOM对象介绍 DOM(Document Object Model)即文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。它将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合,以树状结构表示文档,使程序可以对文档的内容、结构和样式进行动态访问和修改。 ### DOM对象使用方法 #### 创建(获取)DOM对象 在 HTML DOM 模型中,可以使用 `window` 对象来获取 DOM 对象,常用方式有 `window.document` 和 `document`。以下是获取元素对象的方法: - `getElementById()`:根据 `id` 属性值获取元素对象,`id` 属性值一般唯一。示例代码如下: ```javascript const element = document.getElementById('myId'); ``` - `getElementsByTagName()`:根据元素名称获取元素对象们,返回值是一个数组。示例代码如下: ```javascript const elements = document.getElementsByTagName('p'); ``` - `getElementsByClassName()`:根据 `Class` 属性值获取元素对象们,返回值是一个数组。示例代码如下: ```javascript const elements = document.getElementsByClassName('myClass'); ``` - `getElementsByName()`:根据 `name` 属性值获取元素对象们,返回值是一个数组。示例代码如下: ```javascript const elements = document.getElementsByName('myName'); ``` #### 创建其他DOM对象 - `createAttribute(name)`:创建一个新的属性节点。示例代码如下: ```javascript const attr = document.createAttribute('myAttribute'); ``` - `createComment()`:创建一个新的注释节点。示例代码如下: ```javascript const comment = document.createComment('This is a comment'); ``` - `createElement()`:创建一个新的元素节点。示例代码如下: ```javascript const newElement = document.createElement('div'); ``` - `createTextNode()`:创建一个新的文本节点。示例代码如下: ```javascript const textNode = document.createTextNode('Hello, World!'); ``` ### DOM对象相关特性 #### 1 级 DOM 特性 在 1 级 DOM 中,`HTMLDocument` 定义了一个名为 `getElementById()` 的非常有用的方法,该方法可用于根据元素的 `id` 属性获取元素对象[^3]。 #### 2 级 DOM 特性 在 2 级 DOM 中,`getElementById()` 方法已经被转移到了 `Document` 接口,现在由 `HTMLDocument` 继承而不是由它定义[^3]。 #### 事件处理特性 - **DOM0 级事件处理**:直接在 HTML 元素中设置事件属性,或者在 JavaScript 中通过元素的属性来绑定事件。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button id="myButton">Click me</button> <script> const button = document.getElementById('myButton'); button.onclick = function() { alert('Button clicked!'); }; </script> </body> </html> ``` - **DOM2 级事件处理**:使用 `addEventListener()` 方法来绑定事件,它允许为一个元素的同一事件添加多个处理程序。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button id="myButton">Click me</button> <script> const button = document.getElementById('myButton'); button.addEventListener('click', function() { alert('First handler'); }); button.addEventListener('click', function() { alert('Second handler'); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值