博客

动态对Dom节点进行增删改

1. 
   
   创建节点 ： document.createElement(‘标签名’)
   
   

   
   语法：新元素节点 = document.createElement(‘标签名’)
   

   var tag1 = document.createElement(‘zxc’)

   tag1.innerText = 666

   console.log(tag1);

2. 
   
   插入节点
   
   

   2.1  父节点.appendchild(子节点)  ****

   作用：向父节点最后插入一个新的子节点

   i666.appendChild(tag1)

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

   作用： 在参考节点之前插入一个新的节点，第二个参数必填，如果填null, 就在最后面插入，那就和appendChild 效果一样

   i666.insertBefore(tag1,erzi2)   //在erzi2前面插入tag1节点

3. 
   
   删除节点 ：父节点.removeChild(子节点)
   
   

   // 只能通过父亲删除儿子，自己不能删除自己

   erzi2.parentNode.removeChild(erzi2)

   i666.removeChild(erzi2)

4. 
   
   复制（克隆）节点     要被复制的节点.cloneNode(参数)
   
   

   // 解释： 带参数true: 不仅回复制节点本身，还会复制里面的子节点

   // 不带参数，或者带参数false:   值复制节点本身，不复制子节点

   var temp = erzi2.cloneNode()

   console.log(temp);

对元素节点上——属性的操作

一、获取类：

1.  以对象属性的方式获取

元素节点.属性名

元素节点[‘属性名’]

2. 元素节点.getAttribute(“属性名称”)

 var img1 = document.querySelector(".cl2")
    
         console.log( img1.id);
         console.log( img1.src);
         console.log( img1['alt'] );
         console.log( img1.className);  //**** class => className

 // 2. getAttribute()  //获取元素节点的属性
            // 元素节点.attributes   //获取的是全部属性的组成的一个对象
            // 元素节点.getAttribute("属性名称")   //class=> class

             console.log( img1.attributes );
             console.log(img1.getAttribute('src'));
             console.log(img1.getAttribute('class'));

二、

设置类：

1.  以 对象属性的方式获取

元素节点.属性名 = 值

元素节点[‘属性名’] = 值

2. 元素节点.setAttribute(“属性名称”,值)

删除类：

1. 元素节点.removeAttribute(“属性名称”)

html结构

<img src=”img/img001.jpg” alt=”666″ id=”id666″ class=”cl1 cl2 cl3 xwk”>

 var img1 = document.querySelector(".cl2")
 img1.alt = 7777
 img1['alt'] = 9999
 img1.setAttribute('alt', 12345)
 img1.setAttribute("src", 'img/img003.jpg')
 console.log(img1);

 console.log(img1.alt);
 img1.removeAttribute('alt')

clasList


最常用的API,获取的是集合，并且拥有跟多方法

html结构

<style>

.ccc{

width: 300px;

height: 300px;

border: 4px solid red;

font-size: 50px;

color: red;

text-shadow: 0px 0px 4px #000;

box-shadow: 0px 0px 40px 4px skyblue inset;

}

.aaa{

width: 200px;

height: 200px;

border: 4px solid blue;

font-size: 50px;

color: red;

background-color: skyblue;

}

</style>

<div class=”cl1 asjdank aksjdn”>666</div>

        var cl1_box = document.querySelector(".cl1")
        // console.log(cl1_box);
        // console.log( cl1_box.classList );
        // 2.1  新增：element.classList.add(类名) 
        // 注意： 生效的情况，如果权重一样， 看css书写的前后顺序决定， 不管添加的顺序
             cl1_box.classList.add('aaa')
             cl1_box.classList.add('ccc')
             console.log( cl1_box.classList );

         // 2.2 删除类名 element.classList.remove(类名)
             cl1_box.classList.remove('aaa')
             cl1_box.classList.remove('ccc')

        // 2.3 查询类名 element.classList.contains(类名)
             console.log( cl1_box.classList.contains('ccc') );

        // 2.4 替换 element.classList.replace('被替换的类','新的类')
             cl1_box.classList.replace('ccc','aaa')

        // 2.5 类名存在取反 element.classList.toggle(类名)
                 cl1_box.classList.toggle('zxc')
                 cl1_box.classList.toggle('ccc')
                 console.log( cl1_box.classList );