DOM中操作元素的增删改
创捷dom中的元素
一 创建一个div 其中我们要注意createElement() 要与insertBefore()或者
appendChild()进行联合使用才可以
<div class="father">
<span>我是爸爸</span>
<p class="son">我是儿子</p>
</div>
1 创建元素
let createSpan = document.createElement('span');
console.log(createSpan);
2创建文本节点
let createText = document.createTextNode('哈哈哈');
3我们进行直接通过innerHTML来创建元素
father.innerHTML = '<div>我是第三种的创建方式</div>'
console.log(father);
二使用appendChild()我们来进行末尾添加
//创建span的元素
let createSpan = document.createElement('span');
let getP = document.querySelector('p');
let newSpan = getP.appendChild(createSpan);
console.log(getP);
三 使用insertBefore()方法在前面进行增加
1确定创建的元素
2获取父节点
3获取后面一个子节点,进行插入
<div class="father">
<p class="son">我是儿子</p>
</div>
// 1创建插入的元素
let createDiv = document.createElement('div');
// 2获取父元素
let father = document.querySelector('.father');
// 获取后面的一个节点
let son = document.querySelector('.son')
// 我们进行插入
let newNode = father.insertBefore(createDiv,son);
console.log(father);
四克隆节点
浅克隆
//我们把father进行浅克隆,只克隆结构
let codeA = father.cloneNode()
console.log(codeA);
深克隆
let codeB = father.cloneNode(true)
console.log(codeB);
棕色是我们写的HTML的结构 蓝色是我们浅克隆,只克隆结构的 ,绿色是我们深克隆
五移除节点
removeChild()
<div class="father">
<p class="son">我是儿子</p>
</div>
let father = document.querySelector('.father');
let son = document.querySelector('.son')
// 我们把father下的p节点进行移除下
let newRemove = father.removeChild(son)
console.log(father);
六属性名的增删改
let index = father.setAttribute('index',8);
console.log( father.getAttribute('index'));
删除属性名
let deIndex = father.removeAttribute('index');
console.log(father);