Hướng dẫn nodename javascript

Nội dung chính Show

Các loại tên Node (nodeName) trong JavaScript
nodeName trong JavaScript là gì
Tổng kết

Hướng dẫn cách sử dụng nodeName trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính nodeName để lấy tên Node của một Node chỉ định sau bài học này.

Các loại tên Node (nodeName) trong JavaScript

Trong JavaScript, tương ứng với 12 loại nodeType mà chúng ta đã học trong bài nodeType trong JavaScript sẽ có 12 loại tên Node (nodeName) như bảng sau đây:

Node Type	Node Name	Ý nghĩa
1 ELEMENT_NODE	Giá trị của Element.tagName	Node phần tử
2 ATTRIBUTE_NODE	Giá trị của Attr.name	Node thuộc tính
3 TEXT_NODE	`"#text"`	Node văn bản
4 CDATA_SECTION_NODE	`"#cdata-section"`	Node SECTION của CDATA
5 ENTITY_REFERENCE_NODE	Tên của Node tham chiếu thực thể	Node tham chiếu thực thể
6 ENTITY_NODE	Tên của Node khai báo thực thể	Node khai báo thực thể
7 PROCESSING_INSTRUCTION_NODE	Giá trị của ProcessingInstruction.target	Node hướng dẫn xử lý
8 COMMENT_NODE	`"#comment"`	Node comment
9 DOCUMENT_NODE	`"#document"`	Node tài liệu
10 DOCUMENT_TYPE_NODE	Giá trị của DocumentType.name	Node loại tài liệu
11 DOCUMENT_FRAGMENT_NODE	`"#document-fragment"`	Node đoạn tài liệu
12 NOTATION_NODE	Tên của Node ký hiệu	Node ký hiệu

Sau khi lấy một Node thông qua các phương thức như getElementById hoặc querySelector mà chúng ta đã học trong các bài trước, chúng ta có thể tìm ra tên Node của Node này thông qua thuộc tính nodeName mà Kiyoshi sẽ hướng dẫn dưới đây.

Xem thêm: getElementById trong JavaScript
Xem thêm: querySelector trong JavaScript

nodeName trong JavaScript là gì

nodeName trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy tên Node của một Node chỉ định.

Cú pháp sử dụng thuộc tính nodeName trong JavaScript như sau:

node.nodeName

Thuộc tính nodeName có tác dụng tham chiếu đến Node chỉ định và trả về kết quả là một DOMString đại diện của Node đó, có giá trị tương ứng trong bảng nodeName mà Kiyoshi hướng dẫn ở phần trên.

Mã mẫu

Hãy cùng tìm hiểu cách lấy tên Node của Node chỉ định bằng thuộc tính nodeName trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng nodeName </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div id="box">
   
  <p>Ninh Bình</p>
  <p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy tên Node bằng nodeName </button>

