侧边栏壁纸
博主头像
MeowRain

  大家好,我是MeowRain,中文可读作喵雨,至于为什么起这个名字,其实是因为英文里的rain和我的名字有谐音字,哈哈😄,再一个就是我比较喜欢猫咪,也养着一只小猫咪(叫小喵,目前是我姐姐代养,自己太忙了顾不上照顾小猫咪)所以就叫MeowRain啦。

  • 累计撰写 168 篇文章
  • 累计创建 48 个标签
  • 累计收到 5 条评论

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

MeowRain
2021-07-31 / 0 评论 / 0 点赞 / 85 阅读 / 3,679 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2021-07-31,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

title: Web API - DOM 第二节(操作元素)
categories: 🥭笔记
tags: [dom,javascript]
date: 2021-02-14 23:43:59

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

0

评论区