目录
1.document.getElementsByTagName('body')[0]
前言：
通过获取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>
371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
