在Web开发中，获取元素及其内容是非常常见的任务。无论是用于页面渲染还是交互操作，都需要获取页面中的元素及其内容。本文将从多个角度分析如何获取元素及其内容的方法。
1. 通过标签名获取元素
在HTML中，每个元素都有一个标签名。可以通过标签名获取元素，比如获取所有的h1元素：
```javascript
var h1List = document.getElementsByTagName('h1');
```
该方法返回一个NodeList对象，其中包含所有匹配的元素。需要注意的是，该方法返回的是动态集合，即页面中的元素发生改变时，NodeList对象也会相应改变。
2. 通过类名获取元素
除了标签名，还可以通过元素的类名来获取元素。比如获取所有类名为“example”的元素：
```javascript
var exampleList = document.getElementsByClassName('example');
```
同样返回一个NodeList对象。
3. 通过ID获取元素
每个元素都有一个唯一的ID。可以通过ID获取对应的元素，比如获取id为“header”的元素：
```javascript
var header = document.getElementById('header');
```
该方法返回一个元素对象。
4. 通过选择器获取元素
在CSS中，可以使用选择器来选择元素。同样，也可以通过选择器来获取元素。比如获取所有类名为“example”的h1元素：
```javascript
var exampleH1List = document.querySelectorAll('h1.example');
```
该方法同样返回一个NodeList对象。
5. 获取元素的属性值
除了获取元素本身，还可以获取元素的属性值。比如获取某个元素的class属性：
```javascript
var className = element.className;
```
或者设置某个元素的class属性：
```javascript
element.className = 'newClass';
```
同样，也可以获取元素的其他属性，比如id、title、src等等。
6. 获取元素的文本内容
除了获取元素的属性值，也可以获取元素的文本内容。比如获取某个元素的文本内容：
```javascript
var textContent = element.textContent;
```
或者设置某个元素的文本内容：
```javascript
element.textContent = 'newText';
```
需要注意的是，textContent属性返回的是元素的纯文本内容，不包含HTML标签。
7. 获取元素的HTML内容
如果需要获取元素的完整内容，包括HTML标签，可以使用innerHTML属性：
```javascript
var htmlContent = element.innerHTML;
```
或者设置元素的完整内容：
```javascript
element.innerHTML = '
newHTML
';```
需要注意的是，innerHTML属性可以直接设置包含HTML标签的字符串，但是要注意安全性问题，避免XSS攻击。
综上所述，获取元素及其内容的方法有很多种，根据具体情况选择合适的方法能够提高代码的效率和可读性。
