Bài 2. Sử dụng biến window để lấy thông tin của site

Xin chào các bạn. hướng dẫn hôm nay mình sẽ sẽ đi chuyên sâu vào biến window để lấy nội dung trang web. Như các ví dụ đã nêu ở bài 1 các bạn có thể dùng biến window để có thể get được những nội dung của trang web. Ở bài này mình sẽ thêm một số ví dụ khác hay hơn nữa.



Để lấy thông tin của trang nào đó mình hay sử phương thức querySelector và querySelectorAll để tìm được element của site.

I. querySelector: 
Nó trả về phần tử đầu tiên mà nó tìm được trong truy vấn đặt trong đó. Ví dụ bạn có một đống thẻ a và khi gọi lệnh này window.document.querySelector("a") thì nó sẽ trả về phần tử của thẻ a đầu tiên.
Nhưng mình hay sử dụng nó để lấy element trong truy vấn được xác định là duy nhất để cho nhanh.

Ví dụ 1: Lấy toàn bộ thông tin bài viết của một bài viết blogspot (tiêu đề, url, nội dung, ngày đăng, tên người viết bài, nhãn)

iimPlayCode("url goto=http://imacros-nangcao.blogspot.com/2017/01/loi-mo-au.html");
var data_post = {};
data_post.title = window.document.querySelector('.post-title').innerHTML;
data_post.url = window.document.querySelector("link[rel='canonical']").getAttribute("href");
data_post.content = window.document.querySelector(".entry-content").innerHTML;
data_post.author = window.document.querySelector(".post-author span[itemprop='name']").innerHTML;
data_post.date = window.document.querySelector("abbr.published").getAttribute("title");
data_post.tag = window.document.querySelector(".post-labels a[rel='tag']").innerHTML;
window.console.log(data_post);

Khoan đề cập đến thành phần code. bạn cứ copy chạy thử. và bật console của Firefox lên (Ctrl + Shift + K) để xem thông tin trả về nhé. Nó sẽ hiện 1 object trong đó có chứa các thông tin : tiêu đề, url, nội dung, ngày đăng, tên người viết bài, nhãn của bài viết.
OK, tiếp tục phân tích code nhé

data_post.url = window.document.querySelector("link[rel='canonical']").getAttribute("href")

query : "link[rel='canonical']" nghĩa là lấy phần tử của thẻ có tên là link và có đặc tính rel='canonical' tiếp theo phương thức getAttribute("href") sẽ lấy nội dung của đặc tính "href", sau đó sẽ gán vào data_post.title
Tiếp theo là đến nội dung bài viết

data_post.content = window.document.querySelector(".entry-content").innerHTML;

lấy phần tử có class là .entry-content (đây là thẻ div chứa nội dung của bài viết) thuộc tính innerHTML chứa nội dung bên trong của phần tử đó.
tương tự các thành phần còn lại.
Các query có cấu trúc của css selector, các bạn có thể đọc bài này để tìm hiểu thêm nhé.
http://www.w3schools.com/cssref/css_selectors.asp
Trên đây là 1 ví dụ để lấy các thông tin của bài viết blogspot. Còn việc xử lý các thông tin này thì tùy các bạn nhé, có thể dùng nó để post lại vào site Wordpress của bạn.

II. querySelectorAll
Nó trả về 1 mảng các element mà nó tìm được trong truy vấn. Mình hay sử dụng nó để lấy danh sách các phần tử giống nhau. ví dụ danh sách các url bài viết trong list post.

Ví dụ 1. Ví dụ này mình sẽ lấy danh sách url bài viết của page: http://imacros-nangcao.blogspot.com/search/label/iMacros%20n%C3%A2ng%20cao

iimPlayCode("url goto=http://imacros-nangcao.blogspot.com/search/label/iMacros%20n%C3%A2ng%20cao");
var els_a = window.document.querySelectorAll(".post-title a");
var array_url = [];
for(var i=0;i<els_a.length;i++){
array_url.push(els_a[i].getAttribute("href"));
}
window.console.log(array_url);

Khi bạn chạy code sau. nó sẽ hiện 1 mảng chứa danh sách các url của bài viết.

Ví dụ 2. Ở ví dụ tiếp theo này mình sẽ lấy thông tin cơ bản (url,title,date) của danh sách bài viết.

iimPlayCode("url goto=http://imacros-nangcao.blogspot.com/search/label/iMacros%20n%C3%A2ng%20cao");
var posts = window.document.querySelectorAll(".post");
var data_posts =[];
for(var i = 0;i<posts.length;i++){
var post = posts[i];
var data_post = {};
data_post.url = post.querySelector(".post-title a").getAttribute("href");
data_post.title = post.querySelector(".post-title a").innerHTML;
data_post.date = post.querySelector("abbr.published").getAttribute("title");
data_posts.push(data_post);
}
window.console.log(data_posts);

Khi chạy code trên, bạn sẽ thấy trên console báo về 1 mảng chứa các object về thông tin của bài viết (url,title,date)

Trên đây là 2 lệnh mình hay sử dụng nhất để lấy thông tin của page (ngoài ra còn có các lệnh như getElementsByClassName(),getElementsByTagName()). Nếu bạn sử dụng thành thạo 2 câu lệnh này bạn sẽ lấy được hầu hết các thông tin của một bài viết hay 1 page nào đó để bạn sử dụng trong vấn đề lấy dữ liệu để post lên trang web của bạn, hoặc dùng để xử lý thông tin giúp bạn trong một phân đoạn nào đó.

Dưới đây là một số tài liệu bạn có thể tham khảm thêm:
1. Cấu trúc selector: http://www.w3schools.com/cssref/css_selectors.asp
2. JavaScript HTML DOM Elements: http://www.w3schools.com/js/js_htmldom_elements.asp
3. The HTML DOM Element Object: http://www.w3schools.com/jsref/dom_obj_all.asp