JavaScript的基础知识------DOM(一)

动态对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 );