1. 程式人生 > >獲取頁面元素的四種方法

獲取頁面元素的四種方法

測試原始碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2 id="header">前端開發學習</h2>
<ul class="list">
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ul>
</body>
</html>

1.用標籤名來獲取元素

獲取頁面中全部的 li 元素

引數為標籤名

以陣列形式儲存

訪問元素內容

修改元素內容

2.用元素 id 來獲取 var h2 = document.getElementById('header')

引數為id內容

以文字形式儲存

訪問元素內容

修改元素內容

3.用 class 類名來獲取元素 var ul = document.getElementsByClassName('list')

返回一個數組,類屬性list進行修飾的一個物件

引數為clss屬性值

訪問元素內容

4.用 CSS 選擇符來獲取 var li = document.querySelector('li') var li = document.querySelectorAll('li')

只能獲取一個元素內容

使用 querySelectorAll 可獲取多個內容

訪問元素內容

修改元素內容