<script>
function getElements(){
    let element = document.getElementById('box');
    let children = element.childNodes;

    let len = children.length;
    for (let i = 0; i < len; i++){
        console.log(children.item(i).nodeName);
    }
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì các Node con của Node có id="box" sẽ được lấy thông qua thuộc tính childNodes. Sau đó bằng vòng lặp, chúng ta kiểm tra và lấy tên Node của từng Node con này bằng thuộc tính nodeName rồi xuất ra màn hình console như sau:

Xem thêm: childNodes trong JavaScript và cách lấy các Node con

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng nodeName trong JavaScript để lấy tên Node của một Node chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"></p><h3 style="font-size:15px">Bài viết liên quan</h3><ul class="popular-posts"><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/childnodes-trong-javascript/" title="childNodes trong JavaScript và cách lấy các Node con" rel="bookmark">childNodes trong JavaScript và cách lấy các Node con</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/css-selectors-trong-javascript/" title="CSS selectors trong JavaScript" rel="bookmark">CSS selectors trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/currentscript-trong-javascript/" title="currentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lý" rel="bookmark">currentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lý</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/attributes-trong-javascript/" title="attributes trong JavaScript và cách lấy danh sách thuộc tính của Element" rel="bookmark">attributes trong JavaScript và cách lấy danh sách thuộc tính của Element</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/dom-la-gi-trong-javascript/" title="DOM là gì trong JavaScript" rel="bookmark">DOM là gì trong JavaScript</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/firstchild-trong-javascript/" title="firstChild trong JavaScript và cách lấy Node con đầu tiên" rel="bookmark">firstChild trong JavaScript và cách lấy Node con đầu tiên</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/firstelementchild-trong-javascript/" title="firstElementChild trong JavaScript và cách lấy Element con đầu tiên" rel="bookmark">firstElementChild trong JavaScript và cách lấy Element con đầu tiên</a></h3></div></li><li class="popular-posts-item"><div class="popular-posts-title"><h3><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/children-trong-javascript/" title="children trong JavaScript và cách lấy các Element con" rel="bookmark">children trong JavaScript và cách lấy các Element con</a></h3></div></li></ul></div><div id="keugoi"><span>Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!</span></div><section class="icon-bar-2" style="border-bottom:dotted grey .3px!important"><a target="_blank" title="chia sẻ qua facebook" rel="noopener noreferrer" href="https://www.facebook.com/sharer/sharer.php?u=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/nodename-trong-javascript/" class="facebook"><i class="fa fa-facebook"></i></a> <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/intent/tweet?url=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/nodename-trong-javascript/" title="chia sẻ qua twitter" class="twitter"><i class="fa fa-twitter"></i></a> <a target="_blank" rel="noopener noreferrer" href="https://getpocket.com/edit?url=https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/nodename-trong-javascript/" title="chia sẻ qua pocket" class="pocket"><i class="fa fa-get-pocket"></i></a> <span class="zalo-share-button" title="chia sẻ qua zalo" style="margin-left:18px;margin-bottom:-3px" data-href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/nodename-trong-javascript/" data-oaid="579745863508352884" data-layout="3" data-color="blue" data-customize="false"></span></section><p class="ico-folder"><a target="_blank" href="https://laptrinhcanban.com/"><span itemprop="HOME">HOME</span></a><span class="sya"></span>>> <a target="_blank" class="article-category-link" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/">học javascript - lập trình javascript cơ bản</a>>><a target="_blank" class="article-category-link" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/">13. dom trong javascript</a></p><nav id="article-nav"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/nodevalue-trong-javascript/" id="article-nav-older" class="article-nav-link-wrap" style="float:left;text-align:right;padding-right:20px"><strong class="article-nav-caption">Bài sau</strong><div class="article-nav-title">nodeValue trong JavaScript và cách lấy hoặc thiết lập giá trị của Node</div></a><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/textcontent-trong-javascript/" id="article-nav-newer" class="article-nav-link-wrap" style="float:right;text-align:left;padding-left:20px"><strong class="article-nav-caption">Bài tiếp</strong><div class="article-nav-title">textContent trong JavaScript và cách lấy hoặc thiết lập giá trị text của Node</div></a><span id="ezoic-pub-ad-placeholder-611" class="ezoic-adpicker-ad"></span></nav><div id="recent_posts_down"><div class="widget_athemes_tabs"><ul id="widget-tab" class="clearfix widget-tab-nav"><li class="active">Bài viết mới nhất</li></ul><div class="widget"><ul><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/lam-tron-so-trong-javascript/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban46.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/lam-tron-so-trong-javascript/">Làm tròn số trong JavaScript (Math.round, Math.ceil, Math.floor)</a></span> <span>tháng 7 1, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/so-mu-trong-javascript/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban45.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/so-mu-trong-javascript/">Số mũ trong JavaScript (Math.pow, Math.exp)</a></span> <span>tháng 7 1, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/math-max-math-min-trong-javascript/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban44.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/math-max-math-min-trong-javascript/">Math.max và Math.min trong JavaScript</a></span> <span>tháng 7 1, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/math-random-trong-javascript/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban43.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/math-object-trong-javascript/math-random-trong-javascript/">Math.random trong JavaScript</a></span> <span>tháng 7 1, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/throw-trong-javascript/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban42.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/throw-trong-javascript/">throw trong JavaScript và cách trả về ngoại lệ tuỳ ý</a></span> <span>tháng 7 1, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/cac-ngoai-le-trong-javascript-va-cach-xu-ly/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban41.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/cac-ngoai-le-trong-javascript-va-cach-xu-ly/">Các ngoại lệ trong JavaScript và cách xử lý tương ứng</a></span> <span>tháng 7 1, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/try-catch-trong-javascript/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban40.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/try-catch-trong-javascript/">try...catch trong JavaScript và cách xử lý ngoại lệ</a></span> <span>tháng 7 1, 2022</span></div></li><li class="clearfix"><div class="widget-entry-thumbnail"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/xu-ly-ngoai-le-cua-ham-xu-ly-mo-ta-trong-khoi-try/"><img width="60px" height="60px" class="ezlazyload attachment-thumb-small size-thumb-small wp-post-image" alt="" ezimgfmt="rs rscb2 src ng ngcb2" data-ezsrc="/css/images/thumbnail_img/laptrinhcanban39.webp"></a></div><div class="widget-entry-summary"><span style="margin:0"><a target="_blank" href="https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/xu-ly-ngoai-le-trong-javascript/xu-ly-ngoai-le-cua-ham-xu-ly-mo-ta-trong-khoi-try/">Xử lý ngoại lệ của hàm xử lý mô tả trong khối try</a></span> <span>tháng 7 1, 2022</span></div></li></ul></div></div></div><footer class="entry-meta entry-footer"></footer><hr class="entry-footer-hr"></div><span class="ezoic-autoinsert-ad ezoic-longest_content"></span><span style="clear:both;display:block" id="ez-clearholder-leader-1"></span><span class="ezoic-ad ezoic-at-0 leader-1 leader-1560 adtester-container adtester-container-560" data-ez-name="laptrinhcanban_com-leader-1"><span id="div-gpt-ad-laptrinhcanban_com-leader-1-0" ezaw="300" ezah="250" style="position:relative;z-index:0;display:inline-block;padding:0;min-height:250px;min-width:300px" class="ezoic-ad"><script data-ezscrex="false" data-cfasync="false" type="text/javascript" style="display:none">if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[300,250],'laptrinhcanban_com-leader-1','ezslot_15',560,'0','0'])};if(typeof __ez_fad_position != 'undefined'){__ez_fad_position('div-gpt-ad-laptrinhcanban_com-leader-1-0')};

Profile