js操作元素

最新推荐文章于 2024-04-19 13:19:04 发布

幻墨如烟u

最新推荐文章于 2024-04-19 13:19:04 发布

阅读量84

点赞数

分类专栏：笔记3 文章标签： vue.js

本文链接：https://blog.csdn.net/sjs1766349405/article/details/120575517

版权

笔记3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.改变元素内容（获取或设置）

2.innerText改变元素内容

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }
        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
    </script>
</body>

3. innerText和innerHTML的区别

获取内容时的区别：

innerText会去除空格和换行，而innerHTML会保留空格和换行

设置内容时的区别：

innerText不会识别html，而innerHTML会识别

<body>
    <div id="box">我是div</div>
    <script>
       var box = document.getElementById("box");
       box.innerHTML = "<span>我是郑小龙</span>";
       box.innerText = "<span>我是周泽阳</span>";
    </script>
</body>

备注：
第一种写法是吧span标签解析成标签
第二种写法span标签会解析成文本内容

4.常用元素的属性操作

img标签的src属性 title属性

a标签的href属性等都可以通过下面的语法更改

获取属性的值