ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

DOM节点操作

2020-12-05 17:32:20  阅读:137  来源: 互联网

标签:插入 克隆 DOM 元素 获取 追加 操作 节点


一、层级关系的获取

在对一些元素进行节点操作的时候需要通过对其父节点以及其他有关系的节点来进行相关设置,以下为部分层级关系的获取

元素.parentNode //获取父元素节点

元素.firstElementChild //获取第一个子节点,也有firstChild来获取的,但是存在bug

元素.children //获取所有子节点

元素.ownerDocument //获取该节点文档根节点

元素.previousElementSibling //获取当前节点的前一个同级节点

元素.nextElementSibling //获取当前节点的后一个同级节点

二、创建新节点

var newnode = document.createElement("节点类型")
newnode.innerHTML = "创建的节点内容"

三、追加节点

找到要追加节点的父元素

父元素.appendChild(追加的节点)

追加的节点一般由一二中的方法创建一个节点,也可以是克隆的节点

四、克隆节点

要克隆的节点.cloneNode(true) //传入参数true则复制所有节点内容

五、插入节点

直接父元素.insertBefore(要插入的节点,插入位置的后一个节点)
//在使用的时候前面的父元素必须是新旧元素共同的父元素

六、移除结点

父节点.removeChild(要移除的节点)

七、替换结点

父节点.replaceChild(要换成的节点,被替换的节点)

标签:插入,克隆,DOM,元素,获取,追加,操作,节点
来源: https://www.cnblogs.com/wahaha-/p/14090351.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有