目錄
前言：
方法
1.通過id獲取元素
2.通過標簽名獲取元素
3.通過類名class獲取元素
?獲取body的方法
1.document.getElementsByTagName('body')[0]
2.document.body
相關代碼
前言：
? ? ? ? ?通過獲取HTML中的元素對象，JavaScript可以對網頁進行動態(tài)交互、更新、響應用戶操作、處理表單數據、動態(tài)加載和操作頁面元素等，為網頁提供交互性、動態(tài)性和實時性等特性，讓用戶獲得更好的體驗和更強的互動性。
方法
1.通過id獲取元素
let ul = document.getElementById('list')
ul.style.border = '1px #f00 solid';2.通過標簽名獲取元素
document.getElementsByTagName('標簽名');特點：
1.調用對象可以是 document之外的對象
如果通過 document 對象獲取的標簽，則是獲取頁面上所有的標簽對象
如果通過其他對象獲取的標簽，則是獲取該對象下所有的標簽對象
2.獲取的元素對象不僅僅是一個，可以有多個
3.獲取的標簽對象存放在數組中，也就是該方法的返回值是一個數組
數組，在數組中可以存放任意類型的數據
let arr =['電影'，'作業(yè)','美食'，'游戲'，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 =['電影','作業(yè)','美食','游戲',122,232,true];
console.log(arr[2]);3.通過類名class獲取元素
document.getElementsByClassName('class名');返回值是 一個數組，數組中包含了所有具有該class名的元素對象文章來源：http://www.zghlxwxcb.cn/news/detail-637711.html
特點和document.getElementsByTagName 一致文章來源地址http://www.zghlxwxcb.cn/news/detail-637711.html
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 =['電影'，'作業(yè)','美食'，'游戲'，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 =['電影','作業(yè)','美食','游戲',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>到了這里，關于javaScript：如何獲取html中的元素對象的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
