Simulating THE DOM structure

Document :document element: all the tags in the page, element -element, tag —- element – object Node: all the content in the page (tags, attributes, text (text, line feeds, Spaces, carriage returns)),Node Root element: HTML tag actually, All HTML content, such as tags, attributes, text, and comments, is encapsulated in the DOM as typeThe node typeOf, calledNode object Node. The corresponding node objects for label, attribute, text, and comment areElement node 、Attribute Node (Atrr) 、Text node 、Comment nodes (Comment) 。

Attributes of the node :(you can use the tag -- element. Out, you can use the property node. Out, text node. NodeType: nodeType: 1---- tag,2-- attribute,3-- text nodeName: nodeName: tag node -- uppercase tag name, attribute node -- lowercase attribute name, text node ----#text NodeValue: nodeValue: label node -null, attribute node - attribute value, text node - text contentCopy the code

DOM document tree (document Object Model) correspondence with HTML elements DOM node HTML document element node Tag Attribute Node Attribute Text node Text content Annotation node Annotation

Obtaining relevant nodes

<span style =" box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important; word-break: inherit! Important; Id ="three">angular</li> <li>nodeJs</li> <li>webpack</li> </ul> </div ulObj=document.getElementById("uu"); // parentNode console.log(ulobj.parentnode); // parentNode console.log(ulobj.parentnode); // parentElement console.log(ulobj.parentelement); // childNodes console.log(ulobj.childnodes); // the child element console.log(ulobj.children); console.log("=============================================="); // firstChild node console.log(ulobj.firstchild); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- is the first child element in IE8. / / the first child console log (ulObj. FirstElementChild); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- IE8 does not support / / the last child node of the console, log (ulObj. LastChild); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- is the first child element in IE8. / / the last child console log (ulObj. LastElementChild); / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- IE8 does not support / / before an element of a brother nodes. The console log ($(" three "). My previousSibling); Console. log(my$("three").previouselementSibling); Console. log(my$("three").nextsibling); Console. log(my$("three").nextelementSibling);Copy the code

Three ways to create elements

Document.write () : Writes a text string to a document stream opened by document.open(); InnerHTML: sets or gets the offspring of the element represented by the HTML syntax; Document.createelement (tagName) : Creates the HTML element specified by tagName;

How the first element is created (familiar)

HTML and CSS code

<input type="button" value=" create a p" id=" BTN "/>Copy the code

JavaScript code

//document.write(" tag code and content "); My $(" BTN "). The onclick = function () {document. Write (" < p > this is a p < / p > "); }; // document.write("<p> this is a p</p>");Copy the code

The second way to create elements (master)

HTML and CSS code

<style> div{ width: 300px; height: 200px; border:2px solid pink; } < / style > < input type = "button" value = "create a p" id = "BTN" / > < div id = "dv" > < / div >Copy the code

JavaScript code

// Click the button to create a P tag in the div. // The second way to create the element is: object. innerHTML=" tag code and content "; My $(" BTN "). The onclick = function () {$(" dv "). My innerHTML = "< p > the window bright moonlight, doubt is frost on the ground, look at the bright moon, bowed their heads and remembering home < / p >"; };Copy the code

Case click the button to create an image

HTML and CSS code

< input type = "button" value = "to a picture" id = "BTN" / > < div id = "dv" > < / div >Copy the code

JS code

My $("dv").onclick=function () {my$("dv").innerhtml ="<img SRC ='images/liuyan.jpg' Alt =' beauty '/>"; };Copy the code

Case click button to create list

HTML and CSS code

<style> div { width: 300px; height: 400px; background-color: green; } ul{ list-style: none; cursor: pointer; } < / style > < input type = "button" value = "create list" id = "BTN" / > < div id = "dv" > < / div >Copy the code

JavaScript code

var names = ["vue", "react", "angular", "JS", "TS", "nodeJs", "vite", "webpack", "html"]; my$("btn").onclick = function () { var str = "<ul>"; Li for (var I = 0; i < names.length; i++) { str += "<li>" + names[i] + "</li>"; } str += "</ul>"; my$("dv").innerHTML = str; Var list = my$("dv").getelementsByTagName ("li"); var list = my$("dv").getelementsByTagName ("li"); for (var i = 0; i < list.length; I++) {/ / mouse into the list [I] onmouseover = function () {this. Style. BackgroundColor = "yellow"; }; / / mouse left a list [I] onmouseout = function () {this. Style. BackgroundColor = ""; }; }};Copy the code
<script> /* * The third way to create an element is in two steps: first, create the element first, second, append the element to the parent element * first, document.createElement(" tag name "); Second, append the element to the parent element. AppendChild (); * */ my$(" BTN ").onclick = function () {var pObj = document.createElement("p"); Pobj. innerText = "this is a P tag "; My $("dv").appendChild(pObj); // Append the child element to the parent element. } </script>Copy the code

Dynamically creating lists

HTML and CSS code

<style> * { margin: 0; padding: 0; } ul { list-style-type: none; cursor: pointer; } div { width: 200px; height: 400px; border: 2px solid red; } < / style > < input type = "button" value = "create list" id = "BTN" / > < div id = "dv" > < / div >Copy the code

JavaScript code

var kungfu = ["vue", "react", "angular", "JS", "TS", "nodeJs", "vite", "webpack", "html", "css"]; My $(" BTN ").onclick = function () {var ulObj = function (); var ulObj = function () document.createElement("ul"); my$("dv").appendChild(ulObj); For (var I = 0; var I = 0; i < kungfu.length; i++) { var liObj = document.createElement("li"); Liobj. innerHTML = kungfu[I]; ulObj.appendChild(liObj); Liobj. onmouseover = mouseoverHandle; Liobj. onmouseout = mouseoutHandle; }}; / / this position. The button click event outside of the function mouseoverHandle () {this. Style. BackgroundColor = "red"; } function mouseoutHandle() { this.style.backgroundColor = ""; }Copy the code