JavaScript（JS）之Javascript对象DOM之增删改查（四）

创建节点：var ele_a = document.createElement('a');
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);

1.创建节点

createElement(标签名) ：创建一个指定名称的元素。

var  tag=document.createElement(“input")
            //tag.setAttribute('type','text');
             tag.type = "text" // 推荐使用这种方式，简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="div1"></div>

</body>

<script>
    var tag = document.getElementsByClassName("div1")[0];
    console.log(tag);

    var tag_input = document.createElement("input");
    tag_input.type = "text";
    //tag_input.setAttribute('type',"submit");

    tag.appendChild(tag_input);

</script>

</html>

View Code

2.添加节点

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)


把增加的节点放到某个节点的前边

somenode.insertBefore(newnode,某个节点);

3.删除节点

removeChild()：获得要删除的元素，通过父元素调用删除

4.替换节点

somenode.replaceChild(newnode, 某个节点);

5.节点属性操作

　　1.获取文本节点的值：innerText innerHTML

　　　　innerText:不管你是赋值还是取值，只能识别纯文本

     innerHtml:既可以识别纯文本，也可以识别标签

//    文本属性
//  1.innerText:不管你是赋值还是取值，只能识别纯文本
        var a1 = document.getElementsByClassName('c2')[0];
//        console.log(a1);
        //取值操作
        console.log(a1.innerText); //你好吗/
        console.log(a1.innerHTML); //你好吗/
        //赋值操作
        a1.innerText='Egon';
        a1.innerHTML='<a href="">hello</a>';
//  2.innerHtml:既可以识别纯文本，也可以识别标签
        var b1 = document.getElementsByClassName('c2')[1];
//        console.log(b1);
        //取值操作
        console.log(b1.innerText);
        console.log(b1.innerHTML);
        //赋值操作
        b1.innerText = 'lala';
        b1.innerHTML = '<input type="text">';

　　2.属性（attribute）操作：

elementNode.setAttribute(name,value)    
 elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)
 elementNode.removeAttribute(“属性名”);

泛指所有的属性
　　getAttribute 可以操作其他的，，但是不可以操作class

<body><div class="c1" id="d1">DIV</div>
<script>
    var ele = document.getElementsByClassName('c1')[0];
    ele.id='d2';//修改id
    console.log(ele);

//取属性值 :
//    方式一
    console.log(ele.getAttribute('id'));
//    方式二
    console.log(ele.id);
/ 属性赋值
//    方式一
    ele.setAttribute('id','d3');
    console.log(ele);
//    方式二
    ele.id = 'd3';
    console.log(ele);

　　3.value获取当前选中的value值

　　 1.input

　　2.select （selectedIndex）

　　3.textarea

　4.关于class的操作：

//    class属性=============
     var ele = document.getElementsByClassName('c1')[0];
     console.log(ele.className); //打印类的名字
     
     ele.classList.add('hide');
     console.log(ele); //<div class="c1 hide" id="d1">

     ele.classList.remove('hide');//吧添加的remove移除了
     console.log(ele)

　　5.改变css样式：

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

                             .style.fontSize=48px

增删改查的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1, .div2, .div3, .div4 {
             300px;
            height: 100px;
        }
        .div1 {
            background-color: darkblue;
        }
        .div2 {
            background-color: yellow;
        }
        .div3 {
            background-color: coral;
        }
        .div4 {
            background-color: aqua;
        }
    </style>

</head>
<body>

<div class="div1">
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">
    <button onclick="del()">del</button>
    hello div2
</div>
<div class="div3">
    <button onclick="change()">change</button>
    <p>hello div3</p>
</div>
<div class="div4">
    hello div4
</div>


</body>

<script>

    function add() {
        var ele = document.createElement("p")
        ele.innerHTML = "<h2>hello p</h2>";
        ele.style.color = "red";
        ele.style.fontSize = "10px";
        var father = document.getElementsByClassName("div1")[0];
        father.appendChild(ele);
    }

    function  del() {
        var ele = document.getElementsByClassName("div1")[0];
        var to_del = ele.getElementsByTagName("p")[0];
        if (to_del)
            ele.removeChild(to_del);
    }
    
    function change() {
        var img_ele = document.createElement("img");
        img_ele.src = "1.jpg";
        var father = document.getElementsByClassName("div3")[0];
        var p_ele = father.getElementsByTagName("p")[0];
        father.replaceChild(img_ele, p_ele);
    }

</script>

</html>

例子