2015秋前端开发课件-js对象模型_第1页
2015秋前端开发课件-js对象模型_第2页
2015秋前端开发课件-js对象模型_第3页
2015秋前端开发课件-js对象模型_第4页
2015秋前端开发课件-js对象模型_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1-文档对象模型

动态网页的真正威力2015Spring,xi'an本章内容文档对象模型(DOM)DOMAPI选择DOM元素getElementsByXXX()querySelector()NodeList节点列表动态节点列表静态节点列表文档对象模型(DOM)文档对象模型文档对象模型是为HTML和XML文档的API提供了文档的结构化表达能使开发者修改网页的内容和视觉呈现文档对象模型(2)文档对象模型由多个对象组成，用来操纵网页所有的属性，方法和事件都组织到对象中那些对象可通过编程语言和脚本访问如何使用HTML页面的DOM？写JavaScript来与DOM交互JavaScript使用DOMAPI（每个浏览器都原生实现）DOMAPIDOMAPIDOMAPI由对象和方法组成，用来与HTML页面交互能添加和删除HTML元素能动态的应用样式能添加和删除HTML属性DOM引入对象来表示HTML元素和它们的属性document.documentElement是<html>document.body是网页的bodyDOM对象每个HTML元素有对应的DOM对象类型HTMLLIElement代表<li>HTMLAudioElement代表<audio>这些对象都有相应的属性HTMLAnchorElement有href属性HTMLImageElement有src属性document对象是特殊对象代表DOMAPI的入口点HTML元素HTML元素有属性，与其特性对应id,className,draggable,style,onclick,等不同的HTML元素有特殊特性HTMLImageElement有属性srcHTMLInputElement有属性valueHTMLAnchorElement有属性hrefHTML元素(2)HTML元素也有对应其内容的属性innerHTML返回的字符串为不包含元素本身的元素内容outerHTML返回的字符串为包含元素本身的元素内容innerText/textContent返回的字符串为不包含标签的元素内容DOM对象演示选择DOM元素选择HTML元素HTML元素可以使用DOMAPI找到并缓存至变量选择单一元素选择元素集合

使用预定义的元素集合varheader=document.getElementById('header');varnav=document.querySelector('#main-nav');varinputs=document.getElementsByTagName('li');varradiosGroup=document.getElementsByName('genders[]');varheader=document.querySelectorAll('#main-navli');varlinks=document.links;varforms=document.forms;使用getElementsBy方法DOMAPI包含了基于一些特征来选择元素的方法通过Id通过Class通过标签名通过名称

varheader=document.getElementById('header');varposts=

document.getElementsByClassName('post-item');vargendersGroup=

document.getElementsByName('genders[]');varsidebars=

document.getElementsByTagName('sidebar');document.getElementsBy演示querySelectorDOMAPI有用类似CSS选择器的方法来找到和选择HTML元素querySelector返回匹配选择器的第一个元素querySelectorAll返回匹配选择器的所有元素的集合不支持老浏览器（低于IE8）两个方法都有字符串参数元素的CSS选择器

varheader=document.querySelector('#header');//有id="header"的元素varnavItems=

document.querySelectorAll('#main-navli');//有id=main-nav的元素中包含的li元素

querySelector演示在其他元素中选择元素DOMAPI能用于选择其他元素中的元素选择带有id="wrapper"的元素内所有的div所有方法能够使用HTML元素特别是getElementById()varwrapper=document.getElementById('wrapper');vardivsInWrapper=wrapper.getElementsByTagName('div');选择内部元素

演示节点列表节点列表节点列表是返回的集合，通过DOM选择器方法：getElementsByTagName(tagName)getElementsByName(name)getElementsByClassName(className)querySelectorAll(selector)vardivs=document.getElementsByTagName('div');varqueryDivs=document.querySelectorAll('div');for(vari=0;i<divs.length;i++){//做一些事情用divs[i]…}节点列表(2)节点列表看起来像数组，但不是数组是带有属性的对象，与数组类似有length和indexer遍历数组用for-in循环：for(variindivs){console.log('divs['+i+']='+divs[i]);}//divs[0]=...//divs[1]=...//divs[length]=...//divs[item]=...节点列表演示静态节点列表和动态节点列表静态节点列表和动态节点列表有两类节点列表getElementsBy…()返回动态节点列表querySelectorAll()返回静态节点列表动态列表保有已选元素的踪迹当DOM改变时可反应而静态列表包含的元素，是执行方法那一刻产生的（不随DOM变化）牢记动态节点列表比常规数组要慢为了更好的性能，需要缓存它的长度

静态和动态节点列表演示提问环节练习写一个脚本，选择在div元素中的所有的div节点创建函数使用querySelectorAll()创建函数使用getElemen

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论