js中的DOM-3-操作元素1(初学)

最新推荐文章于 2024-07-01 16:12:06 发布

chonga_

最新推荐文章于 2024-07-01 16:12:06 发布

阅读量184

点赞数

分类专栏： js基础-2 文章标签： javascript html5 css

本文链接：https://blog.csdn.net/chonga_/article/details/120073228

版权

js基础-2 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。注：以下都是属性

一、改变元素内容

element.innerText 从起始位置到终止位置的内容，但它不识别html标签(如<strong>、等)，同时空格和换行也会去掉

（不绑定事件也可以直接处理程序，即一刷新就变化内容，详细看 js中的DOM-2-事件基础）

2.element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
（使用居多）

注意：innerText本就会去掉标签，但<strong>↑是因为在引号‘’里，所以不会去除。

两个属性可读写 (可理解为：innerText读取的是代码运行出来的内容
而 innerHTML读取的是代码)

二、常用元素的属性操作

通过操作元素来修改元素的属性
元素.什么属性=“ （给个值） ”; 即完成相应的赋值操作

案例：分时显示不同图片，显示不同问候语
根据不同时间，也蛮显示不同图片，同时显示不同的问候语。

如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。

案例分析：

根据系统不同时间来判断，所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片，并且根据时间修改图片，即用操作元素进行修改图片即可
需要一个div元素，来显示不同问候语，也用操作元素进行修改元素内容即可

三、表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

.1 value、disabled

文本框里的内容就不能再用innerText等来更改了，而是根据表单专门的属性 value 进行更改
要想只可button点击一次，则用 disabled(被禁用的) xxx.disabled = true;

2.type

显示密码：点击按钮将密码框转换为文本框，即可查看密码明文
分析：
（一个按钮有两个状态，点击一次，切换为文本框；再点一次，切换回密码框）
(算法：利用一个flag变量，来判断flag的值，
如果是1就切换为文本框，flag设置为0，
如果是0就切换为密码框，flag设置为1)
(之后只要再遇到一个按钮可以点多次的话即可用该算法)

var flag = 0;
        img.onclick = function () {
            //点击了一次后 flag一定要变化
            if (flag == 0) {
                input.type = 'text';
                img.src = "../jsimg/密码可见.png";
                flag = 1; // 赋值操作
            } else {
                input.type = 'password';
                img.src = "../jsimg/密码不可见.png";
                flag = 0;
            }

        }

四、样式属性的操作

可以通过js修改元素的大小、颜色、位置等样式

element.style.xxx 行内样式操作(若修改的比较少即可用此方式)
element.className.xxx 类名样式操作(若修改样式多，可用次方式)

element.style.xxx 行内样式操作(若修改的比较少即可用此方式)↓

js改的内部样式会加到行内样式里去↓
(所以当内嵌样式与js的样式冲突，会以js样式为主)

2.隐藏广告、二维码等

element.style.display="none"

<style>
        div {
            position: relative;
            width: 100px;
            height: 100px;
        }

        #ma {
            position: absolute;
            width: 75px;
            height: 100px;
            left: 15px;
            bottom: 1px;

        }

        #close {
            width: 25px;
            height: 25px;
            position: absolute;
        }

        #close:hover {
            cursor: pointer;
        }
    </style>

</head>

<body>
    <div id="box">
        <img src="../jsimg/叉，关闭，退出.png" alt="" id="close">
        <!-- <i id="close">X</i> -->
        <img src="../jsimg/二维码.png" alt="" id="ma">
        <script>
            var cha = document.querySelector('#close');
            var box = document.querySelector('#box');
            cha.onclick = function () {
                box.style.display = 'none';
            }
        </script>
    </div>

</body>

3.利用for循环设置一组元素的精灵图

让索引号乘以 44 就是每个li的背景y坐标 ↑

(这里是精灵图移动，不是小框框移动，所以是负数，精灵图向上移动)【向上为负，向下为正】

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(../jsimg/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class='box'>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            //让索引号乘以 44 就是每个li的背景y坐标 
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

4.显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。(淘宝、京东等搜索栏上均有该内容)

表单事件：onfocus 获得焦点 onblur 失去焦点
如果获得焦点，判断表单里的内容是否为默认文字，
如果是默认文字，就清空表单内容

<style>
        input {
            color: grey;
        }
    </style>
</head>

<body>
    <input type="text" value="手机" id="in">
    <script>
        var input = document.getElementById('in');
        //获得焦点时
        input.onfocus = function () {
            if (this.value === '手机') {
                this.value = '';
            }
            //获得焦点需要把文本框里的文字变黑
            this.style.color = '#333';
        }
        //失去焦点时
        input.onblur = function () {
            if (this.value === '') {
                this.value = '手机';
            }
            //失去焦点需要把文本框里的文字变浅
            this.style.color = 'grey';
        }
    </script>
</body>