获取dom
document.getElementsByClassName ( “class”);
document.getElementById( “id” )
document.getElementsByName(" name");
document.getElementsByTagName(“TagName”);
ocument.querySelector(".btnlist");
document.querySelectorAll("#btn");
修改属性
ele.style.syleName=styleValue
.获取对象的属性
btn1[0].style.height)
.js获取非行内样式属性
window.getComputedStyle(btn1[0]).width
innerHTML
语法: ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML（获取标签的内容）
语法: ele.innerHTML=" html”
for(i=0,len=lis.length;i<len;i++){
console.log(lis[i].innerHTML);
lis[i].innerHTML =lis[i].innerHTML+'程序';
//className 返回ele元素的class属性
lis[1].className ="current"; //className是重新设置类，替换元素本身的class
}
dom 属性设置与获取
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Dom获取属性getAttribute</title>
</head>
<body>
<p id="text" class="text2" align="center" data-type="title" >文本</p>
<input type="text" name="user" id="user" value="user" vaildata="user2">
<script>
//获取属性 getAttribute
var p=document.getElementById("text"); // 获取p标签的内容
console.log(p.id); // text
console.log(p.align); // center
console.log(p.className ); // text2 //class的获取使用className
console.log(p.getAttribute("data-type") ); // title
console.log(p.getAttribute("class") ); // text2
var input=document.getElementById("user") ;
console.log(input.id); // user
console.log(input.getAttribute ("vaildata")); // user2
//设置属性 setAttribute
//给p设置一个data-color 属性
p.setAttribute("data-color","red");
//给p设置一个irland 属性
input.setAttribute("irland","false");
//删除属性 removeAttribute
//给p删除align属性
p.removeAttribute("align");
//给input删除name属性
input.removeAttribute("name");
</script>
</body>
</html>
Dom的HTML事件
DOM的鼠标事件
onload :页面加载时触发
onclick :鼠标点击时触发
onmouseover :鼠标滑过时触发
onmouseout :鼠标离开时触发
onfocus :获得焦点时触发 ,事件用于：
input标签type为text、password; textarea;
onblur :失去焦点时触发
onchange：域的内容改变时发生，一般作用于select或checkbox或radio
onsubmit:表单中的确认按钮被点击时发生：不是加在按钮上，而是在表单上（from）。
onmousedown : 鼠标按钮在元素上按下时触发.
onmousemove :在鼠标指针移动时发生
onmouseup :在元素上松开鼠标按钮时触发
关于this指向
在事件触发的函数中, this是对该DOM对象的引用。
键盘事件
onkeydown(键盘按下)
onkeyup(键盘抬起)
onkeypress(按键事
表单事件
onfocus(获得焦点)
onblur（失去焦点）
浏览器事件
window事件 ：
onload（加载完成事件）
onerror（报错事件）
onresize :当调整浏览器窗口的大小时触发
onscroll :(滑动事件)拖动滚动条滚动时触发
触屏事件
touch（触屏）
touchstart （开始触屏 ）
touchmove（触屏移动）
touchend(触屏结束)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML事件</title>
<style>
.btn{
width:140px;
height:30px;
line-height: 30px;
font-size:14px;
text-align: center;
background-color: #7d83ff;
color:#fff;
border-radius: 5px;
margin-top:30px;
cursor: pointer;
}
</style>
</head>
<body>
<!--onclick:鼠标滑过时触发-->
<input type="button " value="弹 出" onclick=" alert('我是一个按钮')">；
<!--onmouseover:鼠标滑过调用onmouseover函数--> <!--onmouseout :鼠标离开时触发-->
<div id="btn" class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#0f0')">
开始</div>
<div id="btn" class="btn" onmouseover="mouseoverFn(this,'pink')" onmouseout="mouseoutFn(this,'#ff0')">
结束</div>
<script>
//传参 onmouseover="mouseoverFn(this,'#0f0')" 给 mouseoverFn(btn,bgColor)传参
function mouseoverFn(btn,bgColor){
//鼠标滑过，背景变为红色
btn.style.background=bgColor ;
}
//传参 onmouseout="mouseoutFn(this,'#0f0')" 给 mouseoutFn(btn,bgColor)传参
function mouseoutFn(btn,bgColor){
//鼠标滑过，背景变为#00f
btn.style.background=bgColor;
}
/* 如何给dom元素添加事件
1.常规添加 直接在标签上添加事件
*/
function btn1(a){
console.log(a);
}
/*2.动态给dom添加事件*/
var btn =document.getElementById ("btn2");
btn.onmouseover=function(){
btn.style.background ="red";
};
btn.onmouseout=function(){
btn.style.background =" buttonface";
};
btn.onclick =showbtn; //不能加小括号
function showbtn(){
console.log(2);
}
/*var btn3 =document.getElementsByClassName("btn_3");
btn3[0].onclick=function(){
console.log(3);
}*/
//事件的监听
//匿名函数
/* var btn3=document.getElementById ("btn3");
btn3.addEventListener("click",function (){
console.log(3);
});*/
//自定义函数
btn3.addEventListener("click",minibtn);
function minibtn(){
console.log(3);
}
var squ =document.getElementById ("black");
</script>
</body>
</html>
网友评论