javaScript：如何获取html中的元素对象

目录

前言：

方法

1.通过id获取元素

2.通过标签名获取元素

3.通过类名class获取元素

 获取body的方法

1.document.getElementsByTagName('body')[0]

2.document.body

相关代码

---

前言：

         通过获取HTML中的元素对象，JavaScript可以对网页进行动态交互、更新、响应用户操作、处理表单数据、动态加载和操作页面元素等，为网页提供交互性、动态性和实时性等特性，让用户获得更好的体验和更强的互动性。

方法

1.通过id获取元素

let ul = document.getElementById('list')
ul.style.border = '1px #f00 solid';

2.通过标签名获取元素

document.getElementsByTagName('标签名');

特点：

1.调用对象可以是 document之外的对象

如果通过 document 对象获取的标签，则是获取页面上所有的标签对象

如果通过其他对象获取的标签，则是获取该对象下所有的标签对象

2.获取的元素对象不仅仅是一个，可以有多个

3.获取的标签对象存放在数组中，也就是该方法的返回值是一个数组

数组，在数组中可以存放任意类型的数据

let arr =['电影'，'作业','美食'，'游戏'，122，232，true];

数组的下标从0 开始计算，因此如果需要从数组中获取内容则：

arr[内容对应的下标]

let li = document.getElementsByTagName('li');
    console.log(li);
    li[7].style.border='2px pink solid'

    let li1 = ul.getElementsByTagName('li');
    console.log(li1);
    li1[9].style.background = 'pink'

    let arr =['电影','作业','美食','游戏',122,232,true];
    console.log(arr[2]);

3.通过类名class获取元素

document.getElementsByClassName('class名');

返回值是 一个数组，数组中包含了所有具有该class名的元素对象

特点和document.getElementsByTagName 一致

let liBox = document.getElementsByClassName('wp');
  
   console.log(liBox);
   liBox[3].style.background='pink';

 获取body的方法

1.document.getElementsByTagName('body')[0]

 let body1 = document.getElementsByTagName('body')[0];

2.document.body

document.body.style.background='pink';

相关代码

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10