Web API - DOM 第二节（操作元素）
Web API - DOM 第二节（操作元素）
meowrain
发布于 2021-04-22 16:05:12
发布于 2021-04-22 16:05:12
代码可运行
运行总次数：0
代码可运行
Web API - DOM 第二节（操作元素）
1.常见的鼠标事件
2. 操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）
改变元素内容（获取或设置）
示范：
<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>常用元素的属性操作
自写示范：
<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标签的样式表单元素的属性操作
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值 表单元素中有一些属性如：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>对上面代码的小解释：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021年02月14日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
