• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

JS之DOM节点增删改查与属性设置

开发技术 开发技术 4小时前 3次浏览

增删改查演示

增:

'''
createElement(name)创建元素
appendChild();将元素添加
'''

:

'''
获得要删除的元素
获得它的父元素
使用removeChild()方法删除
'''

:

第一种方式:

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

第二种方式:

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

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

:  使用之前介绍的方法.

 

<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 DOM 

  • 改变 HTML 内容 

        改变元素内容的最简答的方法是使用 innerHTML ,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

 

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

    <style>
        .div1,.div2,.div3,.div4{
            width:300px;
            height:100px;
        }
        .div1{
            background-color: green;
        }
        .div2{
            background-color: #d900ff;
        }
        .div3{
            background-color: rebeccapurple;
        }
        .div4{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="div1">
        <button onclick="add()">添加</button>
        hello div1
    </div>
    <div class="div2">
        <button onclick="del()">删除</button>
        hello div2
    </div>
    <div class="div3">
        <button onclick="change()">修改</button>
        <p>hello div3</p>
    </div>
    <div class="div4 div5">hello div4</div>

    <script>
        // node的CURD
        function add() {
            var ele=document.createElement('p'); // 创建元素
            ele.innerHTML='<h6>hello p<h6>'; // 为所创建元素添加文本
            // ele.innerText='<h6>hello p<h6>'; // 和innerHTML有区别
            var ele1=document.getElementsByClassName('div1')[0]; // 找到其父元素
            ele1.appendChild(ele); // 将元素添加,必须是父节点进行操作
        };
        function del() {
            var ele1=document.getElementsByClassName('div1')[0]; // 获得要删除的元素的父元素
            var ele=ele1.getElementsByTagName('p')[0]; // 获得要删除的元素
            ele1.removeChild(ele); // 删除元素,必须是其父元素进行操作
        };
        function change() {
            var img=document.createElement('img'); // 创建元素
            // img.setAttribute('src', 'icon.jpg'); 和下面一样的功能
            img.src='icon.jpg'; // 找到img标签的图片路径
            img.style.width='50px';
            img.style.height='50px';
            var ele1=document.getElementsByClassName('div3')[0]; // 找到要修改元素的父元素
            ele=ele1.getElementsByTagName('p')[0]; // 找到要修改的元素
            ele1.replaceChild(img,ele); // 修改元素,必须是其父元素进行操作
        };
        // 关于class的操作(可用于对标签的隐藏及显现的操作)
        var div=document.getElementsByClassName('div4')[0];
        console.log(div.className); // div4 div5获取标签所有的class值
        console.log(div.classList); // ["div4", "div5", value: "div4 div5"]获取标签所有class值并返回一个数组
        console.log(div.classList[0]); // div4
        div.classList.add('hide'); // 添加标签的一个class值
        console.log(div.className); // div4 div5 hide
        div.classList.remove('hide'); // 删除标签的一个class值
        console.log(div.className); // div4 div5
    </script>
</body>
</html>

 


程序员灯塔
转载请注明原文链接:JS之DOM节点增删改查与属性设置
喜欢 (0)