day 15 DOM

最新推荐文章于 2024-09-17 21:49:02 发布

banana tree

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量96

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124696806

版权

DOM是什么？你是怎么理解DOM的？

DOM是document object model，文档对象模型。DOM提供了很多对标签进行增删改查的操作。

DOM操作

增：

fn createElement(标签名)	创建元素节点
fn setAttribute(name,value)	直接设置属性
fn cloneNode(true、false)	true包含子节点、false不包含子节点
fn appendChild()	拼接节点
fn insertBefore(new,old)	插入节点

删：

删除子节点：fn removeChild()

删除属性节点：fn removeAttributeNode()

改：

替换节点：fn replaceChild(new,old)，需要父级来调用。

修改属性值：fn setAttribute()

查：

fn getElementById()	通过id名获取元素
fn getElementsByTagName()	通过标签名获取元素
fn getElementsByClassName()	通过class名获取元素
fn getElementByName()	表单常用，通过表单的name名获取元素
fn querySelector()	通过css选择器获取元素，返回匹配元素
fn querySelectorAll()	通过css选择器获取元素，返回类数组集合
pro parentNode	获取父级节点

DOM案例（留言板）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .container {
            width: 800px;
            margin: 0 auto;
        }

        header {
            padding: 30px;
            background-color: lightgray;
        }

        input {
            background-color: transparent;
            border: 0;
            outline: 0;
            width: 92%;
            height: 36px;
            line-height: 36px;
            display: block;
            margin-left: 4%;
        }

        header>div {
            width: 80%;
            height: 36px;
            background-color: #efefef;
            border-radius: 4px;
            margin: 0 auto 40px;
        }

        #submit {
            width: 40%;
            margin-top: 40px;
            line-height: 36px;
            text-align: center;
        }

        #submit:hover,
        .del:hover {
            cursor: pointer;
        }

        ul {
            margin-top: 40px;

        }

        li {
            height: 60x;
            margin: 10px;
        }

        li p {
            height: 30px;
        }

        li p .nick,
        li p .message {
            float: left;
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
        }

        li p .time,
        li p .del {
            float: right;
            height: 30px;
            line-height: 30px;
            margin-right: 10px;
        }

        .up {
            background-color: lightgray;
        }

        .down {
            background-color: lightseagreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div>
                <input id="nick" placeholder="请输入昵称" type="text">

            </div>
            <div>
                <input id="message" placeholder="请输入留言" type="text">

            </div>
            <div id="submit">提交</div>
        </header>
        <ul>
            <!-- <li>
                <p class="up">
                    <span class="nick"></span>
                    <span class="time">2021-1-1 12:00:12</span>
                </p>
                <p class="down">
                    <span class="message">hello world</span>
                    <span class="del">删除</span>
                </p>
            </li> -->
        </ul>
    </div>
</body>
<script>
    //获取标签
    var iptNick = document.getElementById("nick");
    var iptMessage = document.getElementById("message");
    var ul = document.querySelector("ul");
    var dSub = document.getElementById("submit");




    dSub.onclick = function () {
        // 先判断输入框是否有内容
        if (iptNick.value === "" || iptMessage.value === "") {
            alert("昵称或留言不能为空");
            return;
        }
        // 创建 li标签并配置Li
        var li = document.createElement("li");
        li.innerHTML = `
                <p class="up">
                    <span class="nick">${iptNick.value}</span>
                    <span class="time">${getNowTime()}</span>
                </p>
                <p class="down">
                    <span class="message">${iptMessage.value}</span>
                    <span class="del">删除</span>
                </p>
        `
        
        //将li添加到ul
        if(ul.children.length === 0){
            ul.appendChild(li);
        }else{
            ul.insertBefore(li,ul.children[0]);
        }
        //输入框内容置空
        iptNick.value = "";
        iptMessage.value = "";
        //删除内容
        var spanDel = li.getElementsByClassName("del")[0];
        spanDel.onclick = function(){
            ul.removeChild(this.parentNode.parentNode);
        }
    }

    function getNowTime(){
        var date = new Date();
        var Y = date.getFullYear();
        var M = date.getMonth()+1;
        var D = date.getDate();

        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();

        return [Y,M,D].join("-") + " " + [h,m,s].join(":");
    }
</script>

</html>