`
SnailWong
  • 浏览: 183596 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js中element的操作

    博客分类:
  • web
阅读更多

使用createElement方法
createElement方法的功能是在文档中创建一个孤立HTML标记节点。孤立节点既没有孩子节点也没有双亲节点,而且与文档中的现存节点也互不关联。被创建的孤立HTML标记节点的唯一信息就是它代表的HTML标记,比如< P>、< FONT>和< TABLE>。CreateElement的语法为document.createElement(HTMLTag),HTMLTag表示要创建的HTML标记,返回值是创建的孤立HTML标记节点。

使用cloneNode方法
cloneNode方法的功能是通过克隆(也就是复制)文档中一个现存节点的方式创建文档的一个孤立节点。根据被克隆节点的类型,新创建的孤立节点或者是HTML标记节点,或者是包含字符串信息的文本项节点。cloneNode的语法为oldNode.createNode(false)或者oldNode.createNode(true),oldNode表示被克隆的节点,返回值是新创建的节点,false表示仅仅克隆oldNode,true表示克隆oldNode并包含其下属节点。

使用appendChild方法
appendChild方法的功能是在2个节点间建立起父子关系,如果作为父亲的节点已经具有了孩子节点,那么新添加的孩子节点被追加为最后一个孩子,也就是lastChild。appendChild的语法是fatherObj.appendChild(childObj),返回值是被追加的孩子节点。

使用applyElement方法
applyElement方法的功能是将一个节点与它的孩子节点和父亲节点脱离,然后将另外一个节点连接到这个节点,最终使它们成为父子关系。applyElement的语法是childObj.applyElement(fatherObj),返回值是被连接的孩子节点。
applyElement和appendChild实现的目的基本相同,都是在2个节点间建立父子关系,但有2个区别:
1、applyElement方法只能操纵HTML标记节点,不能处理文本项节点。appendNode则能处理2种节点。
2、appendNode对2个节点的连接方式是从父到子,applyElement则是从子到父。

使用insertBefore方法
insertBefore方法的功能和appendChild相似,都是将一个孩子节点连接到一个父亲节点,但insertBefore方法允许我们指定孩子节点的位置。insertBefore的语法是fatherObj.insertBefore(childObj, brotherObj),返回值是被连接的孩子节点。执行后,childObj的位置在brotherObj之前。

使用removeNode方法
removeNode方法的功能是删除一个节点,语法为node.removeNode(false)或者node.removeNode(true),返回值是被删除的节点。removeNode(false)表示仅仅删除指定节点,然后这个节点的原孩子节点提升为原双亲节点的孩子节点。removeNode(true)表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点,不再具有有孩子节点和双亲节点。

使用replaceNode方法
replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点,语法为oldNode.replaceNode(newNode),返回值是被替换的节点。

使用swapNode方法
swapNode方法的功能是交换2个节点(包括其下属节点)在文档Tree中的位置,语法为firstNode.swapNode(secondNode),返回值是节点firstNode。
swapNode方法的另一个功能是替换节点及其下属节点,就象前面介绍的replaceNode方法一样。这时,我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。

分享到:
评论

相关推荐

    element.js文件

    "Element.js" 文件是JavaScript库中的一个重要组成部分,它通常用于构建用户界面,特别是在Web开发中。JavaScript是一种广泛使用的编程语言,用于实现客户端的交互性和动态功能。在网页中,JavaScript可以处理用户...

    VUE.js+element-ui实现JSON编辑器

    Vue.js和Element-UI是现代前端开发中常用的两个框架,Vue.js作为一个轻量级的JavaScript框架,以其易学易用、高效和灵活的特点受到了广大开发者喜爱。Element-UI则是一套基于Vue.js的企业级UI组件库,提供了丰富的...

    element-ui本地编译后的js包

    Element UI 是一个基于 Vue.js 的开源组件库,它提供了丰富的...总之,Element UI 是 Vue.js 开发中的强大工具,通过这个本地编译后的 js 包,即使在离线环境下也能便捷地利用其丰富的组件库来构建高质量的前端应用。

    Vue.js和Element离线文件

    Vue.js和Element UI是两个非常重要的前端开发框架,它们在构建现代Web应用中扮演着关键角色。Vue.js是一个轻量级、高性能的JavaScript框架,它以其易学易用、灵活性和可扩展性著称。而Element UI则是一个基于Vue.js...

    vue-element-admin中文版本

    在 "vue-element-admin" 项目中,你将找到以下关键知识点: 1. **Vue CLI**:Vue-element-admin 基于 Vue CLI(Vue 的命令行工具)构建,它提供了一套自动化的工作流,用于快速初始化项目,包括自动配置打包、热...

    html 引入 vue.js axios element-ui

    在开发Web应用时,我们...首先,Vue.js是一个轻量级的渐进式JavaScript框架,它允许开发者以声明式的方式编写代码,使得DOM操作变得简单易懂。在HTML中引入Vue.js,我们需要在`&lt;head&gt;`标签内添加如下代码: ```html ...

    Node.JS XML 解析 node-elementtree.zip

    总结起来,`node-elementtree` 是 Node.JS 开发者处理 XML 数据的一个强大工具,它提供了一种简洁的 API,使你在 JavaScript 中操作 XML 文档如同操作 JSON 对象一样方便。无论是解析、查询还是创建 XML,`node-...

    js库在element ui中能用到

    JavaScript库在Element UI中的应用是前端开发中常见的一种技术结合,尤其在构建高效、美观的Web界面时。Element UI是一个基于Vue.js的开源组件库,它提供了丰富的UI组件,如表格、按钮、提示、下拉菜单等,极大地...

    静态Html、jsp、php等使用element ui最简单直观例子(含table/对话框服及js/css等)

    - `element.js` 是 Element UI 的核心 JavaScript 文件,提供了所有组件的交互逻辑。 4. **JSP 使用** 对于 JSP(JavaServer Pages),可以在 JSP 页面中引入 Element UI,利用后端动态生成的内容与 Element UI ...

    layui-progress+element+jquery+js设计一个动态进度条

    1. 引入layui.css、layui.js、element.css、element.js以及jQuery库到HTML文件中。 2. 在HTML中创建一个layui-progress元素,设置初始样式和ID。 3. 使用JavaScript初始化layui-progress,设置初始进度值。 4. 编写...

    element-ui@2.13.2.rar

    "lib" 文件夹通常包含了编译后的 JavaScript 和 CSS 文件,这些文件是 Element UI 的核心,用于在项目中直接引入使用。开发者可以在 HTML 中通过 `&lt;script&gt;` 和 `&lt;link&gt;` 标签引入这些资源,使页面具备 Element UI ...

    element-ui_2.15.1.zip

    在这个 "element-ui_2.15.1.zip" 压缩包中,"lib" 目录下通常会包含这些文件,如 `element-ui.common.js` 或 `element-ui.min.js` 用于 JavaScript 部分,以及 `element-ui.css` 或 `element-ui.min.css` 用于样式...

    本地引入element不显示图标问题.doc

    - 参考Element UI官方文档中关于字体图标加载的部分,按照指南进行操作。 #### 四、总结 本地引入Element UI图标不显示的问题通常是由于资源路径配置错误、文件格式兼容性问题、npm包版本不一致以及构建工具配置...

    element ui plus 离线部署文档

    Element UI Plus离线部署文档是针对前端开发者设计的,它涉及到如何在本地环境中搭建一个无需互联网连接即可使用的Element UI Plus应用。Element UI Plus是基于Vue.js的UI组件库,为开发人员提供了丰富的用户界面...

    Joomla js_element_green

    "js_element_green"可能已经内置了一些SEO特性,帮助网站在搜索结果中获得更好的排名。 10. **用户体验**:最后,优秀的Joomla模板应提供良好的用户体验,包括快速加载速度、易用导航和清晰的呼叫操作(CTAs)。"js...

    版本2.4 element-ui 离线中文文档api

    Element UI 是一个基于 Vue.js 的开源 UI 组件库,它为开发者提供了丰富的组件,用于构建美观、可自定义且响应式的用户界面。版本 2.4 是 Element UI 的一个重要里程碑,其中包含了大量的改进和优化。这个离线版的 ...

    vue+Element-UI 前端框架

    在“vue+Element-UI”这个项目中,Vue.js 被用来作为基础框架,Element-UI 则是基于 Vue 的一套成熟的UI组件库,提供了丰富的界面元素和交互设计,使得开发者可以快速搭建企业级的后台管理系统。 1. **Vue.js**:...

    以DonetCore+vue+Element搭建的简单框架

    在我们的项目中,Element-UI将用于构建用户界面,提供一致的视觉体验和流畅的操作反馈。 四、项目结构与开发流程 1. 初始化项目:使用Visual Studio 2019创建一个新的ASP.NET Core Web应用,选择MVC模板,并设置...

    element.zip

    2. **引入JavaScript**:"element-ui-index.js" 包含了Element UI的JavaScript组件。在HTML页面的`&lt;body&gt;`标签底部,通过`&lt;script&gt;`标签引入此文件,以便在页面加载完成后执行。同时,别忘了在引入JavaScript之前先...

    毕业设计项目-个人博客。前端基于Vue,Element-UI和Vue-Element-Admin实现,后台采用SpringBoot+MybatisPlus+Rd

    首先,前端部分是基于Vue.js构建的,这是一个轻量级的JavaScript框架,以其组件化开发模式和响应式数据绑定而备受青睐。Vue.js允许开发者通过声明式渲染来创建复杂的用户界面,提高了开发效率。在这个项目中,Vue.js...

Global site tag (gtag.js) - Google Analytics