版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
Web前端基础技术CSSJSHTML第10章DOMContents目录DOM事件与事件处理元素查询元素的添加、修改和删除综合实例HTMLDOM是HTMLDocumentObjectModel(文档对象模型)的缩写，是HTML的标准对象模型和编程接口。当HTML文档被加载时，浏览器会将其解析为一个树状结构的DOM，DOM树中的每一个节点都代表一个HTML元素（对象），包括文本、属性，通过DOM接口，动态(实时)改变文档的内容。一、
什么是DOM执行HTML元素的增、删、查、改。改变页面中的所有HTML元素的固有属性，例如href、src、value等改变页面中的所有CSS样式属性：例如style和class编程思路：获取对象的属性；设置对象的属性；调用对象的方法。首先必须获取对象---对象查询，这样，你就可以：获取对象的属性，例如表单元素的值，HTML元素的style属性，例如宽度、高度或者，设置对象的属性，从而改变元素的内容和样式或者，调用对象的方法，添加/修改元素，及其内容、样式等问题：代码何时执行？用户对某个元素使用鼠标，或键盘操作时，将触发元素的事件，在触发元素事件时，执行代码。关键点：（1）处理常用事件，(2)查询对象，(3)执行操作（函数）。二、事件事件就是消息，是当用户在元素(对象)上执行了某些操作（鼠标、键盘）而触发的消息；程序通过捕获对象的消息来做出响应。
(1)鼠标常用事件click：鼠标单击事件dblclikc:鼠标双击事件mousedowm:鼠标按下事件mouseup：鼠标松开事件mouseover：鼠标悬停事件Mouseout：鼠标离开事件(2)文档加载事件load：文档加载完毕触发的事件。通常代码在文档加载完毕后执行。(3)表单常用事件change：表单元素输入或选择的内容发生变化时触发的事件，例如文本框输入和列表框选择发生改变。submit：表单提交时触发的事件注意：所有的事件名都是小写。三、对象查询方法要对元素进行操作(读/写其属性)，首先必须获取该元素(对象查询)。
常用查询接口方法（document对象的方法）：1.根据对象的ID查询：确定唯一的对象： getElementById(id)2.根据标记名查询：集合对象；getElementsByTagName(标记名)3.根据样式类名class进行查询：集合对象
getElementsByClassName(类名)4.根据对象的name查询：集合对象；getElementsByName(标记name属性)注意：这里的集合对象可以当做数组来使用四、事件处理方式：1）内联方式；2）属性方式；3）方法方式方式1.内联方式：直接在元素的标记中捕获事件，并调用系统函数或自定义函数，或者直接执行JS语句。方式2.属性方式：获取元素对象，为其事件属性关联处理函数，好处：代码与元素分离方式3.方法方式：使用事件监听器，使用对象的方法来添加事件处理函数
。示例：以单击按钮为例，弹出自定义对话框；结合getElementById方法为例。<h3>打开对话框</h3><buttonid="bt1"onclick="myAlert()">内联方式</button><buttonid="bt2">查询对象，使用对象的属性方式关联事件</button><buttonid="bt3">查询对象，使用方法方式，动态添加事件</button>方式1：内联方式<script>//自定义弹出对话框函数
functionmyAlert(){alert("你好！JS!")}
//方法2：查询对象，使用属性方式关联事件
varbt2=document.getElementById("bt2")
//bt2对象触发click事件时，调用函数
bt2.onclick=myAlert//函数名
//方法3：查询对象，使用方法方式关联事件//这种方式可移除事件
varbt3=document.getElementById("bt3")bt3.addEventListener("click",myAlert)</script>移除事件：对象.removeEventListener("事件名",已关联的函数名);方式2：对象事件属性方式方式3：对象方法方式event：事件对象；包含事件触发时的信息，其target属性代表触发事件的对象this：拥有该函数的对象，与event.target属性相同，根据需要使用其中之一；示例：单击html元素，获取元素的id属性；结合getElementById方法为例。<buttonid="bt1"onclick="getId(event,this,'hello!js!')">单击我，获取id属性值</button><buttonid="bt2">单击我，获取id属性值</button><buttonid="bt3">单击我，获取id属性值</button>讨论：关于事件参数，event和this<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>使用内联方式时，当需要获取触发事件的对象时，可以传递参数event，其属性target代表该对象；也可以传递this作为参数，代表对象本身，相当event.target属性值---触发事件的对象根据需要决定是否传递参数注意：匿名方式无法移除事件以下以getElementById查询元素为例，介绍如何获取或设置对象的属性标记及其内容样式属性样式类表单元素5.1文本属性：HTML标记内容的常用文本内容属性：innerText/innerHTML/outerHTML1.
innerText；-仅元素内所有文本内容2.
innerHTML：-标记内部所有的HTML子标记及其文本，不包含自身标记；3.
outerHTML：-标记自身及所有的HTML子标记及其文本代码分析：获取div标记的内容1.纯文字内容；2.标记包含的HTML内容；3.整个标记HTML内容五、获取/设置HTML属性-结合getElementById方法<divstyle="border:1pxsolidred;width:120px;"id="div"><p>段落文本</p><ahref="#">链接</a></div><buttononclick="getTag()">获取div标记内容</button><script>functiongetTag(){vardiv=document.getElementById("div")console.log(div.innerText)console.log(div.innerHTML)console.log(div.outerHTML)}</script>5.2样式属性style获取或设置HTML元素的内联样式属性：对象.style.样式属性名示例：改变div样式，使之成为红色背景的圆；获取div的边框、宽度样式属性<body>
<divid="div1"
style="border:1pxsolidblue;"></div>
<buttononclick="changeStyle()">改变样式，使之成为红色的圆</button>
<buttononclick="getStyle()">获取当前的边框样式</button>|
<buttononclick="getWH()">获取当前的宽度和高度</button></body><style>
#div1{
width:60px;height:60px;
background-color:gray;
}</style>functionchangeStyle(){vardiv1=document.getElementById("div1")div1.style.backgroundColor="red"div1.style.borderRadius="50%"}
functiongetStyle(){vardiv1=document.getElementById("div1")alert(div1.style.border)}functiongetWH(){vardiv1=document.getElementById("div1")//元素没有在style中设置宽度和高度
//varw=div1.style.width错误//varh=div1.style.height错误
//使用计算属性
varstyle=getComputedStyle(div1)varw=style.widthvarh=style.heightalert(w+","+h)}所有元素都有样式属性：style；使用规则：将连字符去掉，后每个单词首字母大写：obj.style.backgroundColor="颜色值"如果是使用内部样式表，这种方式无法获取样式值，此时需要使用计算样式方法：window.getComputedStyle(对象，”伪类名”)；只读；参数2通常为null。注意，只有内联样式的属性，或动态添加的样式，可以使用"style.属性名"的方式获取；5.3添加/删除样式类1.添加类:对象.classList.add("类名");2.删除类:对象.classList.remove("类名");3.是否含某个类:对象.classList.contains("类名")示例：使用类属性，单击时在正方形和圆之间切换
<divclass="shaperect"id="shape"onclick="toggle()"></div>
<style>
.shape{width:100px;height:100px;border:2pxsolidred;}
.rect{border-radius:0;}
.circle{border-radius:50%;}</style><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表单元素属性获取或设置表单元素的属性：对象.属性名文本框：对象.value属性示例：以文本框为例，获取输入的值请输入姓名：<inputid="user"/><br/>请输入密码：<inputid="pwd"/><br/><buttononclick="getInput()">获取文本框的值</button>结果为；<spanid="sp"></span><script>functiongetInput(){varuser=document.getElementById("user")varpwd=document.getElementById("pwd")varsp=document.getElementById("sp")
sp.innerText=user.value+","+pwd.value}</script>5.5获取/设置表单元素属性，结合getElementsByName方法使用根据name属性名查询,结果为集合对象，document.getElementsByName("name属性名")示例判断复选框是否被选中，显示选中元素的值选择性别：
<inputtype="radio"name="sex"value="男"/>男
<inputtype="radio"name="sex"value="女"/>女
<br/>
选择爱好：
<inputtype="checkbox"name="hobby"value="运动"/>运动
<inputtype="checkbox"name="hobby"value="看书"/>看书
<inputtype="checkbox"name="hobby"value="美食"/>美食
<br/><buttononclick="getSelect()">查看选择</button>
你的选择：<spanid="sp"></span><br/>单选按钮/复选框：对象.checked表示是否被选中；
对象.value表示该元素的值。
<script>varsex=document.getElementsByName("sex")varhobby=document.getElementsByName("hobby")varsp=document.getElementById("sp")varresult=""functiongetSelect(){result="性别："//单选
for(vari=0;i<sex.length;i++){if(sex[i].checked){result+=sex[i].value
break}}//复选
result+="，兴趣："for(vari=0;i<hobby.length;i++){if(hobby[i].checked)result+=hobby[i].value}sp.innerText=result}</script>5.4表单元素属性下拉框：options[index].selected/options[index].value示例：以文本框和下拉框为例，获取输入和选择的值文本框：<inputname="user"id="user"/>
下拉框:<selectname="city"id="city"multiplesize="1"><option>广州</option><option>深圳</option><option>东莞</option></select><br/><buttononclick="getResult()">查看选择</button>
<br/>
选择结果是：<spanid="sp"></span><script>varuser=document.getElementById("user")varcity=document.getElementById("city")varsp=document.getElementById("sp")varresult=""
functiongetResult(){result=user.value+","for(vari=0;i<city.options.length;i++){if(city.options[i].selected){result+=city.options[i].value+","}}sp.innerText=result}</script>单选，可以直接使用city.value六、其他元素查询方法document.getElementsByTagName("标记名")document.getElementsByClassName("类名")结果为集合对象，
可以使用循环结构依次取出每一个元素七、通用查询元素.querySelector("选择器");//根据选择器查询元素，只找第一个符合条件的元素元素.querySelectorAll("选择器“)//返回一个节点列表，可以作为数组使用例如：分别根据id、class和标记查询元素.querySelector("#book")//根据id查询
代替getElementById()元素.querySelector(".book")//根据类名查询
代替getElementsByClassName()[0]元素.querySelector("div")//根据标记名查询
代替getElemnetsByTagName()[0]这里的元素可以使document，也可以是任意已找到的元素示例
单击列表项，获取列表项的内容（使用通用查询方法）2八、元素操作：查询、创建、添加、移除和复制元素8.1.1常用查询接口（document对象的方法）1.根据对象的ID查询：确定唯一的对象： getElementById(id)2.根据标记名查询：集合对象； getElementsByTagName(标记名)3.根据样式类名class进行查询：集合对象
getElementsByClassName(类名)4.根据对象的name查询：集合对象；getElementsByName(标记name属性)5.通用查询：querySelector|querySelectorAll8.1.2使用属性查询元素假定有：vardiv=document.getElementById(“id”)div.parentElement;//获取父元素；
div.children;//属性；所有直接子元素，集合对象div.previousElementSibling;//属性：前一个相邻的元素div.nextElementSibling；//属性：下一个相邻的元素,仅兄弟元素8.1.查询方法<script>functiongetEle(){varmain=document.getElementById("main")varsps=document.getElementsByTagName("span")
varchild=main.childrenfor(vari=0;i<child.length;i++){sps[0].innerText+=child[i].tagName+","}varp1=document.getElementById('p1')sps[1].innerText=p1.parentElement.tagNamesps[2].innerText=p1.previousElementSibling.tagNamesps[3].innerText=p1.nextElementSibling.tagName
varp2=document.getElementById('p2')sps[4].innerText=p2.nextElementSibling?p2.nextElementSibling:'不存在'}</script><divid="main"style="border:1pxsolid#ccc"><h3id="h3">这是标题3</h3><pid="p1">这是段落1</p><pid="p2">这是段落2</p></div><p>div的子元素有：<spanid="sp1"></span></p><p>段落1的父元素是：<spanid="sp2"></span></p><p>段落1的上一个元素是：<spanid="sp3"></span></p><p>段落1的下一个元素是：<spanid="sp4"></span></p><p>段落2的下一个元素是：<spanid="sp5"></span></p><p><buttononclick="getEle()">获取</button></p>代码分析8.2创建元素document.createElement(“标记名”)（1）添加元素：父元素A.appendChild(新元素)//将新元素作为子元素添加到父元素末尾8.3添加/插入元素：新元素作为子元素varp=document.createElement(“p”)//创建p元素p.innerText=”这是一个新段落”//设置段落的文本varh3=document.createElement(“h3”)//创建h3元素h3.innerText=”这是标题3”//设置标题文本注意：创建的新元素不会显示在页面上，你需要使用以下的方法添加到文档或插入到其他元素中documnet.body.appendChild(h3)documnet.body.appendChild(p)body表示HTML文档的body元素示例：假如一个div包含一个
段落P，请创建一个H3，添加到P之前，然后创建一个新段落，添加到P之后。（2）插入新元素：父元素.insertBefore(元素A,元素B)//将元素A，插入到元素B之前注意：如果元素B为null，那么做为最后一个元素添加，这个时候与appendChild方法作用相同。<divid="div1"><pid="p1">这是一个段落</p></div><script>vardiv=document.querySelector("#div1");varp=document.querySelector("#p1");//创建H3元素
varh3_ele=document.createElement("h3");h3_ele.innerText="这是H3"//h3添加到p之前
div.insertBefore(h3_ele,p)//创建p元素
varp_ele=document.createElement("p")p_ele.innerText="这是新段落文本"//在p之后插入新段落
div.appendChild(p_ele)</script>8.4元素删除如果要移除元素，可以使用其父元素对象的removeChild方法，而元素的remove方法用于移除元素自身。示例：使用两种方法删除元素<divid="main"><pid="p1">段落1</p><pid="p2">段落2</p><buttononclick="remove(1)">移除段落1</button><buttononclick="remove(2)">移除段落2</button></div><script>functionremove(flag){varp1=document.getElementById("p1");varp2=document.getElementById("p2");if(flag==1){//方法1：使用父元素删除varparent=p1.parentElement;parent.removeChild(p1);}else{//方法2：自我删除p2.remove();}}</script>8.5元素替换父元素.replaceChild(新元素,被替换的元素);示例：替换指定的列表项<ulclass="ul"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><buttononclick="replace()">替换第二个列表项</button><script>functionreplace(){varul=document.querySelector(".ul")varli2=ul.querySelector(".ul>li:nth-of-type(2)")varnewLi2=document.createElement("li")newLi2.innerText="新列表项“ul.replaceChild(newLi2,li2)}</script>8.6元素克隆（复制元素）元素.cloneNode(true|false);//true---深度克隆，包含元素和后代子元素的所有内联属性（样式、事件和文本）；false---浅克隆，只包含元素本身及其内联属性（样式、事件），不包含任何子元素和文本。
综合实例：根据给定的模拟数据，动态生成商品展示效果vargoods=[{id:1,name:'三国演义',price:20,img:'shyy.jpg'},{id:2,name:'红楼梦’,price:30,img:'hlm.jpg'},{id:3,name:'水浒传',price:40,img:'shz.jpg'},{id:4,name:'西游记',price:50,img:'xyj.jpg'}]//该数据保存在goods.js文件中思路：1.使用弹性布局,先用固定数据制作展示效果。2.以其中一个元素的布局为模板，克隆该元素，包括子元素。3.在克隆的元素中，查找子元素，并根据给定的数据，为子元素赋值。4.添加到容器元素中。5.删除模板元素。<divclass="container"><!--模板START--><divclass="card"><imgclass="img"/><pclass="name">红楼梦</p><pclass="price">12.8</p><p> <buttonclass="buy">购买</button></p></div><!--END--></div><style>*{box-sizing:border-box;}.container{width:800px;border:10pxsolidred;margin:auto;/*居中显示*//*弹性布局：水平，可以换行*/display:flex;flex-wrap:wrap;}.card{box-shadow:0020px#ccc;margin:10px;padding:10px;}</style>1.使用弹性布局,先用固定数据制作展示效果。2.以其中一个元素的为模板，克隆该元素，包括子元素,添加中容器中，最后移除模板。
<script>functionshowGoods(){varcontainer=document.querySelector(".container");varcard=document.querySelector(
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论