Home >
Article > Web Front-end > JavaScript Advanced DOM Document, Simple Encapsulation and Calling, Dynamically Adding and Deleting Styles (6)_Basic Knowledge
JavaScript Advanced DOM Document, Simple Encapsulation and Calling, Dynamically Adding and Deleting Styles (6)_Basic Knowledge
WBOYOriginal
2016-05-16 17:54:311057browse
http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html, you will definitely have a deeper understanding when you come back to read the article here. Because I introduce few conceptual things here, look at the examples below, which may be a bit difficult for beginners!
The DOM representation of this document is as follows:
The picture represents a tree of an HTML document.
All DOM tree structures are represented by a number of different types of Node objects. The firstChild, lastChild, nextSibling, previousSibling and ParentNode properties provide a way to traverse the tree of nodes , appendChild, Methods such as removeChild, replaceChildh and insertBefore can add nodes to or delete nodes from the document. It’s okay if you don’t understand. Next, I will use a lot of examples to make you understand.
Tools.insertElement = function(n,e){ if(typeof n == "string") n = document.getElementById(n); var li = document.createElement(e); var a = document.createElement("a"); a.setAttribute("href","#"); var txt = document.createTextNode( "HotBlog"); a.appendChild(txt); li.appendChild(a); var parent = n.parentNode; parent.insertBefore(li,n); };
Note: You can add
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn