DOM节点操作大全(一)

下面是对DOM节点操作的整理，有创建节点、插入节点、删除节点、复制节点
希望可以帮助到有需要的小伙伴哦
在下一篇博客小编会整理DOM节点属性的知识点

文章目录

创建节点
插入节点
删除节点
复制节点

创建节点

利用JS重新创建一个节点

创建元素节点

document.createElement(节点名);

创建文本节点

document.createTextNode(节点名);

创建属性节点

document.createAttribute(节点名);

补充：
创建元素节点的内容的另一种方式：

获取的元素节点.innerHTML = "元素节点的内容";

实例1：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建元素</title><style>.li01 {color: red;}</style>
</head><body><ul id="fruit"><li>苹果</li><li>香蕉</li></ul><script>// 获取ul元素var ul = document.getElementById("fruit");// 创建li元素var li3 = document.createElement("li");var li4 = document.createElement("li");// 创建文本节点var textnode = document.createTextNode("橘子");li4.innerHTML = "红枣";// 把文本节点添加到li节点里面li3.appendChild(textnode);// 向ul节点里面添加子节点liul.appendChild(li3);ul.appendChild(li4);var li1 = ul.firstElementChild;// 不能用firstChild，因为有空白节点var att = document.createAttribute("class");att.value = "li01";li1.setAttributeNode(att);/*<li class="li01">苹果</li>*/</script>
</body></html>

实例2：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建元素</title><style>.li01 {color: red;}</style>
</head><body><ul id="fruit"><li>苹果</li><li>香蕉</li></ul><script>// 获取ul元素var ul = document.getElementById("fruit");// 创建li元素var li3 = document.createElement("li");var li4 = document.createElement("li");// 创建文本节点var textnode = document.createTextNode("橘子");li4.innerHTML = "红枣";// 把文本节点添加到li节点里面li3.appendChild(textnode);// 向ul节点里面添加子节点liul.appendChild(li3);ul.appendChild(li4);var li1 = ul.firstChild;var att = document.createAttribute("class");att.value = "li01";console.log(li1);li1.setAttributeNode(att);/*<li class="li01">苹果</li>*/</script>
</body></html>

插入节点

方式1：

父节点.appendChild(新的子节点);

方式2：

父节点.insertBefore(新的子节点,作为参考的子节点);

在参考节点前插入一个新的节点
如果参考节点为null，会在参考节点的父节点最后插入一个子节点

删除节点

语法格式:

父节点.removeChild(子节点);

注意：用父节点删除子节点的时候，必须指定是删除哪个子节点

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>删除节点</title>
</head>
<body><ul id="fruit"><li>苹果</li><li>香蕉</li><li>橘子</li></ul><script>// 获取ulvar ul = document.getElementById("fruit");// 获取第2个livar li2 = ul.children[1];// 删除ul的第2个liul.removeChild(li2);</script>
</body>
</html>

复制节点

语法格式：

要复制的节点 = cloneNode(); // 括号里不带参数，默认是false
要复制的节点.cloneNode(true);

没有参数 / 有参数false：只复制节点本身，不复制子节点
带参数true：复制节点本身和其所有子节点
实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复制节点</title>
</head>
<body><ul id="a"><li>苹果</li><li>香蕉</li><li>橘子</li></ul><ul id="b"><li>玫瑰</li><li>茉莉</li><li>菊花</li></ul><script>var a = document.getElementById("a");var lia1 = a.firstElementChild;var lia01 = lia1.cloneNode(false); // 只复制本节点，不复制子节点a.appendChild(lia01);var b = document.getElementById("b");var lib1 = b.firstElementChild;var lib01 = lib1.cloneNode(true); // // 复制本节点和子节点b.appendChild(lib01);</script>
</body>
</html>

DOM节点操作大全(一)相关推荐

04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
第四章 DOM节点操作
1.什么是DOM: DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类: (1)Core Dom:可以对ht ...
jQuery DOM 节点操作
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...
节点操作大全(二)~操作节点的属性
下面是对节点属性操作的整理,希望可以帮助到有需要的小伙伴~ 跟小编来康康吧文章目录获取节点的属性值设置节点的属性值删除节点的属性获取节点的属性值方式1: 元素节点.属性; 元素节点[属性] ...
java document创建节点_javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点...
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
jQuery DOM节点操作
开发工具与关键技术:Adobe Dreamweaver JavaScript 作者:执~漠撰写时间:2020年4月22日在 HTML DOM 中,所有事物都是节点. jQuery创建节点 jQue ...
DOM节点操作----节点层级
一.节点操作分类父节点 ---- node.parentNoed 子节点 ---- node.children 或 node.childNodes 兄弟节点 ---- node.previuouSi ...
HTML保存节点,{HTML5}DOM节点操作-第一节
DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元素结构就是通过这种节点模型来互相对应着的,只需要通过这些节点关系,可以创建.插入.替换.克隆. ...
js的DOM节点操作：创建，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

DOM节点操作大全(一)

文章目录

创建节点

插入节点

删除节点

复制节点

DOM节点操作大全(一)相关推荐

最新文章

热门文章