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

作者：笔触狂放9 | 2024-02-18 21:04:20

踩

js获取html元素

前言：

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';

相关代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取html中的元素对象</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        ul li {
            height: 40px;
            margin-bottom: 20px;
            background: #04be02;
        }
        a.hover{
            border: 1px #f00 solid;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="wp">5</li>
        <li class="wp">6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="wp">5</li>
        <li class="wp">6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
</html>
<script>
    // 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]
   2.document.body
   */
   let body1 = document.getElementsByTagName('body')[0];
   body1.style.background='#ccc';
 
   document.body.style.background='pink';
</script>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】