DOM操作元素的增删改

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);