前言：

? ? ? ? ?通過獲取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.pswp.cn/news/36594.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/36594.shtml
英文地址，請注明出處：http://en.pswp.cn/news/36594.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！