DOM增删改的简单使用

最新推荐文章于 2021-07-17 22:54:18 发布

no-96

最新推荐文章于 2021-07-17 22:54:18 发布

阅读量283

点赞数

分类专栏： Javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_14998713/article/details/52915013

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

选取DOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="test-div">
        <p id="test-js">javascript</p>
        <p>Java</p>
    </div>
    <script>
        var p_element = document.getElementById("test-js");
        p_element.innerHTML= "java";//p标签中的内容
        p_element.style.color='#ff0000';//颜色
        p_element.style.fontWeight = 'bold';//粗细
    </script>
</body>
</html>

插入DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="java">Java</p>
        <p id="python">Python</p>
        <p id="scheme">Scheme</p>
    </div>
    <script>
        var js = document.getElementById("js");//p标签--JavaScript
        var list = document.getElementById("list");//div标签

        //插入原有的标签，原有的标签会被删除，然后插到新的位置
        list.appendChild(js);//将p添加到div的最后一项

        //创建新的标签并且插入
        var new_p = document.createElement('p');
        new_p.id = 'new_p';
        new_p.innerHTML = '天才';
        list.appendChild(new_p);
    </script>
</body>
</html>

对DOM 进行排序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol id="test-list">
        <li class="lang">Scheme</li>
        <li class="lang">JavaScript</li>
        <li class="lang">Python</li>
        <li class="lang">Ruby</li>
        <li class="lang">Haskell</li>
    </ol>
    <script>
        var ol = document.getElementById("test-list");//获取列表标签
        var li = document.getElementsByClassName("lang");//获取列表项标签
        var li_value  = [];//创建一个存放列表值的数组
        //先取值，再排序
        for(var x in li){
            li_value.push(li[x].innerHTML);
        }
        li_value.sort();

        for(var i in li){//排序之后修改原来的次序
            li[i].innerHTML = li_value[i];
        }
    </script>
</body>
</html>

DOM删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="test-list">
        <li>JavaScript</li>
        <li>Swift</li>
        <li>HTML</li>
        <li>ANSI C</li>
        <li>CSS</li>
        <li>DirectX</li>
    </ul>
    <script>
        var ul = document.getElementById("test-list");//获取父节点
        var li = ul.children;//获取所有子节点
        var i =0 ;
        while(i<li.length){
            if(li[i].innerText==="JavaScript"
                ||li[i].innerText==="HTML"
                ||li[i].innerText==="CSS")
            {
                i++;
            }
            else
            {
                ul.removeChild(li[i]);//删除不符合要求的节点
            }
        }
    </script>
</body>
</html>

no-96

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM增删改的简单使用

选取DOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="test-div"> <p id="test-js">javascript</p> <p>Java</p> <
复制链接

扫一扫