JavaScript-----获取元素的几种方法

目录

一、获取元素

1.根据id获取元素

2.根据标签获取元素

二、HTML.5新增的获取方式

1.根据类名获取

2.querySelector()和querySelectorAlI()

 三、获取特殊元素(body,html)

 1.获取body元素

2.获取html元素


一、获取元素

在开发中,我们想要操作页面上的某个部分(如控制一个div元素的显示或隐藏、修改div元素的内容等),需要先获取到该部分对应的元素,再对其进行操作。下面我们将分别介绍获取元素的几种常见方式。

1.根据id获取元素

语法:document.getElementById(id)
作用:根据ID获取元素对象
参数:ID值,区分大小写的字符串
返回值:元素对象 或 null

案例:


    
你好

2.根据标签获取元素

语法:document.getElementsByTagName(‘标签名’)

           element.getElementsByTagName(‘标签名’)
作用:根据标签名获取元素对象
参数:标签名
返回值:元素对象集合(伪元素,数组元素是元素对象)

案例: 

  • 知否知否,应是等你好久11
  • 知否知否,应是等你好久11
  1. 生僻字
  2. 生僻字

JavaScript-----获取元素的几种方法_第1张图片

 注意:
1.因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的。

二、HTML.5新增的获取方式

HTML5中为document对象新增了gelElentsByClassName()、 querySelector()和querSelectorAlI()方法,在使用时需要考虑到浏览器的兼容性问题。接下来我们就来讲解这3种方法的具体使用情况。

1.根据类名获取

document.getElementsByClassName()方法,用于通过类名来获得某些元素集合。


2.querySelector()和querySelectorAlI()

querySelector()方法用于返回指定选择器的第一个元素对象。

querySelecorAlI()方法用于返回指定选择器的所有元素对象集合。

注意:
querySelector和querySelectorAll里面的选择器需要加符号

比如:document.querySelector(’#nav’);

案例:

盒子1
盒子2

 JavaScript-----获取元素的几种方法_第2张图片

 三、获取特殊元素(body,html)

 1.获取body元素

document.body // 返回body元素对象

2.获取html元素

document.documentElement //返回html元素对象

案例:

  

JavaScript-----获取元素的几种方法_第3张图片

你可能感兴趣的