获取元素


querySelector	选择匹配的第一个元素
querySelectorAll	选择匹配的多个元素
getElementById	根据 id 获取一个元素
getElementsByName	通过 name 属性获取元素（一般用于对表单元素进行操作时使用）
getElementsByTagName	根据标签名获取一类元素,获取页面所有该元素,[ ]集合
getElementsByClassName	根据 class类名获取元素,获取页面所有类名为w的,[ ]集合

querySelector

选择匹配的第一个元素

1document.quertSelector('css选择器')

参数：包含一个或多个有效的CSS选择器字符串
返回值：CSS选择器匹配的第一个元素,一个 HTML Element对象。如果没有匹配到,则返回null。

querySelectorAll

选择匹配的多个元素

1document.querySelectorAll('css选择器')

参数：包含一个或多个有效的CSS选择器字符串
返回值：CSS选择器匹配的NodeList对象集合
例如：
```
1document.querySelectorAll('ul li')
```
- 得到的是一个伪数组：
  - 有长度有索引号的数组
  - 但是没有pop()、push()等数组方法
  - 想要得到里面的每一个对象,则需要遍历（for）的方式获得。
注意事项:
- 哪怕只有一个元素,通过querySelectAll() 获取过来的也是一个伪数组,里面只有一个元素而已
- querySelector()方法可以直接修改
- querySelectorAll()方法不可以直接修改,但可以通过遍历的方式对里面的元素做修改。

getElementById

根据 id 获取一个元素

1<div id='nav'>xiaosutongxue</div>
2
3<script>
4	const node = document.getElementById('nav')
5  console.dir(node)
6</script>

注意：只能通过 document 对象上使用,不能通过元素读取拥有 ID 的子元素。

getElementsByName

通过 name 属性获取元素（一般用于对表单元素进行操作时使用）

1<input type="text" name="txt">
2
3<script>
4	const node = document.getElementsByName("txt")    
5  console.dir(node)
6</script>

getElementsByTagName

根据 标签名 获取一类元素,获取页面所有该元素,[ ]集合

1<div>苏</div>
2<div>东</div>
3<div>旭</div>
4
5<script>
6  // 获取页面所有div元素
7	const divs = document.getElementsByTagName('div')
8  console.dir(divs)
9  
10  // 获取所有元素
11  const nodes = document.getelementByTagName('*')
12  console.dir(nodes)
13</script>

如何获取某个元素（父元素）内部所有指定标签名的子元素

1<div id="father">
2  <p></p>
3  <p></p>
4  <p></p>
5</div>
6
7<script>
8  // 获取父元素的子元素,得到的是伪数组,获取的时候不包含父元素自己。
9  // 且父元素必须是单个对象（必须指明是哪一个元素对象）
10  // 一般通过id获取父元素,再通过标签获得子元素
11	const node = father.getElementByTagName('p')
12  console.dir(node)
13</script>

getElementsByClassName

根据 class类名 获取元素,获取页面所有类名为w的,[ ]集合

1<div class='w'></div>
2
3<script>
4	const nodes = document.getElementsByClassName('w')
5  console.dir(nodes)
6</script>

获取元素() 里是大小写敏感的字符串
返回的是一个

元素对象
- console.dir() 打印元素对象

获取特殊元素

获取body元素

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

获取html元素

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

获取元素#

querySelector#

querySelectorAll#

getElementById#

getElementsByName#

getElementsByTagName#

getElementsByClassName#

获取特殊元素#

获取body元素#

获取html元素#