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)