通过id,class,标签名和css选择器获取元素的方法--2018年09月15日23时43分 - 每日作业

首页 > 博客列表 > 通过id,class,标签名和css选择器获取元素的方法--2018年09月15日23时43分

博主信息

博文 38

粉丝 1

访问量 25217

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例演示 id,class,标签和css选择器获取元素的方法</title>
</head>
<body>

<ul id="lists">
    <li class="class1"></li>
    <li class="green"></li>
    <li class="green"></li>
</ul>

<script>

    //通过id获取元素
    let id = document.getElementById('lists');
    //通过class获取元素 第一个class元素
    let class1 = document.getElementsByClassName('class')[0]
    //通过标签名获取元素 第三个li元素
    let tagName = document.getElementsByTagName('li')[3];

    //通过css选择器来获取元素
    let green = document.querySelectorAll('.green')

</script>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2. 实战: 在线聊天机器人:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM实战:模拟机器人在线聊天</title>
    <style>

        div:nth-child(1) {
            width: 450px;
            height: 650px;
            background-color: lightblue;
            margin: 30px auto;
            color: #333;
            box-shadow: 2px 2px 2px #808080;
        }

        h2 {
            text-align: center;
            margin-bottom: -10px;
        }

        div:nth-child(2) {
            width: 400px;
            height: 500px;
            border: 4px double green;
            background-color: #efefef;
            margin: 20px auto 10px;

        }

        ul {
            list-style-type: none; 
            line-height: 2em;
            overflow: hidden;
            padding: 15px;

        }
        
        textarea {
            background-color: lightyellow;
            border: none;
            resize: none;
        }
        
        button:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>


<div>
    <h2>在线kefu</h2>
    <div>

        <ul>
            <li></li>
        </ul>
    </div>

    <table>
        <tr>
            <td align="right"><textarea name="text" cols="50" rows="4"></textarea></td>
            <td align="left"><button type="button">发送</button></td>
        </tr>
    </table>
</div>


<script>

    //获取页面相关元素
    let btn = document.getElementsByTagName('button')[0]
    let text = document.getElementsByTagName('textarea')[0];
    let list = document.getElementsByTagName('ul')[0];

    let sum = 0;

    //添加点击事件
    btn.onclick = function () {

        //用户内容发送到窗口

        if (text.value.length == 0) {
            alert("请说点东西吧")
            return false;
        }

        let userComment = text.value; //保存用户留言
        text.value = ''; //清空留言区

        //创建一个li
        let li = document.createElement('li');
        let userPic = '<img src="inc/boy.jpeg" width="30" style="border-radius: 50%" alt="">';
        li.innerHTML = userPic+':  '+ userComment;
        list.appendChild(li);
        sum++;

        setTimeout(function () {

            //定义留言模板

            let info = [
                '真烦人',
                'AAAA',
                'FFFF',
                '啊的广告',
            ]

            let tmp = info[Math.floor(Math.random()*3)];
            let reply = document.createElement('li')
            let kefuPic = '<img src="inc/gyy.jpg" width="30" style="border-radius: 50%" alt="">';
            reply.innerHTML = kefuPic+':  '+ '<span style="color:red">'+tmp+'</span>';
            list.appendChild(reply);
            sum++;

        },2000)

        //清空窗口

        if (sum > 10) {
            list.innerHTML = '';
            sum = 0; //清空计数器
        }

    }


</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：