基本都是在用框架写代码、获取dom节点,今天回顾一下通过原生JS获取节点的方式

1、通过ID获取

获取: 

<div id="idSign">今天很热</div>
document.getElementById('idSign')

输出: 

 

2、通过类名获取

获取:

<div class="idSign">今天很热</div>
document.getElementsByClassName('idSign')

输出:需要注意的是,通过类名获取dom节点输出的是类数组

 

 3、通过标签名获取

获取:

document.getElementsByTagName('div')

输出:输出的格式是类数组,输出的结果是所有的div标签

4、通过选择器querySelector获取

【注:因为id是唯一性的,所以没有什么可说的,直接用class进行测试】

获取class:

 <div class="idSign">今天很热</div>
 <div class="idSign">今天很热</div>
console.log(document.querySelector('.idSign'))

输出:只输出第一个标签

 

 

 5、通过选择器querySelectorAll获取

获取class:

 <div class="idSign">今天很热</div>
 <div class="idSign">今天很热</div>
document.querySelectorAll('.idSign')

输出:输出所有

6、通过name属性

获取:

<div name="idSign">今天很热</div>
document.getElementsByName('idSign')

 输出:类数组

7、获取html 

console.log(document.documentElement)

 

8、 获取body的方法

console.log(document.body)

 借鉴博客:https://www.jb51.net/article/116460.htm

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