Web前端开发（HTML5+CSS3+JavaScript） 课件 第10章 DOM(1).pptx
Web前端基础技术;;HTMLDOM是HTMLDocumentObjectModel(文档对象模型)的缩写，是HTML的标准对象模型和编程接口。;编程思路：获取对象的属性；设置对象的属性；调用对象的方法。;二、事件;三、对象查询方法;四、事件处理方式：1）内联方式；2）属性方式；3）方法方式;script
//自定义弹出对话框函数
functionmyAlert(){
alert(你好！JS!)
}
//方法2：查询对象，使用属性方式关联事件
varbt2=document.getElementById(bt2)
//bt2对象触发click事件时，调用函数
bt2.onclick=myAlert//函数名
//方法3：查询对象，使用方法方式关联事件
//这种方式可移除事件
varbt3=document.getElementById(bt3)
bt3.addEventListener(click,myAlert)
/script;event：事件对象；包含事件触发时的信息，其target属性代表触发事件的对象
this：拥有该函数的对象，与event.target属性相同，根据需要使用其中之一；;script
//当需要传递自定义参数时，使用;可以传递自定义参数
functiongetId(ev,obj,msg){
alert(ev.target.id+,+obj.id+,+msg)
}
//event代表触发的时间对象，this代表调用该函数的对象（bt2）
varbt2=document.getElementById(bt2)
bt2.onclick=function(){
alert(event.target.id+,+this.id)
}
//event代表触发的时间对象，this代表调用该函数的对象(bt3)
varbt3=document.getElementById(bt3)
bt3.addEventListener(click,function(){
alert(event.target.id+,+this.id)
})
/script;以下以getElementById查询元素为例，介绍如何获取或设置对象的属性;5.1文本属性：HTML标记内容的常用文本内容属性：innerText/innerHTML/outerHTML;script
functiongetTag(){
vardiv=document.getElementById(div)
console.log(div.innerText)
console.log(div.innerHTML)
console.log(div.outerHTML)
}
/script;5.2样式属性style;functionchangeStyle(){
vardiv1=document.getElementById(div1)
div1.style.backgroundColor=red
div1.style.borderRadius=50%
};5.3添加/删除样式类;script
??varshape=document.getElementById(shape)
??functiontoggle(){
????if(shape.classList.contains(rect)){
??????shape.classList.remove(rect)
??????shape.classList.add(circle)
????}
????else{
??????shape.classList.remove(circle)
??????shape.classList.add(rect)?????
????}
??}
/script;5.4表单元素属性;5.5获取/设置表单元素属性，结合getElementsByName方法使用;script
varsex=document.getElementsByName(sex)
varhobby=document.getElementsByName(hobby)