js获取dom元素的方法

ID获取元素

使用document.getElementById()

注意事项

①因为我们文档页面从上往下加载，所以先得有标签 我们script写到标签下面

②getElementBy要用驼峰命名法

③参数id是大小写敏感的字符串

④返回的是一个对象

⑤console.dir打印我们返回的元素对象更好查看里面属性和方法

<div id = "time">8888-8-8</div>
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
console.dir(timer);

标签名获取元素

使用getElemenByTagName('标签名')

注意事项

①返回是获取过来元素对象的集合，以伪数组形式储存

②如果页面没有这个元素返回空的伪数组unfined

③可以自己指定父元素但是不能为伪数组，只能为指定的单个元素，element(你指定的父元素).getElementsByTagName()

    <ul>
        <li>白黑黑白哈哈哈</li>
        <li>白黑黑白哈哈哈</li>
        <li>白黑黑白哈哈哈</li>
        <li>白黑黑白哈哈哈</li>
        <li>白黑黑白哈哈哈</li>
    </ul>
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);//白黑黑白哈哈哈

类名获取元素

使用getElementByClassName('类名')；

和标签用法一样

querySelector()返回指定选择器的第一个元素对象，切记class前加.，id前面要加#，标签不加符号

​
<div class="box">盒子1</div>
<div class="box">盒子1</div>
<div id="nav">
<ul>
    <li>首页</li>
    <li>产品</li>
</ul>
</div>
var firstBox = document.querySelector('.box');
console.log(fistBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);

​

querySelectorAll()返回指定选择器所有元素对象合集，切记class前加.，id前面要加#，标签不加符号

这和querySelector()使用方法一样，就效果不一样。

获取body和html元素

获取body元素
var bodyEle = document.body
console.log(bodyEle);
获取html元素比较特殊
var htmlEle = document.documentElement
console.log(htmlEle);