1:修改属性
语法: ele.style.syleName=styleValue
功能：设置ele元素的CSS样式
2.获取对象的属性
console.log(btn1[0].style.height); //40px
3.js获取非行内样式属性
console.log(window.getComputedStyle(btn1[0]).width);
< body>
< button id="btn">点我< /button>
< script> btn1 =d ocument.getElementsByTagName(" button");
/*修改属性 -----js操作的属性都是行内样式 (设置或者获取)*/
btn1[0].style.background="pink";
btn1[0].style.height="40px";
//获取对象的属性
console.log(btn1[0].style.height); //40px
//js获取非行内样式属性
console.log(window.getComputedStyle(btn1[0]).width);
< /script>
< /body>
innerHTML
语法: ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML（获取标签的内容）
语法: ele.innerHTML=" html”
功能:设置ele元素开始和结束标签之间的HTML内容为html说明：
注：
不能使用”-”连字符形式font-size
使用驼峰命名形式：fontSize
className
语法: ele.className
功能:返回ele元素的class属性
注：
1.className是重新设置类，替换元素本身的class
2.如果元素有2个以上的class属性值,那么获取这个元素的className属性时,会将它的class属性值都打印出来
< body >
< div class="box" id="box">
元素
< /div>
< ul id="list">
< li>< i>前端开发
< li class="on"> java开发
< li>UI设计师< /li>
< /ul>
< script>
//innerHTML 获取标签的内容
var lis=document.getElementById("list").getElementsByTagName("li") ; //数组形式
console.log(lis);
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
}
console.log(document.getElementById("box").className );
< /script>
< /body >
DOM属性设置与获取
获取属性
语法: ele.getAttribute( “attribute” )
功能:获取ele元素的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要获取的html属性（如：id 、type）
设置属性
语法: ele.setAttribute(”attribute”,value)
功能:在ele元素上设置属性
说明:
1、ele是 要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
删除属性
语法: ele.removeAttribute(”attribute" )
功能:删除ele,上的attribute属性
说明:
1、ele是要操作的dom对象
2、attribute是要删除的属性名称
< 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>
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(触屏结束)
