2018-01-04 获取元素与for小实例

原创 moxiao 随笔 个人笔记 176阅读 2018-01-04 21:36:18 举报

今天学了新的获取元素的方式,并且用for循环做了一点小小的东西。

通过id获取元素
document.getElementById('id名字')
通过class名字获取
全文档查找
document.getElementsByClassName('class名字')
限制范围
整个文档去找
document.getElementsByClassName('class名字')
找某个元素符合条件的集合
元素.getElementsByClassName('class名字')

集合的长度:length

注意:
获取的是一个集合,是多个元素, 不是数组,是类数组
通过class去取值,即便取到的只有一个元素,也要用下标取值              
    要通过下标去集合中找元素 下标从0开始

给每一个元素添加样式,用for
for(var i = 0; i < actives.length; i++){
    actives[i].style.【css样式】 = '【值】';
}

通过tagName名字获取
整个文档去找
document.getElementsByTagName('标签名字')
找某个元素符合条件的集合
元素.getElementsByTagName('class名字')

通过css的选择器
只能获取一个,如果是多个,默认值获取第一个
document.querySelector('css选择器')
元素.querySelector('css选择器')
获取多个
document.querySelectorAll('css选择器')
元素.querySelectorAll('css选择器')

取模(求余、取余)
求余数 % 取模 取余 的整数
求一个数除以另一个数的余数

奇数  数字%2 == 余数
偶数  数字%2 == 0

小技巧:
    左边小于右边,返回的是左边的值
    左边和右边相同,返回是0
    左边大于右边,返回的是左边除以右边的余数        

html 代码

因为图片的原因,我把背景图换成了纯色,会有点丑

还有一个小的例子:
html 代码

还是很有意思的!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复