js的交互

最新推荐文章于 2023-02-24 23:37:16 发布

李℘⸙⁵²⁰

最新推荐文章于 2023-02-24 23:37:16 发布

阅读量120

点赞数

文章标签： javascript 交互前端

本文链接：https://blog.csdn.net/weixin_67279162/article/details/127290136

版权

交互步骤：找对应的标签，添加事件，事件反馈

获取标签

通过id名获取

document.getElementById("id名");
适合：适合单个标签获取
<body>

<div class="box" id="wrap">这是div标签</div>
<script>
1.通过id名获取 document.getElementById("id名");
var oDiv = document.getElementById("wrap");
console.log(oDiv);
</script>
</body>

通过类名获取

document.getElementsByClassName("class名字") 获取整个文档下的对应标签
父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签

注意：通过类名获取的是元素集合获取元素集合中具体某一个元素需要加下标元素集合[下标]

注意：元素集合只有一个元素，也要通过下标的形式获取
<script>
2.通过类名获取
1 document.getElementsByClassName("class名字") 获取整个文档下的对应标签
var oDiv = document.getElementsByClassName("box");
console.log(oDiv);//HTMLCollection(3) 元素集合
获取元素集合中的具体某一个标签语法元素集合[下标]
console.log(oDiv[0]);
console.log(oDiv[2]);
2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签
//先获取父元素通过class类名
var oUl = document.getElementsByClassName("list");
console.log(oUl[0]);//元素集合中哪怕只有一个也有通过下标的形式获取
获取ul下的box
var list = oUl[0].getElementsByClassName("box");
console.log(list);
</script>

通过标签名获取

document.getElementsByTagName("标签名") 获取整个文档下的对应标签
父元素.getElementsByTagName("标签名") 获取父元素下对应的标签

注意：通过标签名获取的是元素集合获取元素集合中具体某一个元素需要加下标元素集合[下标]

注意：元素集合只有一个元素，也要通过下标的形式获取

鼠标事件

添加事件
元素.事件类型 = function(){ 要做什么事 }

鼠标事件类型
onclick 鼠标左键单击
ondblclick 鼠标双击
onmouseover/onmouseenter 鼠标移入
onmouseout/onmouseleave 鼠标移出
onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标抬起
oncontextmenu 鼠标右键显示菜单
1.获取元素
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv);
2.鼠标单击 onclick
oDiv.onclick = function () {
console.log("单击");
}
3.鼠标双击 ondblclick
oDiv.ondblclick = function () {
console.log("双击");
}
4.鼠标移入 onmouseover
oDiv.onmouseover = function () {
console.log("移入");
}
5.鼠标移动 onmousemove
oDiv.onmousemove = function () {
console.log("移动");
}
6.鼠标移出 onmouseout
oDiv.onmouseout = function () {
console.log("移出");
}
7.鼠标按下 onmousedown
oDiv.onmousedown = function () {
console.log("按下");
}
8.鼠标抬起 onmouseup
oDiv.onmouseup = function () {
console.log("抬起");
}
9.鼠标右键显示菜单
oDiv.oncontextmenu = function () {
console.log("右击显示菜单项");
}
10.onmouseenter onmouseleavae 移入移出
oDiv.onmouseenter = function () {
console.log("移入1");
}
oDiv.onmouseleave = function () {
console.log("移出1");
}
```

## 3.操作内容

- 标签分为：闭合标签和表单元素两种

### 3.1闭合标签

- 获取：元素.innerHTML 元素.innerText
- 设置：元素.innerHTML = 值元素.innerText = 值

```js
<script>
var oDiv = document.getElementsByTagName("div")[0];
// 1.闭合标签的内容获取及设置
// 1-1获取元素.innerHTML 元素.innerText
console.log(oDiv.innerHTML);//这是一个div标签
console.log(oDiv.innerText);//这是一个div标签
// 1-2设置元素.innerHTML = 值元素.innerText = 值重写之前的内容
oDiv.innerHTML = "这是一个新的文本内容";
oDiv.innerText = 123;
/*
innerHTML和innerText的区别?
相同点：都是重写覆盖闭合标签上的原有内容
不同点：innerHTML可以识别标签 innerText不识别标签
*/
// 1-3 区别
oDiv.innerHTML = "<b>456</b>";//innerHTML可以识别标签
oDiv.innerText = "<i>098765</i>";//innerText不识别标签

// 1-4 在原有的文本内容上追加内容字符串数据类型遇到+ 是拼接
// 原有的内容 + 新的值
oDiv.innerHTML = oDiv.innerText + "123";
</script>
```

==面试题： innerHTML和innerText的区别?==

```js
相同点：都是重写覆盖闭合标签上的原有内容
不同点：innerHTML可以识别标签 innerText不识别标签
```

李℘⸙⁵²⁰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的交互

2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签。3.2 父元素.getElementsByTagName("标签名") 获取父元素下对应的标签。document.getElementsByTagName("标签名") 获取整个文档下的对应标签。父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签。注意：通过标签名获取的是元素集合获取元素集合中具体某一个元素需要加下标元素集合[下标]
复制链接

扫一扫