js 获取 Dom 元素的方式
获取元素的三种基本方式
一、 通过id名称获取元素:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <body> <p>这是一段话。</p> <script> var p1 = document.getElementById('p1') // 获取文档。 p1.style.color = 'blue' // 设置文档颜色为蓝色。 </script> </body> </html> // 输出结果是：蓝色字体的“这是一段话。”
二、 通过标签名称获取元素:
<h1>标题1</h1> <h1>标题2</h1> <h1>标题3</h1> <h1>标题4</h1> <script> var h1s = document.getElementsByTagName('h1') for(var i = 0;i<h1s.length;i++){ h1s[i].style.fontSize = 24px // 设置h1的字体大小为24px。 } </script>
三、 通过类别名称获取元素：
<p class="c1">这是一段话</p> <h1 class="c1">这是一个标题<h1> <h1>这是第二个标题</h1> <h1 class="c1">这是第三个标题</h1> <script> var ph = document.getElementByClassName('c1') for(var i =0;i<=c1.length;i++){ c1[i].style.color = 'red' // 使每一个c1的字体颜色变为红色。 } // 输出结果是带有class值的字体颜色变为红色。 </script>
四、 获取元素基本方式总结：
1.getElementById只能获取一个元素。 2.getElementsByTagName根据标签获取多个元素，并返回一个伪数组。及时获取的元素只有一个，也是以数组的形式储存。 3.style只能设置某一个元素的属性，但是getElementsByTagName返回的是一个数组，所以必须遍历这个数组才可以使用。（可以使用for循环遍历数组。） 4.通过JavaScript操作的css属性，与css不相同：
- 如果css属性是一个单词，写法保持不变。（如：color，width等）。
- 如果css属性是多个单词组合而成，则需要将第一个单词首字母小写，其他首字母大写，并去除连接符。（如：background-color，font-size等）。
五、 HTML5新增的获取元素方式：
1.在HTML5中，新增的获取元素方式是：querySelector和querySelectorAll。 2.querySelector只能获取符合条件的第一个元素，而querySelectorAll可以获取符合条件的所有元素。 3.这个方法可以通过id，类别名称和标签名称获取元素，在使用的时候要遵循以下规则：
- id在前面加上 #
- 类别名称在前面加上 .
- 标签名称前面什么也不加
