原生JS-DOM操作获取元素的四种方法

目录

一.getElementById获取元素

二.getElementsByTagName()获取元素

 三.HTML5新增方法获取元素

四.获取body、html元素

---

一.getElementById获取元素

这个方法需要根据ID来获取，使用getElementById()可以获取到带有ID属性的元素对象

我们来举一个例子：

<div id='hello-JS'>你好JS</div>

这是一段HTML代码，有这样一个带有ID属性的div元素，我们通过getElementById()方法来获取一下：

const test = document.getElementById('hello-JS')

console.log(test)

我们看到打印出来的是一个完整的标签，我们来看一下返回值的类型：

//dir打印我们返回的元素对象，比较log更好的去查看里面的属性和方法
//当然，如果是简单的测试的话，那么用什么都可以
console.dir(test)
//检测类型
console.log(typeof text)

 返回值是一个obj对象

---

二.getElementsByTagName()获取元素

getElementByTagName()方法是根据标签名来获取元素，方法可以返回带有指定标签名的对象集合，意思就是我们可以获取到很多的指定标签名的元素

例如我们在ul标签中又10个li：

<ul id="hello">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

我们想要获得到ul里面的li：

const test = document.getElementById('hello')
const lis =  test.getElementsByTagName('li')
console.dir(lis)
console.log(lis[6])
console.log(lis);

 我们通过控制台得到了获取过来的元素对象的集合，它是以一种伪数组的形式来存储的

我们还可以使用for循环来遍历一下：

for(let i = 0;i < lis.length;i++){
    console.log(lis[i]);
}

tips：如果ul中只有一个li，返回的还是伪数组，如果没有li的话，那么返回的是一个空伪数组，并不会报错或者undefined等

---

 三.HTML5新增方法获取元素

是有一些兼容性问题的（只有I9以上版本或者移动端），不过如今我们一般情况下不会考虑这些兼容问题

我们可以使用这个方法来根据类名返回元素对象集合：

document.getElementByClassName('类名')
//不需要加.来指定类

比如我们现在想要获取ul：

<ul id="hello" class="test"></ul>
<ul></ul>

document.getElementByClassName('.test')

我们还可以使用querySelector()方法来获取元素，这个方法不仅仅单一的可以获取类名或者ID名或者元素标签，这三种都可以获取到：

document.querySelector('选择器')

//只能获取到第一个ul
document.querySelector('ul')

document.querySelector('#hello')
document.querySelector('.test')


//返回指定选择器所有元素
const test = querySelectorAll('ul')

---

四.获取body、html元素

虽然不是window这样的顶级对象，但是获取这俩个较大的对象我们也有相应的获取方式：

//获取body元素
document.body

//获取html元素
document.documentElement