DOM-简介+获取元素

DOM简介-DOM树

获取页面元素

1、根据ID获取getElementById()

获取带有ID的元素对象

<div id="time">2022-3-31</div>
    <script>
        //1.因为文档页面从上往下加载，先有标签，所以Script写到标签下面
        //2.参数id是大小写敏感字符串
        //是文档里的 所以先调用文档
        //3.返回的是一个文档对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //4.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);

    </script>

 

2、根据标签名获取getElementsByTagName()

2.1返回带有指定标签的对象集合

 如果页面中只有一个li 返回的还是伪数组形式

如果页面中没有这个元素 返回的是空的伪数组的形式

 

 

2.2还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

[注]：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括元素自己

 

3、H5新增获取元素方式

3.1根据类名返回getElementsByClassName()

 

 3.2根据指定选择器返回第一个元素对象querySelector('选择器')

切记   里面的选择器要加符号 类.  ID#

document.querySelector('选择器');

 

 3.3根据指定选择器返回所有元素对象集合querySelectorAll('选择器')

document.querySelectorAll('选择器');

 

 

 

4、获取特殊元素(body html)

document.body;

document.documentElement;