JS 和DOM的关系

   新手总是有一堆在大佬眼中非常白痴的问题。

一直在w3school学JS,网上有推荐说看《JS DOM编程艺术》书的,就好奇二者关系,网上看了看查了查。

DOM实际上是以面向对象方式描述的文档模型。

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API)。

通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM对象,即是我们用传统的方法(javascript)获得的对象。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,

文档对象模型把整张网页组织成这样的一个树状的结构,树结构中的每一个元素都被视为一个节点,包括JS在内的任何语言都可以通过DOM来改变整个网页的细节。
 

有关JS的问题,有95%其实是DOM的问题。





### DOM节点与DOM元素的关系及区别 #### 1. 定义 - **DOM节点**:DOM中的任何对象都可以称为节点,包括但不限于HTML标签、文本内容、注释等。节点是DOM树的基本组成单位,每个节点都有其类型(如元素节点、文本节点、注释节点等)[^1]。 - **DOM元素**:DOM元素是节点的一种具体类型,表示HTML或XML文档中的标签。例如 `<div>`、`<p>` 等都是元素节点[^3]。 #### 2. 类型区分 在DOM中,节点有多种类型,通过 `nodeType` 属性可以区分不同类型的节点: - 元素节点的 `nodeType` 值为1。 - 文本节点的 `nodeType` 值为3。 - 注释节点的 `nodeType` 值为8。 #### 3. 结构关系 - **父子关系**:每个节点都有一个父节点(通过 `parentNode` 属性访问),并且可以包含零个或多个子节点(通过 `childNodes` 属性访问)。元素节点通常作为父节点存在,并可以包含其他类型的节点作为子节点[^4]。 - **兄弟关系**:同一父节点下的节点互为兄弟节点,可以通过 `nextSibling` `previousSibling` 属性访问相邻的兄弟节点。 #### 4. 属性差异 - **通用属性**:所有节点都具有一些通用属性,如 `nodeType`、`nodeName` `nodeValue`。 - **特定属性**:元素节点具有特定的属性方法,例如 `className`、`id`、`style` 等,这些属性在非元素节点中不可用。 #### 5. 示例代码 以下是一个简单的示例,展示如何通过JavaScript操作DOM节点元素节点: ```javascript // 获取一个元素节点 const element = document.getElementById('example'); // <div id="example">...</div> // 访问元素的子节点 console.log(element.childNodes); // 包括文本节点注释节点 // 访问元素的子元素节点 console.log(element.children); // 仅包括子元素节点 // 创建一个新的文本节点 const textNode = document.createTextNode('New Text'); // 将文本节点添加到元素中 element.appendChild(textNode); ``` #### 6. 总结 - 元素节点是节点的一种特殊类型,属于节点的一部分。 - 节点可以是元素节点、文本节点、注释节点等,而元素节点仅限于HTML或XML标签。 - 在DOM树中,元素节点通常是父节点,可以包含其他类型的节点作为子节点。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值