JS获取元素的方法及其基本应用——2018年9月14日

根据id、class、标签和css选择器来获取元素

（1）利用id获取元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据id选择元素</title>
</head>
<body>
<ul id="list">
    <li id="item1">列表项1</li>
    <li>列表项2</li>
    <li id="item2">列表项3</li>
    <li>列表项4</li>
    <li id="item3">列表项5</li>
</ul>

<script>
    //使用id选择元素
    let item1 = document.getElementById('item1');
    let item2 = document.getElementById('item2');
    let item3 = document.getElementById('item3');

    //设置元素样式
    item1.style.backgroundColor = 'lightblue';
    item2.style.backgroundColor = 'lightblue';
    item3.style.backgroundColor = 'lightblue';

    //如果需要用多个id来获取多个元素，可以构建一个函数
    function getElement(){
        let elements = {};//存储获取到的元素
        for (let i=0; i<arguments.length; i++){//arguments函数的参数数组
            let id = arguments[i]; //获取id
            let tmp = document.getElementById(id);
            //判断是否获取成功
            if (tmp === null){
                throw new Error('NO element with id：'+id);//在控制台 抛出异常对象
            }
            elements[id] = tmp;
        }
        return elements;//返回查询到的元素 对象字面量形式
    }

    let elements = getElement('item1','item2','item3');
    //遍历数组
    for (let key in elements){
        elements[key].style.backgroundColor = 'coral';
    }

</script>
</body>
</html>

运行实例 »

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

（2）利用标签获取元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据tagname获取元素</title>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
</ul>

<script>
    //获取所有li元素
    let lis = document.getElementsByTagName('li');
    for (let i=0; i<lis.length; i++){
        lis[i].style.backgroundColor = 'skyblue';
    }
</script>
</body>
</html>

运行实例 »

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

其实这些获取方法都基本一样，getElementsByClassName（）利用class属性值来获取，querySelectorAll（）则是传入 css选择器来获取元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据name属性来获取元素</title>
</head>
<body>
<!--拥有name属性的元素并不多 表单 图像 内联框架-->
<form action="" name="login">
    <input type="text" name="username">
    <input type="password" name="password">
    <button name="button">提交</button>
</form>


<script>
    //getElementsByName()返回一个节点列表，并不是一个元素
    let login = document.getElementsByName('login')[0];
    // console.log(login);
    login.style.backgroundColor = 'coral';
    //可以将属性值 作为document的属性来用 返回唯一的元素
    let login1 = document.login;
    login1.style.backgroundColor = 'blue';
    //表单快捷方式 forms 数组
    document.forms[0].style.backgroundColor = 'yellow';
    document.forms['login'].style.backgroundColor = 'red';
    document.forms.login.style.backgroundColor = 'green';
    //images  body link
    //js也支持css选择器来获取元素
    let text = document.querySelectorAll("form");
    text[0].style.backgroundColor = 'coral';
    let input = document.querySelector('form');//返回 满足条件的第一个
    input.style.backgroundColor = 'blue';
</script>
</body>
</html>

运行实例 »

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

在线***的案例

其基本的原理就是：用户在文本框输入信息，获取完输入的信息马上就把文本框清空，点击按钮把信息发送到上方的显示框，然后再发送预先准备的语句,当然这些准备的语句通过定时器来触发，代码如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线***系统</title>
    <style>
        div:first-child{
            margin: 15px auto;
            width: 400px;
            height: 630px;
            background: skyblue;
            color: #333333;
            box-shadow: 2px 2px 2px #636363;
            text-align: center;
        }
        h2{
            margin-bottom: 10px;}
        ul{
            list-style-type: none;
            border: 4px double greenyellow;
            width: 350px;
            height: 460px;
            margin: auto;
            background-color: white;
            padding: 10px 0px;
            overflow: hidden;
        }
        table{
            margin: 15px auto;}
        textarea{
            resize: none;}
        button{border:none;
            width: 50px;
            height:30px;}
        button:hover{
            background-color: coral;
            cursor: pointer;
        }
        li{
            margin: 0 10px;
            text-align: left;
            height: 30px;
            line-height: 30px;
            /*border: 1px solid red;*/
        }
    </style>
</head>
<body>
<div class="box">
    <h2>在线***</h2>
    <ul>
    </ul>
    <table>
        <tr>
            <td align="right"><textarea name="text" id="" cols="40" rows="4"></textarea></td>
            <td align="left"><button type="button">发送</button></td>
        </tr>
    </table>
<script>
    //获取按钮、li、文本元素
    let text = document.getElementsByName('text')[0];
    let btn = document.getElementsByTagName('button')[0];
    let ul = document.getElementsByTagName('ul')[0];
    let sum = 0; //计数器
    //给按钮添加点击事件
    btn.onclick = function(){
        //获取用户内容
        if (text.value.length ===0){
            alert('请输入内容');
            return false;// 停止执行
        }
        let content = text.value;
        text.value = '';//清空用户信息

        //创建一个新节点
        let li = document.createElement('li');
        let userPic = '<img src="inc/boy.jpeg" width="30" style="border-radius: 50%;vertical-align: middle">';
        li.innerHTML =  userPic+ '  ' + content;
        ul.appendChild(li);
        sum += 1;      //聊天记录自增1

        //设置定时器，2s后自动回复
        setTimeout(function () {
            let reply = [
                '真烦人,有话快说,别耽误我玩抖音',
                '除了退货,退款,咱们什么都可以聊',
                '说啥,本姑娘怎么听不懂呢?再说一遍',
                '在我方便的时候再回复你吧~~',
                '投诉我的人多了,你算老几~~~'
            ];
            let temp = reply[Math.floor(Math.random()*5 )];
            let replyText = document.createElement('li');
            replyText.setAttribute('style','text-align: right');
            let kefuPic = '<img src="inc/gyy.jpg" width="30" style="border-radius: 50%;vertical-align: middle;">';
            replyText.innerHTML = '<span style="color: yellow;">'+temp+'  '+ kefuPic+'</span>';
            ul.appendChild(replyText);
            sum += 1;
        },1500);

        if (sum > 10){
            sum = 0;
           setTimeout(function () {
               ul.innerHTML = '';
           },1500);
        }

    }

</script>
</div>
</body>
</html>

运行实例 »

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

总结：js用来获取元素的方法很类似，都是getElementsById/class name/tag name，不过要注意其中返回的是一个元素还是一个数组，有s或者all这些字眼的就是返回数组，反之则是返回一个元素。

同时innerHtml这个属性可以写入html代码，很方便代码的插入。

实例

实例

实例

实例

相关文章