首页 🍋Code,🥭笔记

Web API - DOM 第二节(操作元素)

1.常见的鼠标事件

1550734506084

2. 操作元素

​ JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)

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

1550735016756

示范:

<html>
  <head>
  </head>
  <body>
      <div>
<button>你好</button>
</div>
<p>time</p>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
var p = document.querySelector('p');
btn.onclick = function(){
    p.innerText = getDate();
}
function getDate() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var dates = date.getDate();
    var arr = ['周日','周一','周二','周三','周四','周五','周六']
    var day = date.getDay();
    var time = date.getHours();
    return '现在是' + year + '年' + month + '月' + dates + '日' + time + '时' + arr[day];
}
</script>
</body>

innerText和innerHTML的区别

  • 获取内容时的区别:

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

  • 设置内容时的区别:

​ innerText不会识别html,而innerHTML会识别

案例:

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是:</strong> 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是:</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

常用元素的属性操作

1550735556297

自写示范:

<html>
  <head>
  </head>
  <body>
<img src="https://gitee.com/lr787/img/raw/master/img/20210212172324.jpeg" width="px">
<button id = "cs">CSS</button>
<button id = "ht">HTML</button>
<script>
    var cs = document.getElementById('cs');
    var ht = document.getElementById('ht');
    var img = document.querySelector('img');
    cs.onclick = function () {
        img.src = "https://gitee.com/lr787/img/raw/master/img/20210212172324.jpeg"
        img.width = 500;
    }
    ht.onclick = function() {
        img.src = "https://gitee.com/lr787/img/raw/master/img/20210212172352.webp";
        img.width = 500;
    }
</script>
</body>
</html>

示范2:通过时间输出凌晨好,上午好,中午好,下午好,晚上好

<p id="saying">输出中。。。</p>
    <script>
        timing = new Date();
        hour = timing.getHours() //得到当前小时数
        var time = document.getElementById('saying');
        if (hour < 6) {
            time.innerHTML = "凌晨好!同学!"
        }else if (hour < 9 ){
            time.innerHTML = "早上好!同学"
        }else if (hour <12){
            time.innerHTML = "上午好,同学"
        }else if (hour < 14){
            time.innerHTML = "中午好,同学"
        }else if (hour < 17) {
            time.innerHTML = "下午好,同学"
        }else if (hour < 19){
            time.innerHTML = "傍晚好,同学"
        }else if (hour < 22) {
            time.innerHTML = "晚上好,同学"
        }else {
            time.innerHTML = "夜深了,同学学习要注意眼睛哦"
        }
    </script>
//此代码可以自行更改p标签的样式

表单元素的属性操作

1550736039005

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。

案例:

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

对上面代码的小解释:

image-20210214201413893




文章评论

目录