《Web前端基础》课件——任务7：学习DOM模型 获取元素.pptxVIP

获取元素

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.title

6获取基本结构元素多学一招：获取或设置当前文档的标题验证title属性返回的结果，示例代码如下。headtitleHello！/title/headbodyscriptconsole.log(document.title);console.log(typeofdocument.title);/script/body

6获取基本结构元素多学一招：获取或设置当前文档的标题控制台输出结果为“Hello!”，返回结果的类型是一个字符串。

THANKYOU!