关于DOM节点操作

关于DOM节点的操作

DOM就是我们html中一个个节点构成的,我们的标签、文本内容、注释、包括空格都是节点
DOM的节点也分三种:
		元素节点、文本节点、属性节点
		
那么关于关于节点的几个操作有哪些呢?
创建节点
document.createElement(元素标签)  //创建元素节点(创建标签)
document.createAttribute(元素属性)  //创建属性节点(创建属性,只有属性名,没有属性值)
document.createTextNode(文本内容)  //创建文本节点(创建了一个内容)
**我们常用的就是创建元素节点**
var div = document.createElement("div");
    // 创建元素节点,参数是字符串加引号
删除节点
删除指定元素的子节点
父元素.removeChild(要删除的节点);
// 获取父节点和子节点
    var div = document.querySelector("div");
    var p = document.querySelector("p");
// 删除div下的p标签
    div.removeChild(p);
// 如果无法获取父元素,只知道要删除的子元素
    p.parentElement.removeChild(p);
替换节点
父节点.replaceChild(新的节点,被替换的节点)
// 使用i标签替换掉p标签
// 先创建一个i标签
    var i = document.createElement("i");
    var p = document.querySelector("p");
    p.parentElement.removeChild(i,p);
插入节点
父节点.appendChild(所添加的新节点) 	//追加子节点
父节点.insertBefore(所要添加的新节点,已知子节点)  //在已知的子节点前插入一个新的子节点
//获取标签
    var div = document.querySelector("div");
    var p = p.querySelector("p");
    var i = document.createElement("i");
// 将创建好的i标签放到div的最后面,作为一个子元素
    div.appendChild(i);
// 将i标签插到p标签前面
    div.insertBefore(i,p);
复制节点
被复制的节点.cloneNode()
// 复制p标签
    var p = p.querySelector("p");
    var p1 = p.cloneNode();
// 如果想将被复制的标签里面的内容也复制出来 - 给这个方法加一个参数 true
    var p2 = p.cloneNode(true);
节点操作总结
创建元素节点
删除节点
替换节点
追加子节点
插入到指定节点前面
复制节点
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值