JS节点操作小结(创建节点,添加节点,获取节点,删除节点,复制节点)

一,创建节点
document.createElement(‘li’),//创建一个节点

二,添加节点
insertBefore(要添加的节点, 添加在哪个节点之前) 在指定节点前面添加

三,获取节点
(1)获取父节点
node.parentNode,获取距离node最近的父级元素,找不到则返回null;
(2)获取子节点
1.childNodes 获取所有子节点(包括元素节点,文本节点等)
2.获取元素子节点 node.chiildren .
(3)获取第一个子节点
1.node.firstChild 获取第一个,无论是元素节点还是文本节点
2.node.firstElementChild 获取第一个元素节点但是存在兼容性问题
(4)获取最后一个子节点
1.node.lastChild
2.node.lastElementChild 最后一个元素节点

3.既没有兼容性问题,又可以直接获取第一个元素节点的方法
node.children[0];获取第一个元素节点
node.children[node.children.length - 1];获取最后一个元素节点
(5)获取兄弟节点
1.node.nextSibling //获取下一个兄弟节点(无论元素节点还是文本节点)
node.nextElementSibling//获取下一个元素节点(兼容性)
2.node.previousSibling //获取上一个兄弟节点(无论元素节点还是文本节点
node.previousElementSibling //获取上一个元素节点(兼容性)

----解决获取兄弟节点兼容性问题:
function nextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
封装一个函数即可. 依旧是使用上面的方法

四,删除节点
(1)node.removeChild(要删除的节点) node为父节点

五,复制节点
(1)node.cloneNode() //括号为空或者为false为浅复制,只复制节点
node.cloneNode(true) //括号为true为深复制,复制节点及内部所有内容

JS节点操作小结(创建节点,添加节点,获取节点,删除节点,复制节点)相关推荐

js DOM节点操作之创建、添加、删除和克隆节点
1. 创建节点 document.createElement("tagName"):tagName为HTML标签名,创建一个标签名为tagName的元素节点. <body&g ...
JavaScript文档对象模型DOM节点操作之创建和添加节点（5）
得出结论:创建元素节点后,必须要把刚创建的元素节点添加到相应的元素下,否则不会在页面出现示例代码: <!DOCTYPE html> <html><head>< ...
节点操作之创建和添加节点
1.创建节点 document.createElement('tagName') document.createElement() 方法创建由tagName指定的HTML元素,因为这些元素原先不存在, ...
js的DOM节点操作：创建，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
js的节点操作动态创建table表格，创建行，删除行
节点操作根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性 ...
java document创建节点_javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点...
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
js 节点相关内容介绍创建、删除、复制节点
目录 1.节点介绍 2.案例-下拉菜单 3.兄弟节点 4.创建节点 5.案例-简单发布留言 6.删除节点 7.复制节点(克隆节点) 1.节点介绍 1.为什么要学习节点可以利用父子兄节点关系获取元素 ...
JS----DOM节点操作：创建，插入，删除，复制，查找节点
摘自:https://blog.csdn.net/torrex/article/details/54376633 一.创建节点.追加节点 1.createElement(标签名)创建一个元素节点(具体 ...
java增加删除修改表格_Java实现单链表的创建、添加、修改、删除
packagelinkedlist;//单链表的创建.添加插入.修改.删除 public classSingleLinkedListDemo {public static voidmain(Strin ...

JS节点操作小结(创建节点,添加节点,获取节点,删除节点,复制节点)

JS节点操作小结(创建节点,添加节点,获取节点,删除节点,复制节点)相关推荐

最新文章

热门文章