›

Bài giảng Javascript DOM - Lương Trần Hy Hiến

pdf 55 trang huongle 3340
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Javascript DOM - Lương Trần Hy Hiến", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_javascript_dom_luong_tran_hy_hien.pdf

Nội dung text: Bài giảng Javascript DOM - Lương Trần Hy Hiến

  1. Javascript - DOM Luong Tran Hy Hien 1
  2. Nội dung 1. Tổng quan về DOM – HTML 2. Một số đối tượng 3. Làm việc với document - DOM 4. Xử lý sự kiện (event) 5. Một số ví dụ 2
  3. 1. Tổng quan về DOM – HTML • HTML DOM = HTML Document Object Model • Xem trang web như một cây gồm nhiều nút (node) • Mỗi nút là một thành phần (tag HTML, thuộc tính, nội dung của tag) • DOM định nghĩa một cách để truy xuất và điều khiển các thành phần trong 1 trang web 3
  4. 1. Tổng quan về DOM – HTML 4
  5. 1. Tổng quan về DOM – HTML 5
  6. 1. Tổng quan về DOM – HTML 6
  7. 1. Tổng quan về DOM – HTML • Mỗi đối tượng DOM đều có danh sách thuộc tính (Properties) và danh sách các phương thức (Method) tương ứng. • objectName.propertyName= value • Vídụ: document.bgColor= “blue”; • objectName.methodName() • Vídụ: window.focus(); 7
  8. 2. Một số đối tượng trong DOM 1. window 2. location 3. history 4. navigator 5. document 6. image 7. form 8. element 8
  9. 2.1. DOM - window • Là thể hiện của đối tượng cửa sổ trình duyệt • Tồn tại khi mở 1 tài liệu HTML • Sử dụng để truy cập thông tin window • Điều khiển các sự kiện xảy ra trong window • Nếu tài liệu định nghĩa nhiều frame, browser tạo 1 window object cha và các window object con cho từng frame 9
  10. 2.1. DOM - window 10
  11. 2.2. DOM - location Chứa thông tin hiện tại của URL 11
  12. 2.3. DOM - history Cung cấp danh sách các URL đã được duyệt bởi người sử dụng. 12
  13. 2.4. DOM - navigator Cung cấp thông tin về trình duyệt. 13
  14. 2.5. DOM - document • Biểu diễn cho toàn bộ các thành phần trong 1 tài liệu HTML • Dùng để lấy thông tin về tài liệu, các thành phần HTML và xử lý sự kiện 14
  15. 2.5. DOM - document 15
  16. 2.6. DOM – image • Truy xuất đến tag trên trang web • Có thể truy xuất thông qua: – document.images[index] – document.images[“ImageName”] – document.ImageName • Một số thuộc tính của Image Obj – alt, border, classname, title, – width, height, hspace, vspace, – id, name, src, lowsrc, longDesc, – isMap, complete 16
  17. 2.7. DOM – form • Dùng để truy xuất đến tag trên trang web • Có thể truy xuất thông qua – document.forms[index] – document.forms[“FormName”] – document.FormName • Một số thuộc tính – action, method, id, name, target – classname, title, language, dir – elements[ ] • Một số phương thức – reset( ), submit( ) 17
  18. 2.8. DOM – element • Tương ứng với form field. • Cách truy xuất document.formName.controlName document.searchForm.entry document.searchForm.elements[0] document.forms[“searchForm”].elements[“entry”] document.forms[“searchForm”].entry 18
  19. 3. Làm việc với document - DOM Biểu diễn nội dung tài liệu theo cấu trúc cây 19
  20. 3. Làm việc với document - DOM Cấu trúc cây của tài liệu 20
  21. 3. Làm việc với document - DOM 21
  22. 3. Làm việc với document - DOM • getElementById(“id1”): trả về node có giá trị thuộc tính id = id1 • Ví dụ: // // some text // var node = document.getElementById(“id1”); var nodeName = node.nodeName; // p var nodeType = node.nodeType; // 1 var nodeValue = node.nodeValue; // null var text = node.innerText; // some text 22
  23. 3. Làm việc với document - DOM • getElementsByName(name1): trả về danh sách node có giá trị của thuộc tính name = name1 • Ví dụ: var nodeList=document.getElementsByName(“name1”); for(var i=0;i<nodeList.length;++i) { var nodeName= nodeList(i).nodeName; var nodeType=nodeList(i).nodeType; var nodeValue=nodeList.item(i).nodeValue; } 23
  24. Đối tượng Document - DOM • getElementsByTagName (tagName) Trả về danh sách node có NodeName = tagName Ví dụ: var nodeList= document.getElementsByTagName(“img”); for(var i=0;i<nodeList.length;++i) { var nodeName = nodeList(i).nodeName; var nodeType = nodeList(i).nodeType; var nodeValue = nodeList.item(i).nodeValue; }
  25. 3. Làm việc với document - DOM • createElement(nodeName): tạo ra một node HTML mới tùy theo đối số nodeName • Ví dụ: var imgNode=document.createElement(“img”); imgNode.src=“images/test.gif”; // 25
  26. 3. Làm việc với document - DOM • createTextNode(content): tạo ra một textnode mới với nội dung tùy theo đối số content • Ví dụ: var txtNode=document.createTextNode(“New text”); var pNode=document.createElement(“p”); pNode.appendChild(txtNode); // New text 26
  27. 3. Làm việc với document - DOM • nodeName.appendChild(newNode): thêm node mới newNode vào cuối danh sách các node con của một node. • Ví dụ: // Some text var pNode=document.getElementById(“id1”); var imgNode=document.createElement(“img”); imgNode.src=“images/test.gif”; pNode.appendChild(imgNode); // // Some text // 27
  28. 3. Làm việc với document - DOM • nodeName.insertBefore(newNode,childRef): chèn newNode vào trước childRef trong danh sách các node con của một node. // // var pNode=document.getElementById(“id1”); var firstChild=pNode.firstChild; var newNode=document.createTextNode(“Some text”); pNode.insertBefore(newNode,firstChild); // // // Some text // 28
  29. 3. Làm việc với document - DOM • nodeName.removeChild(child): xóa child trong danh sách các node con của một node gọi phương thức, trả về node bị xóa. // Hình ảnh // var pNode=document.getElementById(“id1”); if (pNode.hasChildNodes()) var rmNode=pNode.removeChild(pNode.lastChild); // // // // 29
  30. 3. Làm việc với document - DOM • replaceChild ( newChild, oldChild ) Thay thế node oldChild bằng node newChild trong danh sách các node con của node hiện hành Ví dụ: var replace = document.getElementById(“isReplaced”); if (replace) { var newNode = document.createElement("strong"); var newText = document.createTextNode("strongelement"); newNode.appendChild(newText); replace.parentNode.replaceChild(newNode,replace); } 30
  31. 3. Làm việc với document - DOM • innerHTML Chỉ định nội dung HTML bên trong một node. Ví dụ: // some text var theElement = document.getElementById("para1"); theElement.innerHTML = “Some new text”; // Kết quả : // Some new text 31
  32. 3. Làm việc với document - DOM • innerText Tương tự innerHTML, tuy nhiên bất kỳ nội dùng nào đưa vào cũng được xem như là text hơn là các thẻ HTML. Ví dụ: var theElement = document.getElementById("para1"); theElement.innerText = “Some new text”; // Kết quả hiển thị trên trình duyệt // bên trong thẻ p: “Some new text” 32
  33. 3. Làm việc với document - DOM • setAttribute ( attributeName , value ) Chỉ định attribute của một node với giá trị là value. Ví dụ: Some text var fontNode = document.getElementById(“font1”); fontNode.setAttribute(“color”,”red”); fontNode.setAttribute(“size”,”5”); Some text 33
  34. 3. Làm việc với document - DOM • getAttribute ( attributeName ) Lấy giá trị của một attribute trong node Ví dụ: var font1 = document.getElementById(“font1”); alert(font1.getAttribute(“color”));  removeAttribute ( attributeName ) Hủy một attribute trong node Ví dụ: font1.removeAttribute(“color”); font1.removeAttribute(“size”); 34
  35. 3. Làm việc với document - DOM • Thay đổi định dạng CSS của một node thông qua thuộc tính style Ví dụ: This is a text var node = document.getElementById(“myParagraph”); node.style.color = "green"; node.style.fontSize = "14"; node.style.backgroundColor = "yellow"; 35
  36. 3. Làm việc với document - DOM • Thay đổi định dạng css thông qua thuộc tính className Ví dụ: .look1 { color: black; background-color: yellow; font-style: normal; } .look2 { background-color: orange; font-style: italic; } this is my text var pNode = document.getElementById("p1"); pNode.className = "look2"; 36
  37. 3. Làm việc với document - DOM • Thay đổi tham chiếu đến file CSS Ví dụ: function changeSkin() { document.getElementById("myStyle").href = "css/style2.css"; } Hello world
  38. 4. Xử lý sự kiện 1. Event Object 2. Event Handle 3. Xử lý sự kiện 38
  39. 4.1. Event Object • Events là các sự kiện xảy ra trên trang Web • Do người dùng hoặc do hệ thống tạo ra • Mỗi sự kiện sẽ liên quan đến một event object • Event cung cấp các thông tin – Loại event – Vị trí con trỏ tại thời điềm xảy ra sự kiện • Ví dụ: Xem Slide sau 39
  40. 4.1. Event Object 40
  41. 4.2. Event Handle • Giúp cho người lập trình bắt và xử lý các sự kiện của các đối tượng trong trang web. • Cú pháp • Ví dụ: 41
  42. 4.2. Event Handle event event onabort onload onblur onmousedown onchange onmousemove onclick onmouseout onerror onmouseover onfocus onmouseup onkeydown onreset onkeyup onresize onselect onsubmit 42 onunload
  43. 4.3. Xử lý sự kiện • Cú pháp • Ví dụ: • Lưu ý: Dấu “ ” và ‘ ’ 43
  44. 4.3. Xử lý sự kiện Ví dụ 44
  45. 4.3. Xử lý sự kiện 45
  46. 5. Một số ví dụ function compute(frm) { var x = frm.expr.value; result.innerHTML= x*x; } X = X * X = 46
  47. 5. Một số ví dụ 47
  48. 5. Một số ví dụ • Ví dụ: onFocus – onBlur • Xảy ra khi một thành phần HTML bị focus (onFocus) và mất focus (onBlur) • Ví dụ: 48
  49. 5. Một số ví dụ 49
  50. Ví dụ: Dynamic Table • Viết trang web cho phép tạo table có số dòng, số cột do người dùng nhập vào.
  51. Ví dụ: Dynamic Table body Table 12 Tr 13 Td 21 Td 22 Tr Td Td
  52. Ví dụ: body Table TBody 12 Tr 13 Td 21 Td 22 Tr Td Td
  53. Ví dụ: Dynamic Table • Document.createElement( ) :Tạo một đối tượng thẻ DOM HTML • Object.appendChild( ): Thêm một đối tượng thẻ DOM HTML như là nút con.
  54. Ví dụ: Dynamic Table function CreateTable(divTable) { var tagTable = document.createElement("table"); tagTable.border = 1; var tagTBody = document.createElement("tbody"); tagTable.appendChild(tagTBody); var nDong = txtSoDong.value; var nCot = txtSoCot.value; for (i=0; i<nDong; i++) { var tagTR = document.createElement("tr"); for (j=0; j<nCot; j++) { var tagTD = document.createElement("td"); var textNode = document.createTextNode(i+""+j); tagTD.appendChild(textNode); tagTR.appendChild(tagTD); } tagTBody.appendChild(tagTR); } divTable.appendChild(tagTable); }
  55. Tham khảo • Website W3school • Slide lập trình Web, ĐH KHTN, 2007 55