Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to obtain the dom node of Python". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to get the dom node of Python" can help you solve your doubts.

1. Dom Node 1.1 dom Node gets DOM document object model document Top Node Zhang San

Li Si

Zhao Liu

112233 55666 console.log (document) / / # 1 get div node object var box = document.getElementById ("box"); console.log (box) through id; / / # 2 get node object through class name [return array] var p2 = document.getElementsByClassName ("p2"); console.log (p2, typeof (p2)) / / get Li four-node object lisi = p2 [0]; console.log (lisi) / / get Wang Wu node object wangwu = p2 [1]; console.log (wangwu); / / # 3. Get the node object through the tag [return array] var p = document.getElementsByTagName ("p"); console.log (p) console.log (p [1]) / / # 4. Through the name attribute on the tag [array is returned] is generally used in input forms var ceshi1 = document.getElementsByName ("username") [0]; console.log (ceshi1); / / # get the corresponding element node / / # 5.querySelector through the css selector, and only get the first one found; var p1 = document.querySelector (".p1") Console.log (p1) var box = document.querySelector ("# box"); console.log (box) / / input forms have two, but only get the first one; var input = document.querySelector ("input"); console.log (input) / / # 6.querySelectorAll gets all the element nodes found and returns the array var all = document.querySelectorAll ("input [name=username]") [0]; console.log (all); 1.2Node element hierarchy relationship Node element hierarchy relationship

Zhang San

Li Si

Zhao Liu

/ / # get the corresponding node element console.log (document) console.log (document.documentElement); / / html console.log (document.documentElement.children) / / find all the child nodes in html children var html_children = document.documentElement.children console.log (html_children) / / head, body body = html_children [1]; console.log (body) / / head, body var div = body.children [0] console.log (div); var p0 = div.children [0] console.log (p0) var input = p0.children console.log (input) var input1 = input [0] console.log (input1) / / get the next node object nextSibling console.log (input1.nextSibling.nextSibling) / / get the next element node object nextElementSibling var input2 = input1.nextElementSibling; console.log (input2); / / get the previous node object previousSibling console.log (input2.previousSibling) / / get the previous element node object previousElementSibling console.log (input2.previousElementSibling) / / get the input2 parent node element object Console.log (input2.parentElement) 1.3Modification _ empty content DOM Modification / emptying content

I am the most handsome, richest, most tasteful man.

/ / innerHTML gets everything in the tag [tag + text] / / innerText gets all the strings [text] var p = document.querySelector ("# box p") in the tag; / / console.log displays the data in the console console.log (p); / / [xss_clean] displays the data in the browser [xss_clean] (p) in the form of a string / / Click button1 to trigger the following task to modify function func1 () {var content = p [XSS _ clean]; var content = p.innerText.console.log (content); / / p [XSS _ clean] = `I was modified to hit the jackpot.. 1`; p.innerText = `I was modified to hit the jackpot. 2` } / / Click button2 to trigger the following task to clear function func2 () {p [XSS _ clean] =';} 1.4 hide show password effect hide show password effect

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.