Download Query DOM JavaScript and more Schemes and Mind Maps Computer Communication Systems in PDF only on Docsity!
Query DOM - How to find an element?
AGENDA
. Find an element . Find all elements
1. Find an element
Name Desc
1 id-named global variables supported mainly for compatibility --> avoid using this
document.getElementById(id) (not available on Element)
return null if not found, return the element having id
2 document.querySelector(selector)
return the first Element match CSS selector, using DFS Pre- order, return null otherwise
Easy Frontend
const title = document.getElementById('title'); if (title) { console.log(title.textContent) }
// remember to have hash before the id (css selector) const title = document.querySelector('#title'); if (title) { console.log(title.textContent) }
getElementById querySelector
for document only YES NO, also available on Element
search by id css selector
return element having match id the first node matches selector
when to use query by id query by others
REMEMBER: Narrow down the scope when querying
Javascript cho người mới bắt đầu 🎉
39.99$
// DON'T
const productName = document.querySelector('#product-123 > .product__name');
const productPrice = document.querySelector('#product-123 > .product__price'); // as it need to search on the whole tree over and over again for each query
// DO: arrow down the query scope // 1. Get the product first // 2. From the product element, search the element inside it's subtree only const product = document.getElementById('product-123'); if (product) { const productName = product.querySelector('.product__name'); const productPrice = product.querySelector('.product__name'); }
Can use multiple CSS selectors by commas
- Learn Javascript
- Learn ReactJS
- Learn NextJS
- Learn Javascript
- Learn ReactJS
- Learn NextJS
// 1. Narrow down the scope of querying const todoListElement = document.getElementById('todoList');
// 2. Make sure to check if existed before using if (todoListElement) { // 3. Some ways of query all li todoListElement.querySelectorAll('li'); todoListElement.querySelectorAll('ul > li'); todoListElement.querySelectorAll('ul.todo-list > li');
todoListElement.querySelectorAll( 'ul[data-weekday="monday"] > li, ul[data-weekday="tuesday"] > li' ); }
Source: https://javascript.info/searching-elements-dom
📝 Một vài lưu ý
DOM càng lớn, search càng tốn thời gian. Hãy thu hẹp phạm vi search khi có thể. getElementById(): query by id querySelector(): query by css selector querySelectorAll(): query all by css selector
Tham khảo
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://javascript.info/searching-elements-dom
Khoá học Javascript cho người mới bắt đầu 2021 🎉
Tác giả: Hậu Nguyễn - Founder Easy Frontend Khoá học chỉ được published trên Udemy, không thông qua trung gian. Khoá học không bán dạng videos upload trên Google Drive hay bất cứ hình thức nào tương tự. Khoá học có nhóm discord để hỗ trợ trong quá trình học tập.
☎ Liên hệ tác giả để được hỗ trợ:
✅ Facebook: https://www.facebook.com/nvhauesmn/ ✅ Fanpage: https://www.facebook.com/learn.easyfrontend ✅ Youtube Channel: https://www.youtube.com/easyfrontend
