1、getElementsByTagName
getElementsByTagName('标签名称')
通过标签名去获取一组元素,它获取到的是一组元素。
主语有(限制范围):
(1)ducument:从整个文档中去获取一组元素
(2)父级:从父级下面去获取一组元素
(区别:
document.getElementById('id名称')
通过id名称去获取一个元素,它只有一个主语,即document(整个文档)
)获取到的是一个集合,类数组
类数组:类似数组,没有数组中的一些方法
它只具备数组中的length属性,以及每个数据都会有一个自己对应的下标。
获取其中某一个元素:用下标的方法去获取,和数组一样
伪数组与真正的数组的区别: 伪数组只有下标和length属性(数组结构很相似),但没有其他数组方法,比如push方法。 2、getElementsByClassName 通过类名去获取一组元素,它获取到的是一组元素 主语(限制范围):(1)ducument:从整个文档中去获取一组元素
(2)父级:从父级下面去获取一组元素
获取到的是一个集合,类数组
3、querySelector
querySelector('css选择器')
通过css选择器去获取一个元素它获取到的只有一个元素,如果有重复的,则取第一个
主语:
(1)ducument:从整个文档中去获取一组元素
(2)父级:从父级下面去获取一组元素
css选择器特别强大。可以查一下单页应用(SPA)。
总结:除了getElementById,其他主语都有两个。
4、querySelectorAll
querySelectorAll,获取的是一组元素,伪数组,名字叫做NodeList。同样可以通过数组下标获取元素。
5、for循环
批量修改dom元素
for循环和其他语言中的for循环没有什么区别。
eg:
for(var i=0; i<10;i++){
console.log('i love you');
}
6、this指针
指的是当前对象。
是一个关键词,不能当做变量名。
只能读,不能写,它的值只能用,不能修改。
谁调用了这个函数,this就指向谁。
7、自定义属性
是元素身上所具有的的一些特征
(1)系统自带的属性
type id style value src等
(2)自定义属性
系统当中是没有的,我们自己添加的。
系统自带的属性无法满足我们的需求,这时候就需要一个自己添加的属性。
方法:
(1)先获取到元素
(2)元素对象.自定义属性名=自定义属性值
document.getElementById(’text’).getAttribute(’sex’);//如果直接写自定义属性,那么自定义属性只能通过getAttribute访问。 如果通过js添加自定义属性,就可以直接通过 . 访问。
