DOM（一）：获取页面元素、操作元素、自定义属性

获取页面元素

1.根据ID获取

使用getElementById()方法获取带有ID的元素对象,格式如下：

var 变量名 = document.getElementById(‘id名’);

例如：

<div id = 'time'>2022-12-18</div>
<script>
var times = document.getElementById('time')
console.log(times);
</script>

结果：

代码二：

<script>
var times = document.getElementById('time')
console.log(times);
</script>
<div id = 'time'>2022-12-18</div>

结果：

注意点：

• JavaScript是从上到下读取代码，script标签里面的变量一定要在script标签的上面。如果写在下面，则会显示null
• 参数id是大小写敏感的字符串，必须用引号
• 返回的是一个元素对象

2.根据标签名获取元素
方法一：使用getElementsByTagName()方法获取全部标签，格式如下：

var 变量名 = document.getElementsByTagName(‘标签名’);

方法二：获取某个元素（父元素）内部所有指定标签名的子元素

var 变量名 = element.getElementsByTagName(‘标签名’);

注意点：

• 返回的值是一个对象的集合，如果需要得到里面的元素需要遍历
• 得到的元素对象是动态的
• 父元素必须是单个对象（必须指定是具体的哪一个元素对象），获取的时候不包括父元素自己。

例如：

其中，第一个获取的是元素集合，下面的for循环遍历则得到的是元素对象。

例二：

    <ul>
        <li>1你好</li>
        <li>2你好