JavaScript DOM–元素操作

当前位置:

首页 > temp > JavaScript教程 >

JavaScript DOM–元素操作

获取元素

根据 ID 获取元素

语法: document.getElementById(id)

<div id='time'>2020-01-09</div>

<script>
    var timer = document.getElementById('time');
    console.log(timer); // 根据 ID 获取
    // 查看里面的属性和方法
    console.dir(timer)
</script>

根据标签名获取元素

语法: document.getElementsByTagName('标签名')

<ul>
    <li>u1</li>
</ul>

<ol id="ol">
    <li>ol</li>
</ol>

<script>
    // 根据元素名获取
    var lis = document.getElementsByTagName('li');
    console.log(lis);  // HTMLCollection(2) [li, li] 返回所有的 ol和ul 的 li 元素 是复数

    // 可以通过ele 继续获取元素名
    var ol_ele = document.getElementById('ol');
    var ol_lis = ol_ele.getElementsByTagName('li');
    console.log(ol_lis);  // ol 下所有的li

</script>

根据类名获取元素 H5 新增

语法: document.getElementsByClassName('类名')

<div class="cla"></div>
<script>
    var cla = document.getElementsByClassName('cla');  // HTMLCollection [div.cla] 返回对象集合，需要使用对象 得取第一个元素，第二个是length
    console.log(cla);
</script>

选择器方式获取元素 H5新增

语法: 
document.querySelector('选择器')
document.querySelectorAll('选择器')

<div class="cla"></div>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var cla = document.querySelector('.cla'); // 返回对象元素， 如果是class 则写.类名，id 则写#id
    console.log(cla);

    var lis = document.querySelectorAll('li');  // 返回所有对象集合
    console.log(lis);
</script>

获取特殊元素(body, html)

document.body;  // body
document.documentElement; // html

事件

事件三要素

事件源: 触发事件的元素
事件类型: 什么事件例如click点击事件
事件处理程序: 事件处理函数

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过
onmouseout	鼠标离开
onfocus	获取鼠标焦点
onblur	失去鼠标焦点
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

改变元素内容(设置，获取)

ele.innerText
ele.innerHtml

区别:

获取内容时: innerText去掉html标签，同时空格和换行也去掉, innerHtml 保留html标签，空格和换行
设置内容时: innerText不会识别html，而innerHTML会识别

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>

    <script>
        var div = document.querySelector('div');
        div.innerHTML = '<strong>今天是：</strong>';  // 今天是：
        div.innerText = '<strong>今天是：</strong>';  //  <strong>今天是：</strong>

        var p = document.querySelector('p');
        console.log(p.innerText); // 我是文字 123
        console.log(p.innerHTML);
        /*

        我是文字
        <span>123</span>*/

    </script>

</body>

元素属性操作

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

<script>
    var ldh = document.querySelector('#ldh');
    var zxy = document.querySelector('#zxy');
    var img = document.querySelector('img');

    // 获取元素属性的值
    console.log(img.alt); // 刘德华

    // 设置元素属性值
    ldh.onclick = function () {
        img.src = 'images/ldh.jpg';
        img.title = '刘德华666'
    };
    zxy.onclick = function () {
        img.src = 'images/zxy.jpg';
        img.title = '张学友'
    }
</script>

表单元素属性

设置表单属性值

元素对象.属性名

设置属性值

元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');

        btn.onclick = function () {
            // 获取表单属性值
            console.log(input.value); // 输入内容

            // 修改表达属性值
            input.value = '被修改了';
            this.disabled = true;  // 禁用点击按钮
        }
    </script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码显示案例</title>

    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>

    <script>
        // 获取元素
        var eye = document.querySelector('#eye');
        var input = document.querySelector('input');
        // 设置一个变量，后面判断密码显示和隐藏用
        var falg = 0;
        eye.onclick = function () {
            if (falg == 0) {
                this.src = 'images/open.png';
                input.type = 'text'; // 改变文本type属性
                falg = 1;
            }else {
                this.src = 'images/close.png';
                input.type = 'password';
                falg = 0;
            }
        }
    </script>

</body>
</html>

样式属性

style属性改变

元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值

<body>
    <div></div>
    <script>
       var div = document.querySelector('div');
       div.style.width = '200px';
       div.style.backgroundColor = 'red';
    </script>
</body>

操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className

className会覆盖掉原先的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>

    <script>
        var close = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        close.onclick = function () {
            box.style.display = 'none';
        }

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        input {
            color: #999;
        }
    </style>

</head>
<body>
     <input type="text" value="手机">

    <script>
        var input = document.querySelector('input');
        input.onfocus = function () {
            if (this.value === '手机') {
                this.value = ''; // 改变元素属性值
            }
            this.style.color = '#333'  // 样式属性改变
        };
        input.onblur = function () {
            if (this.value === '') {
                this.value = '手机'
            }
            this.style.color = '#333'
        }

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }

        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>


</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>

    <script>
        // 获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');

        // 注册事件，失去焦点事件
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        };




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

自定义属性

获取属性名

ele.属性名 (自带属性)
ele.getAttribute(自定义属性名)

<body>
    <div id="demo" index="1
      
   共2页: 
上一页
1
2
下一页

栏目列表

首页 > temp > JavaScript教程 >

JavaScript DOM–元素操作

获取元素

根据 ID 获取元素

根据标签名获取元素

根据类名获取元素 H5 新增

选择器方式获取元素 H5新增

获取特殊元素(body, html)

事件

事件三要素

常见的鼠标事件

操作元素

改变元素内容(设置，获取)

元素属性操作

表单元素属性

样式属性

自定义属性