操作节点 

 1 window.onload = function (ev) {
 2         // CRUD操作
 3         // var box = document.getElementsByClassName('box')[0];
 4 
 5         // 1. 创建节点
 6        /* var img = document.createElement('img');
 7         img.src = 'img/img_02.jpg';
 8         // box.appendChild(img);
 9 
10         var btn = document.getElementsByTagName('button')[0];
　　　　　　　　//在btn前面插入
11         box.insertBefore(img, btn);*/
12 
13         // 2. 删除节点
14         // var btn = document.getElementsByTagName('button')[0];
15         // btn.remove();方法1
16         // box.removeChild(btn); 方法2
17 
18         // 3. 克隆标签
19         var box = document.getElementsByClassName('box')[0];
20         // var newBox = box.cloneNode(); // 浅克隆  子元素不拷贝
21         var newBox = box.cloneNode(true); // 深克隆  里面的所有一切都被拷贝
22         // console.log(newBox);
23         document.body.appendChild(newBox);
24
25     }
window.onload = function (ev) {
        // 1.获取节点
        var img = document.getElementsByTagName('img')[0];
        console.log(img);

        // 2. 获取标签的属性
        /*console.log(img.getAttribute('src'));
        console.log(img.getAttribute('alt'));
        console.log(img.alt);
        console.log(img.src);*/

        // 3. 设置属性
        img.setAttribute('src', 'img/img_02.jpg');
        img.setAttribute('alt', '这是一个美女呀！');
        img.setAttribute('itlike', '撩课');
        img.setAttribute('abc', 'cba');

       // 3. 删除属性
       img.removeAttribute('abc');
    }

 

posted @ 2019-07-15 01:36  疏影横斜水清浅  阅读(185)  评论(0)    收藏  举报