js dom基本操作

<div class="wraper">
        <div class="one">老大<p>pppp</p></div>
        <div class="box">
            <span>内容</span>
            <a href="#">链接</a>
            <p>段落</p>
            <p>ll</p>
        </div>
        <div class="last">老弟</div>
    </div>

 

//查

        // 所有节点属性都是元素对象下的属性
        // 使用节点：第一步获取元素对象，再获取节点
        var box = document.getElementsByClassName('box')[0];
        console.dir(box);
        // nodeName 表示当前节点的名字
        var boxNode = box.nodeName;
        console.log(boxNode);
        // 返回当前元素的父节点
        var boxParent = box.parentNode;
        console.log(boxParent,'---------------');
        // 返回当前元素的父元素
        var boxParentEl = box.parentElement;
        console.log(boxParentEl,'==============');
        // 返回当前元素的子元素节点集合，不包括文本节点和属性节点。
        var boxChildren = box.children;
        console.log(boxChildren);
        // 获取子元素对象
        var fd = boxChildren[0];
        console.log(fd);
        // childNodes会返回当前元素的子元素节点，属性节点，文本节点。
        var childNodes = box.childNodes;
        console.log(childNodes,'---------------------');
        // 用法如下：
        var ch = childNodes[0].nextElementSibling;
        console.log(ch,'++++++++++++++++');
        // 返回当前元素的上一个节点
        var pre = box.previousSibling;
        console.log(pre);
        // 返回当前元素的上一个相邻兄弟元素对象
        var preEl = box.previousElementSibling;
        console.log(preEl);
        // 返回当前元素的下一个节点
        var next = box.nextSibling;
        console.log(next);
        // 返回当前元素的下一个相邻兄弟元素对象
        var nextEl = box.nextElementSibling;
        console.log(nextEl);

        // 返回当前元素的第一个子节点
        var first = box.firstChild;
        console.log(first);
        // 返回当前元素的第一个子元素
        var firstEl = box.firstElementChild
        console.log(firstEl);
        // 返回当前元素的最后一个子节点
        var lastCh = box.lastChild;
        console.log(lastCh);
        // 返回当前元素的最后一个子元素
        var lastEl = box.lastElementChild;
        console.log(lastEl);

//增

 
        var div = document.createElement('div');
        box.appendChild(div);
// 删
        box.removeChild(box.lastElementChild);
// 改
        var h1 = document.createElement('h1');
        var a = document.getElementsByTagName('a')[0];
        box.replaceChild(h1,a);
// 克隆
        var last = document.getElementsByClassName('last')[0];
        var clone1 = last.cloneNode(true);//true 表示克隆 el 以及el子节点
        console.log(clone1);
        var clone2 = last.cloneNode(false);//false 只克隆el 不克隆子节点
        console.log(clone2);