arcengine遍历属性表_前端设计-JavaScript实现Node节点的遍历

JavaScriptNode节点遍历

通过使用文档对象模型DOM，JavaScript可以按照文档操作方式实现对HTML文件进行访问及相关读写操作。本文主要介绍通过使用DOM提供的Node对象属性及方法实现文档的遍历。

---

Node对象基本属性

Node对象是构成文档的基础，在W3C指定的DOM模型规则中，DOM中所有对象都是Node对象的延伸。整个Document文档是由Node节点按照一定规则所构成。因此HTML文档的遍历，实质就是找到一个HTMLDoucment文件所有节点的过程。Node作为对象，其核心在于Node对象的方法与属性。其主要属性描述如下表所示：

Node主要属性(一)

Node属性(二)

以上给出了Node对象基本属性，通过使用Node对象的属性可以实现对DOM文档结构中节点的访问及读写操作。Node对象主要方法描述如下：

Node对象基本方法

---

文档遍历Demo设计

通过使用Node对象提供的方法与属性，我们可以对一个Document对象进行文档的遍历，为测试文档节点的遍历与获取。定义如下测试Demo：

测试Demo

测试用Demo样式描述如上图所示，主要元素包括H3标题标记，ul嵌套列表，form表单及元素等。页面元素实现代码描述如下：

文档结构代码描述

本例主要通过按钮实现文档元素的遍历，Demo文档中提供6个按钮分别用于实现父节点、第一个子节点、最后一个子节点、前一个节点、后一个节点等的获取。获取节点之后将节点的Name名称、Type类型与Value节点值在文本框中进行输出与显示。文本框输出显示主要借助document对象与element对象的方法实现：

1、文本框值的输出与实现主要借助Element对象的setAttribute方法设置value值将其进行输出。

2、借助Document对象的getElementById返回指定的元素。

通过使用上述两方法可以实现三个文本框Element的表示与获取，定义nowElement用于表示当前访问的节点。实现代码如下：

onload事件获取文本框并设置初始根节点

定义函数setInput用于实现将获取的节点类型、名称、值进行输出显示，该函数定义如下图所示：

设置输出Node属性结果函数

该函数定义如上图，在调用时通过传递参数，用于标识当前节点是否存在，如果存在则显示节点名字、类型与值，不存在的话则显示NULL。

---

按钮操作的实现

针对本测试Demo按钮通过页面代码可知，6个按钮主要用于实现对当前节点6个基本属性进行操作。如通过firstNode属性获取第一个子节点，lastNode属性用于获取最后一个子节点。因此可以定义一个函数，按照函数传递参数不同，获取当前节点的不同属性，并进行输出显示即可。本例定义函数getValue()用于实现对按钮onClick事件进行处理。函数定义描述如下图所示：

onlick响应函数

按钮响应函数描述如上图所示，可以通过该函数实现节点的访问、遍历及属性的读取操作。其中documentElement属性用于返回HTML文档的html标记，如果要获取document文档的根元素，则可以使用Node对象提供的getRootNode方法获取。代码如下：

获取document文档根元素

---

测试效果展示

测试效果展示

---

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！相关文章链接如下：

Web前端设计-常用CSS选择器说明及实例分析(二)

Web前端设计-常用CSS选择器说明及实例分析(一)