《JS原理、方法与实践》- DOM核心

简介: 《JS原理、方法与实践》- DOM核心

## Node

在DOM中文档的结构是以节点来表示的,所有的元素(对象)都叫做节点。节点有很多类型,总的节点对象叫做Node,Node下面具体分为10个子类型,子类型中的CharacterData对象又进行细分。

![HTML DOM Tree 实例](https://upload-images.jianshu.io/upload_images/2789632-5700a02cd89dc3e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

在DOM中,文档的所有组成部分都叫做Node(节点),例如HTML文件中的html、body、图片、文字、各种标签、以及标签的属性等。

Node的不同类型节点是通过NodeType来区分的。NodeType是Node接口对象的属性,共有12个值:

![Node的属性](https://upload-images.jianshu.io/upload_images/2789632-0f2a9ccdc128d765.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Node接口是多个节点类型的父接口,起始定义所有节点通用的属性(包括方法属性),这些属性主要可以分为三大类:属性类、判断类和操作类。

浏览器会根据加载的HTML文件自动生成相应的DOM对象,这样就可以在JS中对其进行操作,而Node就是所有这些生成的DOM对象的总接口,换句话说,浏览器生成的所有DOM对象都将包含Node中的所有属性。

#### 1.属性类属性

Node的属性类属性又可以分为两种类型,一种是可读写的,另一种是只读的。

可读写属性主要又三个:nodeValue、textContent和userData。其中,nodeValue表示节点的值,例如:Text节点的nodeValue就是节点本身的值。textContent表示节点所包含的文本内容,例如div节点中所有子节点的文本内容就是div的textContent。userData是我们可以自己在节点上设置的值,使用userData就相当于将节点看成一个普通对象,然后度iqi属性进行操作。对userData的操作是使用serUserData和getUserData两个方法进行的,但是,这两个方法大部分浏览器现在还不支持。

代码实例:

```

<body>

   <div id="a">this is a text box.<div>inner box</div></div>

   <script>

       var div_a = document.getElementById("a");

       console.log(div_a.firstChild.nodeValue); // this is a text box.

       console.log(div_a.textContent); // this is a text box.inner box

       div_a.setUserData("userData", {name: 'zzh', sex: 'male'});

       console.log(JSON.stringify(div_a.getUserData("userData")));

   </script>

</body>

```

![测试结果](https://upload-images.jianshu.io/upload_images/2789632-9c5dd6285c631285.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Node的只读属性主要包括以下几个:

* nodeType: 节点类型

* nodeName: 节点名称

* attributes: 节点包含的属性节点的集合

* parentNode: 节点的父节点

* childNodes: 节点的所有子节点集合

* firstChild: 节点的第一个子节点

* lastChild: 节点的最后一个子节点

* previousSibling: 节点的前一个节点

* nextSiblind: 节点的后一个节点

* ownerDocument: 节点所在的文档

#### 2.判断类属性

* node.isEqualNode(arg): 判断两个节点是否相等,参数为Node类型

* node.isSameNode(other): 判断是否为同一个节点,参数为Node类型

* node.isSupported(feature, version): 判断是否支持某个特性

* node.hasChildNodes(): 判断是否包含子节点

* node.hasAttributes(): 判断是否包含属性

* node.compareDocumentPosition(otherNode): 判断两个节点的相互位置关系,参数为另一个节点

#### 3.操作类属性

Node的操作类属性主要包括6个方法属性:

* node.appendChild(newChild): 添加子节点

* node.cloneNode(deep): 克隆节点

* node.insertBefore(newChild, refChild): 在指定子节点前插入子节点

* node.removeChild(oldChild): 移除子节点

* node.replaceChild(newChild, oldChild):替换子节点

* node.normalize(): 规范化文档(主要是合并相邻Text节点)

## Element

Element节点就是在文档中使用的标签,例如html、body、div等标签都是Element类型的节点。Element节点主要包含tagName、attribute、attributeNode属性和getElementsByTagName方法。

attribute表示节点的属性值,attributeNode表示属性节点本省,它们都有相应的查询,获取,设置和删除的方法:

* hasAttribute(name): 判断是否包含指定名称的节点属性

* getAttribute(name): 获取节点属性的值

* setAttribute(name,value): 设置节点属性的值

* removeAttribute(name): 删除指定名称的节点属性

* getAttributeNode(name): 按名称获取指定属性节点

* setAttributeNode(newAttr): 设置新属性节点

* removeAttributeNode(oldAttr): 删除属性节点

## Attr

Attr节点是表示属性类型的节点,也就是我们常用的标签中的属性,一共包括以下6个属性:

* name: 属性名

* value: 属性值

* ownerElement: 属性所在的Element节点

* spcified: 属性是否被指定,如果显示设定了,则返回true, 如果使用的是默认值,则返回false

* isId: 是否为Id属性,这是DOM3中新增的属性,浏览器支持得并不友好,只有Safari可以返回正确得结果。

* schemaTypeInfo: 命名空间相关,主要用于XML

## Text

Text节点是表示文本类型得节点,也就是我们平时直接使用得问题。它并不是直接继承得Node接口,而是继承自CharacterData接口,CharacterData接口继承自Node接口:

#### Character

Character接口一共包含7个属性:

* appendData(arg): 在尾部添加数据

* insertData(offset, arg): 在指定位置插入数据

* deleteData(offset, count): 删除指定位置得数据

* replaceData(offset, count, arg): 替换指定位置的数据

* substringData(offset, count): 截取指定位置的数据

#### Text

Text节点本身有一个wholeText属性和三个方法属性:

* wholeText: 表示于Text节点相邻的所有Text节点组成的文本

* replaceWholeText: // 不被支持

* isElementContentWitespace: // 不被支持

* splitText: 用于在指定位置将Text节点分为两个Text节点,参数为分割位置

## Comment

Comment节点表示注释类型的节点,继承CharacterData,没有自己的属性

## Document

Document节点并不是直接在Html文件中存在的节点,它代表整个文档,所有其他节点,都在它之下,它包含的属性:

* adoptNode(source): 将另外一个文档中的节点添加到当前文档

* importNode(importedNode, deep): 引入节点

* createAttribute(name): 创建属性节点

* createComent(data): 创建注释节点

* createDocumentFragment(): 创建DocumentFragment节点

* createElement(tagName): 创建Element节点

* createTextNode(data): 创建Text节点

* renameNode(node, namespanceURI, newName): 修改节点名称

* getElementById(id): 使用Id获取Element节点

* getElementByTagName(TagName): 按照标签名获取所有节点

* doctype: 文档类型DocumentType

* documentElement: 获取Element根节点,例如:html

* inputEncoding: 编码方式

* implementation: 获取DOMImplementation

* strictErroChecking: 是否强强制进行错误检查,可读写

## DocumentFragment

DocumentFragment节点表示Document片段节点,它是轻量级的Document,继承自Node,没有自己的属性。它的作用就是一个容器,当选哟插入多个节点时,为了避免频繁的操作DOM,可以先使用DocumentFragment,之后再插入到DOM中。

## 异常对象

![](https://upload-images.jianshu.io/upload_images/2789632-1b41095d48f5263b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 辅助对象

* DOMImplementation:独立于文档的接口,检查是否支持指定版本的特性,获取指定版本,创建DocumentType,创建Document。

* NamedNodeMap:获取包含节点的数量,按名称获取指定节点,将指定节点添加到Map中,删除指定名称的节点,按序号获取节点。

* NodeList:与NamedNodeMap类似,不同之处在于NodeList包含的节点是有顺序的。

目录
相关文章
|
1月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
20天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
5天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
|
19天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
19天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
7天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
19天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
20天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
20天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。