Chào bạn, ở phần trước mình đã chia sẽ cho bạn 6 Javascript DOM Methods gặp nhiều và sử dụng nhiều nhất, vì vậy để tiếp tục series này, mình sẽ tiếp tục chia sẻ các hàm được ứng dụng nhiều nhất trong DOM.
Ở phần 2 này, mình sẽ cùng điểm qua cho các bạn 13 Javascript DOM Methods cũng dễ gặp nhất. Nào, cùng tìm hiểu các hàm này nhé. Các bạn có thể xem phần 1 tại đây:
http://www.hieuquoc.info/2020/03/tim-hieu-15-javascript-dom-methods-1.html
1. addEventListener()
Phương thức addEventListener() gắn một trình xử lý sự kiện vào phần tử được chỉ định.
Phương thức addEventListener() gắn một trình xử lý sự kiện vào một phần tử mà không ghi đè các trình xử lý sự kiện hiện có.
Syntax
element.addEventListener(event, function, useCapture)
- event là loại sự kiện (như “click” hoặc “mousedown”).
- function là chức năng chúng ta muốn gọi khi sự kiện xảy ra.
- useCapture là một giá trị boolean xác định có sử dụng sự kiện bubbling hay sự kiện capturing. Tham số này là tùy chọn.
Lưu ý rằng bạn không sử dụng tiền tố “on” cho sự kiện; Sử dụng “click” thay vì “onclick”.
Code Example
Ví dụ sau khi bạn nhấn vào vị trí bất kì trên màn hình thì dòng chữ Hello World sẽ hiện ra.
<p>Nhấn vào vị trí bất kì trên màn hình.</p>
<p id="demo"></p>
<script>
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World!";
});
</script>
See the Pen
CodePen Home js dom methods - demo 7.1 - addEventListener() by Hiu Dev (@hiudev)
on CodePen.
Để dễ hiểu hơn, các bạn thể xem qua ví dụ sau, khi ta nhấn vào một button thì một popup hiện ra:
<button>Click Me</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',foo);
function foo() { alert('Hello, Hiu Dev Blog'); }
</script>2. removeEventListener()
Phương thức removeEventListener() sẽ loại bỏ các trình xử lý sự kiện đã được đính kèm với phương thức addEventListener()
Syntax
element.removeEventListener(event, function, useCapture)
Các thông số trên cũng như addEventListener().
Code Example
Ví dụ, khi bạn rê chuật trên màn hình, một số random sẽ hiện ra, và nhấp vào stop để dừng lại bằng cách dùng removeEventListener()
<style type="text/css">
#result{
color: red;
font-size: 20px;
font-weight: bold;
}
</style>
<p id="result"></p>
<button onclick="removeHandler()">Stop</button>
<script>
document.addEventListener("mousemove", function() {
document.getElementById("result").innerHTML = Math.random();
});
function removeHandler() {
document.removeEventListener("mousemove", myFunction);
}
</script>
3. createElement()
Phương thức createElement() có chức năng tạo một node (hay một thẻ html) với tên node được xác định.
Syntax
document.createElement(nodename)
- nodename: là tên node sẽ được tạo. Ví dụ div, button, li...
Sau khi đã tạo node, ta có thể sử dụng phương thức createTextNode() để tạo nội dung văn bản và gán cho node đó.
Cuối cùng sử dụng dụng phương thức element.appendChild() hoặc element.insertBefore() để gắn node vừa được tạo vào trang.
Code Example
Cùng tìm hiểu ví dụ I need pizzas dưới đây nhé:<button onclick="myFunction()">I need pizzas</button>
<script>
function myFunction() {
var btn = document.createElement("span");
btn.innerHTML = "🍕";
document.body.appendChild(btn);
}
</script>4. appendChild()
Phương thức này sẽ chèn một nút vào phía cuối cùng của phần tử, tham số là nút cần chèn, bạn chú ý rằng tham số là nút phần tử cần chèn đồng thời cũng là đối tượng vậy nên bạn có thể lấy trong hồ sơ hoặc tạo ra nó bằng DOM.
Syntax
node.appendChild(node)
- nodename: là tên node sẽ được tạo. Ví dụ div, button, li...
Code Example
Ví dụ, bạn muốn thêm mới một element vào list:
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<button onclick="myFunction()">Add new</button>
<script>
function myFunction() {
var x = prompt("Input new", "");
var node = document.createElement("LI");
var textnode = document.createTextNode(x);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>5. removeChild()
Phương thức remove() được dùng để xóa phần tử HTML.
Syntax
node.removeChild(node)
- nodename: là tên node sẽ được xóa.
Code Example
Ví dụ, kế thừa ví dụ appendChild() thì ví dụ này, mình muốn xóa các phần tử đầu tiên trong list:
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<button onclick="myAdd()">Add new</button>
<button onclick="myRemove()">Remove</button>
<script>
function myAdd() {
var x = prompt("Input new", "");
var node = document.createElement("LI");
var textnode = document.createTextNode(x);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function myRemove() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>6. replaceChild()
replaceChild() thay thế một phần tử con với nhau phụ thuộc yếu tố parent.
Syntax
node.replaceChild(newnode, oldnode)
- newnode: tên node sẽ được thêm mới
- oldnode: tên node sẽ được xóa và thay thế
Code Preview
Ví dụ sau sẽ thêm mới element vào vị trí đầu tiên:
<ul id="myList">
<li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var elmnt = document.createElement("li");
var textnode = document.createTextNode("Water");
elmnt.appendChild(textnode);
var item = document.getElementById("myList");
item.replaceChild(elmnt, item.childNodes[0]);
}
</script>7. cloneNode()
Phương thức này sẻ nhân bản phần tử bạn chọn để tạo ra một bản copy. Phương thức sẽ nhân bản tất cả các thuộc tính và các nút chứa trong phần tử, sau khi có được bản sao chúng ta có thể thao tác với phần tử và dùng các phương thức khác để chèn vào bất kỳ đâu trong hồ sơ.
Syntax
node.cloneNode(deep)
- deep là một boolean (true: nhân bản; false: mặc định)
Code Example
Ví dụ bạn muốn nhân đôi nội dung của thẻ div:
<button onclick="myFunction()">Click me</button>
<div style="border:1px solid #ddd;background-color:#ccc; margin: 20px; padding: 10px;">
<p style="color:green;">Hello, Hiu Dev Blog</p>
</div>
<script>
function myFunction() {
var elmnt = document.getElementsByTagName("DIV")[0];
var cln = elmnt.cloneNode(true);
document.body.appendChild(cln);
}
</script>8. insertBefore()
Phương thức này cũng được sử dụng nhiều chẳng kém gì phương thức appendChild. Phương thức này dùng để chèn một nút phần tử vào phía trước phần tử bạn xét.
Syntax
node.appendChild(node)
- node: tên node bạn muốn chèn
Code Example
<div id="div2">Hello,</div>
<div id="div1">Hiu Dev Blog</div>
<script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.insertBefore(div2);
</script>Có thể nói đây là phương thức vô cùng hữu dụng, tuy nhiên trong DOM lại không có phương thức insertAffter, nếu muốn thì bạn cũng có thể xây dựng một hàm nhỏ dùng để chèn phần tử vào phía sau, nhưng thực tế nếu dùng linh hoạt thì insertBefore cũng làm được. Sau này ta thấy thư viện Jquery cũng đã xây dựng phương thức after dùng để chèn về phía sau phần tử.
9. createDocumentFragment()
Phương thức createDocumentFragment() sẽ tạo ra một đối tượng Node Object ảo với tất cả các thuộc tính và phương thức của một đối tượng Node Object.
Phương thức createDocumentFragment() rất hữu ích khi bạn muốn sửa đổi nội dung một node nào đó trong trang.
Syntax
document.createDocumentFragment()
Code Example
Trong ví dụ này, chúng ta tạo nhiều hàng và ô của bảng bằng phương thức createElement(), sau đó thêm chúng vào một đối tượng DocumentFragment, cuối cùng thêm document vào HTML <table> bằng phương thức appendChild().
<style>tr,td {border: 1px solid #ccc; padding: 10px}</style>
<table></table>
<script>
var table = document.querySelector("table");
var df = document.createDocumentFragment();
for(var i=0; i<5; i++) {
var td = document.createElement("td");
var tr = document.createElement("tr");
td.textContent = i;
tr.appendChild(td)
df.appendChild(tr);
}
table.appendChild(df);
</script>10. getComputedStyle()
Đôi khi bạn muốn kiểm tra các giá trị thuộc tính CSS của một phần tử trước khi thực hiện bất kỳ thay đổi nào.
Bạn có thể sử dụng thuộc element.style để làm tương tự, tuy nhiên phương thức getComputedStyle() đã được thực hiện chỉ cho mục đích này, nó trả về các giá trị được tính toán chỉ đọc của tất cả các thuộc tính CSS của một phần tử HTML được chỉ định.
Syntax
var style = getComputedStyle(ele, [pseudoEle])
Code Preview
Ví dụ, mình có một box có chiều dài 410px và dùng getComputedStyle() để đo:
<div style='width:410px; background: #ccc; height: 50px'></div>
<script>
var style = getComputedStyle(document.querySelector('div'));
document.write(style.width);
</script>11. setAttribute()
setAttribute() dùng để thêm một thuộc tính mới cho phần tử HTML, hoặc cập nhật các giá trị của một thuộc tính.
Syntax
ele.setAttribute(name, value);
- name là tên của attribute mà các bạn muốn tạo ra.
- value là giá tri của attribute các bạn muốn set.
Code Example
Ví dụ sau sẽ biến Hello World thành màu đỏ bằng cách dùng setAttribute().
<style>
.democlass { color: red; } </style>
<h1>Hello World</h1>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
}
</script>12. getAttribute()
Các phương thức getAttribute() trả về giá trị của một thuộc tính cụ thể.
Syntax
element.getAttribute(attributename)
- attributename là tên của attribute mà các bạn muốn lấy.
Code Example
Ví dụ sau để kiểm tra value của target attribute của liên kết:
Hello, welcome to <a id="myAnchor" href="dom_obj_attributes.asp" target="_blank">Hiu Dev Blog</a>.<br/>
<button onclick="myFunction()">Check target value</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").getAttribute("target");
document.getElementById("demo").innerHTML = x;
}
</script>13. removeAttribute()
Các phương thức removeAttribute() dùng để loại bỏ một thuộc tính nhất định của một yếu tố cụ thể của HTML.
Syntax
element.removeAttribute(attributename)
- attributename: là tên thuộc tính.
Code Example
Ví dụ sau để xóa gạch chân của thẻ liên kết:
<a id="myAnchor" href="https://www.hieuquoc.info">Visit hiu Dev Blog</a>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myAnchor").removeAttribute("href");
}
</script>14. Một số phương thức khác
Để liệt kê hết các phương thức thì rất là nhiều, nhưng quan trọng vẫn là khả năng tự học, mình sẽ liệt tất cả các Javascript DOM Methods dưới đây:
- getNamedItem()
- item()
- removeNamedItem()
- setNamedItem()
- console.assert()
- console.clear()
- console.count()
- console.error()
- console.group()
- console.groupCollapsed()
- console.groupEnd()
- console.info()
- console.log()
- console.table()
- console.time()
- console.timeEnd()
- console.trace()
- console.warn()
- addEventListener()
- adoptNode()
- close()
- createAttribute()
- createComment()
- createDocumentFragment()
- createElement()
- createEvent()
- createTextNode()
- execCommand()
- fullscreenEnabled()
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
- hasFocus()
- importNode()
- normalize()
- normalizeDocument()
- open()
- querySelector()
- querySelectorAll()
- removeEventListener()
- renameNode()
- write()
- writeln()
- addEventListener()
- appendChild()
- blur()
- click()
- cloneNode()
- compareDocumentPosition()
- contains()
- exitFullscreen()
- focus()
- getAttribute()
- getAttributeNode()
- getBoundingClientRect()
- hasAttribute()
- hasAttributes()
- hasChildNodes()
- insertAdjacentElement()
- insertAdjacentHTML()
- insertAdjacentText()
- insertBefore()
- isDefaultNamespace()
- isEqualNode()
- isSameNode()
- isSupported()
- normalize()
- remove()
- removeAttribute()
- removeAttributeNode()
- removeChild()
- removeEventListener()
- replaceChild()
- requestFullscreen()
- scrollIntoView()
- setAttribute()
- setAttributeNode()
Lời kết
Quả thật là có rất nhiều phương thức phải không nào, nhưng chỉ cần làm nhiều, gặp nhiều, sẽ nhớ rất nhiều hàm, và cả những phương thức hay gặp.
Phần 2 ở series này mình chỉ share cho các bạn nhưng phương thức hay gặp ở trên, và tổng hợp các phương thức khác để bạn tìm hiểu. Và ở phần tới sẽ là những kinh nghiệm trong việc dùng DOM mà mình muốn chia sẻ đến các bạn.
Các bạn có thể xem tất cả các code demo ở phần 1, phần 2 tại link dưới đây:
Hi vọng bài viết này sẽ giúp bạn đôi chút trong qua trình thao tác với DOM. Vẫn còn rất nhiều điều hay ho. Hãy tìm hiểu thêm cho bản thân nữa nhé!
Cảm ơn bạn đã theo dõi bài viết.
By Hiếu Quốc
No comments:
Post a Comment
Cảm ơn bạn đã bình luận.