《Web前端基础》课件-任务7：学习DOM模型 获取元素_第1页
《Web前端基础》课件-任务7：学习DOM模型 获取元素_第2页
《Web前端基础》课件-任务7：学习DOM模型 获取元素_第3页
《Web前端基础》课件-任务7：学习DOM模型 获取元素_第4页
《Web前端基础》课件-任务7：学习DOM模型 获取元素_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

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

文档简介

获取元素1根据id属性获取元素根据id属性获取元素的示例代码如下。document.getElementById('id属性值');实现方法：可以为目标元素设置id属性作为唯一标识，然后结合document对象提供的getElementById()方法获取目标元素。getElementById()方法在使用时只需将id属性值作为参数传入即可，调用后会返回一个元素对象，这个元素对象就是根据id属性获取的目标元素。实现方法：可以通过getElementsByTagName()方法获取具有相同标签名的元素。getElementsByTagName()方法在使用时只需将标签名作为参数传入即可。因为具有相同标签名的元素可能有多个，所以该方法返回的结果不是单个元素对象，而是一个集合。2根据标签名获取元素根据标签名获取元素的示例代码如下。document.getElementsByTagName('标签名');实现方法：可以通过document对象提供的getElementsByName()方法获取表单元素。getElementsByName()方法在使用时只需将name属性值作为参数传入即可。因为name属性的值不要求必须是唯一的，所以该方法返回的结果不是单个元素对象，而是一个集合。3根据name属性获取元素根据name属性获取元素的示例代码如下。document.getElementsByName('name属性值');4根据类名获取元素根据类名获取元素的示例代码如下。document.getElementsByClassName('类名');实现方法：可以使用document对象提供的getElementsByClassName()方法获取元素。getElementsByClassName()方法在使用时只需将元素类名作为参数传入即可，该方法返回的结果是一个集合。实现方法：可以使用document对象新增的querySelector()和querySelectorAll()方法获取目标元素。在使用querySelector()和querySelectorAll()方法时，只需将CSS选择器作为参数传入即可。前者返回指定选择器的第一个元素对象，后者返回指定选择器的所有元素对象集合。5根据CSS选择器获取元素根据选择器获取元素的示例代码如下。document.querySelector('CSS选择器');document.querySelectorAll('CSS选择器');5根据CSS选择器获取元素querySelector()和querySelectorAll()方法在使用时需要注意IE浏览器的兼容问题，这两个方法从IE9开始才被完整支持，IE8对选择器的支持不完整。Tip

先定一个小目标！掌握获取基本结构元素，能够完成基本结构元素的获取6获取基本结构元素属性说明document.documentElement获取文档的html元素document.body获取文档的body元素document.forms获取文档中包含所有form元素的集合document.images获取文档中包含所有image元素的集合6获取基本结构元素实现方法：我们可以使用document对象的相关属性来获取HTML的基本结构元素。6获取基本结构元素在开发中，若需要获取或设置当前文档的标题，可以使用document对象的title属性，该属性的返回结果是字符串，示例代码如下。多学一招：获取或设置当前文档的标题document.title6获取基本结构元素多学一招：获取或设置当前文档的标题验证title属性返回的结果，示例代码如下。<head><title>Hello！</title></head><body><script>console.log(document.title);console.log(typeofdocument.title);

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

温馨提示

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

最新文档

评论

0/150

提交评论