当前位置：首页 > news >正文

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

news 2025/8/15 12:57:35

前言：

方法

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

相关代码

<!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>

查看全文

http://www.lryc.cn/news/123345.html