javaScript系列---【js中获取元素的方式】

获取元素的方式

限定获取范围必须是具体的元素对象，操作元素也必须是具体的元素对象

通过id获取

基本语法

• context.getElementById("id值");

  • context 在这里表示获取范围，通过id获取限定范围必须使用document

  • 获取到了就是具体的那个元素对象，获取不到是null

 通过className获取

基本语法

• context.getElemntsByClassName("className值");

  • context 在这里表示获取范围，通过className获取，限定范围可以是document,也可以自己去限定，context必须是具体的元素对象

  • 获取到了就是一个类数组集合，获取不到就是空集合

  • 数组集合：天生自带length属性，由索引和值组成，索引从0开始依次递增，最大索引是collection.length-1;

类数组的属性

• length 长度,集合中元素的个数

操作元素

• 获取元素集合中具体的元素

  • 元素集合[索引]

console.log(boxMyboxs[0]);
console.log(boxMyboxs[1]);
console.log(boxMyboxs[2]);
console.log(boxMyboxs[boxMyboxs.length-1]); //获取最后一项
​
boxMyboxs[0].style.backgroundColor = "green";
boxMyboxs[boxMyboxs.length-1].style.backgroundColor = "yellow";

 

通过tagName

基本语法

• context.getElemntsByTagName("tagName值");

  • context 在这里表示获取范围，通过tagName获取，限定范围可以是document,也可以自己去限定，context必须是具体的元素对象

  • 获取到了就是一个类数组集合，获取不到就是空集合

  • 数组集合：天生自带length属性，由索引和值组成，索引从0开始依次递增，最大索引是collection.length-1;

类数组的属性

• length 长度,集合中元素的个数

操作元素

• 获取元素集合中具体的元素

  • 元素集合[索引]；

静态获取和动态获取

• 静态获取：原来有就有，原来没有就没有，动态增加是获取不到的

  • id是静态获取

• 动态获取：原来有就有，原来没有就没有,动态增加是可以获取到的

  • className动态获取

  • tagName 动态获取