Python学习第84天（JavaScript的DOM节点增删改查和属性设置）

　　今天学到的是关于如果使用函数来实现对节点的增删改查，主要是增删改

　　增加标签：

　　　　creatElement（name）创建元素

　　　　appenChild（）进行元素添加

　　删除标签：

　　　　removeChild（）

　　上面说到的这三个方法，调用方法的对象都是父集节点标签

　　　　先直接写一个案例吧，设定两个div标签，通过设定两个button，一个进行增加，一个进行删除　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width:2000px;
            height: 200px;
            background-color: darkmagenta;
        }
        .div2{
            width: 2000px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="div1">
    <button onclick="add()">add</button>
</div>
<div class="div2">
    <button onclick="del()">del</button>
</div>
<script>
    var father = document.getElementsByClassName('div1')[0]
    function add() {
        var ele = document.createElement('p');
        ele.innerHTML="<h1>hello p</h1>";
        father.appendChild(ele);
    }
    function del() {
        var ele = document.getElementsByTagName('p')[0]
        if (ele){father.removeChild(ele)}
    }
</script>
</body>
</html>

　　　　接着是关于属性的修改问题，有两种方法：

　　　　第一种方式:

　　　　使用上面增和删结合完成修改

　　　　第二中方式:

　　　　　　使用setAttribute();方法修改属性

　　　　　　使用innerHTML属性修改元素的内容

　　　　拿刚才增加过程中为例，我们对增加的标签进行css属性设置，标签属性设置　　

    function add() {
        var ele=document.createElement("p");//<p></p>
        ele.innerHTML="<h1>hello p</h1>";   常用的，但不属于DOM语言，不正统
        //ele.innerText="<h1>hello p</h1>";
        ele.style.color="red";
        ele.style.fontSize="10px";
        var father=document.getElementsByClassName("div1")[0];
        father.appendChild(ele)
    }

　　下面是一个比较详细的介绍：

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
    function addNode(){
        //1.获得 第一个div
        var div = document.getElementById("div_1");
        //2.创建a标签  createElement==>创建一个a标签   <a></a>
        var eleA =  document.createElement("a");
        //3.为a标签添加属性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
        //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.将a标签添加到div中
        div.appendChild(eleA);
    }
    //点击后 删除div区域2
    function deleteNode(){
        //1 获得要删除的div区域
            var div = document.getElementById("div_2");
        //2.获得父亲
            var parent = div.parentNode;
        //3 由父亲操刀 
            parent.removeChild(div);
    }
    //点击后 替换div区域3 为一个美女
    function updateNode(){
        //1 获得要替换的div区域3
        var div = document.getElementById("div_3");
        //2创建img标签对象 <img />
        var img = document.createElement("img");
        //3添加属性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }
    //点击后 将div区域4 克隆一份 添加到页面底部
    
    function copyNode(){
        //1.获取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.获得父亲
        var parent = div.parentNode;
        //4.添加
        parent.appendChild(div_copy);
    }        
</script>

上面这些使用非常方便，下面就说说这个修改html属性的一些方法吧

　　改变 HTML 内容

　　改变元素内容的最简答的方法是使用 innerHTML ，innerText。

　　　　　　innerHTML可以识别引号内的<p>这一类的标签内容

　　　　　　innerText默认识别引号内的全是文本

　　改变 CSS 样式

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

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

　　　　　　<br> .style.fontSize=48px

　　改变 HTML 属性

　　elementNode.setAttribute(name,value)

　　 elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

　　创建新的 HTML 元素

　　createElement(name)

　　删除已有的 HTML 元素

　　 elementNode.removeChild(node)

　　关于class的操作

　　elementNode.className

　　elementNode.classList.add

　　 elementNode.classList.remove

　　　　　　classList.add( newClassName )；
　　　　　　　　添加新的类名，如已经存在，取消添加
　　　　　　classList.contains( oldClassName );
　　　　　　　　确定元素中是否包含指定的类名，返回值为true 、false；
　　　　　　classList.remove( oldClassName )；
　　　　　　　　移除已经存在的类名;
　　　　　　classList.toggle( className )；
　　　　　　　　如果classList中存在给定的值，删除它，否则，添加它；
　　　　　　classList.replace( oldClassName，newClassName )；
　　　　　　　　类名替换

然后下面是一个习题，我们通过对标签的增删改查，实现我们经常在登录网页时，点击登录，中间会出现悬浮框的效果　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
            background-color: white;
        }

        .shade{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.7;
        }

        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="content">
    <button onclick="show()">show</button>
 </div>
<div class="shade hide"></div>
<div class="model hide">
    <button onclick="cancel()">cancel</button>
</div>
<script>
    function show() {
        var ele_shade=document.getElementsByClassName("shade")[0];
        var ele_model=document.getElementsByClassName("model")[0];

        ele_model.classList.remove("hide");
        ele_shade.classList.remove("hide");
    }
</script>
</body>
</html>

　　下面这个悬浮框还缺少取消的功能，明天实现。