JavaScript总结 05

最新推荐文章于 2023-08-03 15:09:43 发布

zhiying_08

最新推荐文章于 2023-08-03 15:09:43 发布

阅读量423

点赞数

本文链接：https://blog.csdn.net/zhiying_08/article/details/78462485

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.获取元素</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="d1"></div>
<p class="p1">段落1</p>
<p class="p1">段落2</p>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script type="text/javascript">
/*获取元素的方式:
* 方式1:document.getElementById()
* 获取文档中指定id名的标签元素
* 调用对象只能是文档document
*/
//获取元素
var oDiv=document.getElementById("d1");
console.log(oDiv)
//通过js获取的标签元素都是对象元素
// alert(oDiv);

//绑定事件:
//1.添加事件属性 on+事件名
//onclick 当鼠标点击时
/*
* ele.on+事件名=function(){
*
* };
* function 事件处理函数
*/
oDiv.οnclick=function(){
//通过元素对象的style属性设置其css样式
//通过js操作的是元素的行间样式
oDiv.style.backgroundColor="greenyellow"
};
/*方式2:document.getElementsByTagName("标签名")
* 获取指定标签名的所有标签元素
* 调用对象可以是除了document以外的标签对象
* 1.document调用获取的是网页文档中所有指定标签名的元素;
* 2.其他标签对象则获取该对象内对应的所有标签元素
* 该函数返回的是数组;
* 获取的数组个数可能是一个或多个
*/
var pobj= document.getElementsByTagName("p");
console.log(pobj)

//获取数组元素中的方式:数组名[下标] 下标从0开始
pobj[0].style.color="red"
/*方式3:document.getElementsByClassName("类名")
* 获取指定类名的所有标签元素
* 返回的是数组获取的数组个数可能是一个或多个
* **IE6.7.8不支持***
*/
var p1s= document.getElementsByClassName("p1");
console.log(p1s)

p1s[1].οnclick=function(){
p1s[1].style.color="cyan"
};
//获取第一个类名是box的元素内部的所有p元素
//获取类名box的元素

var boxdiv= document.getElementsByClassName("box")[0];
var pp= boxdiv.getElementsByTagName("p");
console.log(pp);
/*
* onmouseover 鼠标移入时
* onmouseout 鼠标移出时
*/
oDiv.οnmοuseοver=function(){
oDiv.style.backgroundColor="orange"
}
oDiv.οnmοuseοut=function(){
oDiv.style.backgroundColor="cyan"
}
/*function 定义函数
* function 函数名(参数){
* //功能代码
* }
*/

</script>
</body>

</html>

zhiying_08

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript总结 05

5.获取元素#d1{width: 100px;height: 100px;background: red;}段落1段落2123/*获取元素的方式:* 方式1:document.getElementById()* 获取文档中指定id名的标签元素* 调用对象只能是文档document*/
复制链接

扫一扫