JavaScript BOM-CSDN博客

本文链接：https://blog.csdn.net/weixin_65768991/article/details/123241200

JavaScript.BOM编程

HTML元素常用事件和常用属性

事件
onclick 点击事件
ondblclick 双击事件

<button onclick="fn1('返回')">返回</button>
<button onclick="fn1('开始')">开始</button>
//onclick  点击事件要用button按钮并且要写自己的function函数方法
//ondblclick  双击事件与onclick  点击事件类似

onfocus 获得焦点事件
onblur 失去焦点事件

   //只要碰到foreach循环 不能用var
        //使用let(定义局部变量)
        for(let i of is){
            //给元素的获得焦点事件赋值
            i.onfocus=()=>{
                i.value=""
            }
            //给元素的失去焦点事件赋值
            i.onblur=()=>{
                i.value="啊吧啊吧"
            }
        }
// onfocus  获得焦点事件 onblur   失去焦点事件
//用于获取元素后同样也要写function

onmouseover 鼠标移入
onmouseout 鼠标移出
属性
textContent 标签的文本内容(定义的标签不生效)
innerHTML 标签中的html内容(标签生效)
value 元素的值(适用具备value属性的元素)
checked 是否被选中(单选框，多选框）
style 标签中的属性(用于设置样式)

获取HTML元素

getElementByld() 安元素的ID名称来访问，
返回对拥有指定id的第一个对象的引用；
一般用简写ID名直接操作

//用document.getElementById()获取元素，但可以简写直接写元素ID
//所以先给元素取ID
<div id="d"></div>
//然后就可直接操作，省去了用document.getElementById()获取元素  
d.style.backgroundImage='url("cions/wx'+(a%71)+'.jpg")'

getElementsByName()按元素的name名称来访问
返回带有指定名称的对象的集合

 var d=document.getElementsByName("d1")
 //获取lname名称为d1的元素

getElementsByTagName()按标签来访问
返回带有指定标签名的对象的集合

 var ds=document.getElementsByTagName("div")
 //这样就获取了标签名为div的标签们
 //所以getElementsByTagName()返回的是集合
 //因为是集合所以操作ds时ds后要加[i]并且要遍历
  for(var i=0;i<ds.length;i++){
            ds[i].style.background="pink"
        }

getElementByClassName()按元素类名来访问
返回指定类名的一个对象或多个对象(集合)

 var ds = document.getElementsByClassName("a")
        for(var i of ds){
            i.style.background="yellow"
        }
//这里getElementByClassName()精准找出元素类名为a元素

元素的显示(style)

display

none 不显示也不占页面的空间
block 以块状元素显示块状会跨行
inline 以行内元素显示一行内
inline—block 以行快显示

 function fn3(id) {
        //根据id拿出对应的元素
        var li=document.getElementById(id)
        //将对应元素设置为不显示
        if(li.style.display==="none"){
            li.style.display="block"
        }else{
            li.style.display="none"
        }
    }

visibility

visible 可见
hidden 不可见会占页面空间

 if(li.style.display==="visible"){
            li.style.display="hidden"
        }else{
            li.style.display="visible"
        }
    }

opacity

用于控制元素透明度
范围 0~1之间的值

if(d1.style.opacity==0){
            d1.style.opacity=1
        }else{
            d1.style.opacity=0
        }

图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<style>
			div{
				width: 400px;
				height: 400px;
				background: url("cions/wx1.jpg") center/cover;
			}
		</style>
	</head>
	<body>
		<div id="d"></div>
		<!--要自己建一个存放图片的文件夹 “cions”是我建的文件夹  -->
		<img id="m1" src="cions/wx1.jpg" alt="" width="200px">
		<button onclick="fn1()">点击更改</button>
		<script>
		var a=1;
		//箭头函数（）=>{}是正常函数function (){}的简写
			setInterval(()=>{
				d.style.backgroundImage='url("cions/wx'+(a%71)+'.jpg")'
				a++
			},1000)
			//点击更改的操作
			function fn1(){
				m1.src="cions/wx"+(a%71)+".jpg"
				a++
			}
		</script>
	</body>
</html>