6 phương thức Javascript để tìm phần tử HTML

Bài viết hôm nay mình sẽ tổng hợp các phương thức của Javascript để tìm thẻ HTML trong trang web cùng ví dụ đơn giản. Hi vọng bài viết sẽ hữu ích với các bạn.

Danh sách các phương thức

• 01. getElementById
• 02. getElementsByClassName
• 03. getElementsByTagName
• 04. getElementsByName
• 05. querySelector
• 06. querySelectorAll

1. getElementById()

Trả về phần tử HTML theo ID

document.getElementById(idName)

idName là ID của phần tử muốn tìm kiếm.
Ví dụ: tìm phần tử HTML có id là test và cho chữ màu đỏ.

// HTML
<div id="test">Hello Kentrung</div>


// Javascript
const result = document.getElementById('test')
result.style.color = 'red'


// Kết quả
<div id="test" style="color: red;">Hello Kentrung</div>

2. getElementsByClassName()

Trả về tập hợp các phần tử HTML theo giá trị của class. Kết quả được trả về dưới dạng một đối tượng NodeList object.

document.getElementsByClassName(className)

className là tên class của phần tử muốn tìm kiếm.

Ví dụ: tìm tất cả các phần tử HTML có class là test, phần tử thứ nhất cho chữ màu đỏ, thứ hai cho chữ màu xanh, thứ ba cho chữ màu tím.

// HTML
<div class="test">Kentrung 1</div>
<div class="test">Kentrung 2</div>
<div class="test">Kentrung 3</div>
<div class="test">Kentrung 4</div>


// Javascript
const nodeResults = document.getElementsByClassName('test')
nodeResults[0].style.color = 'red'
nodeResults[1].style.color = 'blue'
nodeResults[2].style.color = 'purple'


// Kết quả
<div class="test" style="color: red;">Kentrung 1</div>
<div class="test" style="color: blue;">Kentrung 2</div>
<div class="test" style="color: purple;">Kentrung 3</div>
<div class="test">Kentrung 4</div>

3. getElementsByTagName()

Trả về tập hợp các phần tử theo loại thẻ HTML. Kết quả được trả về dưới dạng một đối tượng NodeList object.

document.getElementsByTagName(tagName)

tagName là loại thẻ HTML của phần tử muốn tìm kiếm.
Ví dụ: tìm tất cả các phần tử HTML là thẻ p, phần tử thứ nhất cho chữ màu đỏ, thứ hai cho chữ màu xanh, thứ ba cho chữ màu tím.

// HTML
<p>Kentrung 1</p>
<p>Kentrung 2</p>
<p>Kentrung 3</p>
<p>Kentrung 4</p>


// Javascript
const nodeResults = document.getElementsByTagName('p')
nodeResults[0].style.color = 'red'
nodeResults[1].style.color = 'blue'
nodeResults[2].style.color = 'purple'


// Kết quả
<p style="color: red;">Kentrung 1</p>
<p style="color: blue;">Kentrung 2</p>
<p style="color: purple;">Kentrung 3</p>
<p>Kentrung 4</p>

4. getElementsByName()

Trả về tập hợp các phần tử theo giá trị của thuộc tính name. Kết quả được trả về dưới dạng một đối tượng NodeList object.

document.getElementsByName(nameAttribute)

nameAttribute là giá trị của thuộc tính name của phần tử muốn tìm kiếm.

Ví dụ: tìm tất cả các phần tử HTML có thuộc tính name là test, phần tử thứ nhất cho chữ màu đỏ, thứ hai cho chữ màu xanh, thứ ba cho chữ màu tím.

// HTML
<div name="test">Kentrung 1</div>
<h3 name="test">Kentrung 2</h3>
<h6 name="test">Kentrung 3</h6>
<p name="test">Kentrung 4</p>


// Javascript
const nodeResults = document.getElementsByName('test')
nodeResults[0].style.color = 'red'
nodeResults[1].style.color = 'blue'
nodeResults[2].style.color = 'purple'


// Result
<div name="test" style="color: red;">Kentrung 1</div>
<h3 name="test" style="color: blue;">Kentrung 2</h3>
<h6 name="test" style="color: purple;">Kentrung 3</h6>
<p name="test">Kentrung 4</p>

5. querySelector()

Trả về phần tử đầu tiên phù hợp với bộ chọn CSS.

document.querySelector(css-selector)

css-selector là bộ chọn CSS chẳng hạn như #idName, .className, hoặc div > span

document.querySelector('.btn') // class name
document.querySelector('#root') // id name
document.querySelector('button') // tag name
document.querySelector('div span') // theo kiểu css

Ví dụ: tìm phần tử div đầu tiên và cho chữ màu đỏ.

// HTML
<div>DIV 1</div>
<div>DIV 2</div>


// Javascript
var firstDiv = document.querySelector('div')
firstDiv.style.color = 'red'


// Kết quả
<div style="color: red;">DIV 1</div>
<div>DIV 2</div>

6. querySelectorAll()

Trả về tập hợp các phần tử phù hợp với bộ chọn CSS. Kết quả được trả về dưới dạng một đối tượng NodeList object.
Không giống như querySelector chỉ trả về phần tử đầu tiên phù hợp, querySelectorAll trả về tất cả.

document.querySelectorAll(css-selector)

css-selector là bộ chọn CSS chẳng hạn như #idName, .className, hoặc div > span

Ví dụ: tìm tất cả các phần tử p và cho chữ sang màu đỏ

// HTML
<p>Kentrung 1</p>
<p>Kentrung 2</p>
<p>Kentrung 3</p>


// Javascript
const paragraphs = document.querySelectorAll('p')
for(var p of paragraphs) {
    p.style.color = 'red'
}


// Kết quả
<p style="color: red;">Kentrung 1</p>
<p style="color: red;">Kentrung 2</p>
<p style="color: red;">Kentrung 3</p>