Reading notes-JS Advanced Programming-11th Chapter DOM Extensions

Two major extensions to the DOM	Selectors APIHTML5 element traversal elements Traversal specification
Queryselector	var BODY = Document.queryselector ("Body"), var mydiv = Document.queryselector ("#myDiv"); Gets the element with ID mydiv var selected = Document.queryselector (". Selected") gets the first element of the class named selected var img = Document.body.querySelector ("Img.button") gets the first IMG element with the class name button
Queryselectorall	As with the above method, just get all the elements, the return value is an instance of NodeList
Gets all the strong elements in the P element	Document.queryselectorall ("P Strong");
Matchesselector	Document.documentElement.matchesSelector ("Body.page1");
Element traversal	1 childElementCount2 firstElementChild3 lastElementChild4 previousElementSibling5 nextelementsibling
HTML5	1 Getelementbyclassname () may call this method through document and all HTML elements, because the return is nodelist, so the other DOM methods of Getelementbytagname () and NodeList Have the same performance issues 2 classlist because ClassName is a string, you must set the entire string value every time, even if you only modify the string part, all with the following method Div.classList.add () Div.classList.remove () Div.classList.toggle ()
Focus Management
Find the element that gets the focus in the DOM	Document.activeelement
There are 3 ways that elements get focus	Page load user input call the focus () method in code
Determine if there is a focus in the document	Document.hasfocus ()
Changes in HTMLDocument	1 ReadyState has two values loading and complete to use the OnLoad Method 2 compatibility Mode Document.compatmode = = "Css1compat" while in promiscuous mode Docuement.compatmode = = "Backcompat"; 3 Head property var head = Document.head | | Document.getelementbytagname ("Head") [0];
Character Set properties	Document.charset = "UTF-8";
Custom Data Properties	To start with data-such as <div id= "mydiv" data-appid= "123" Data-myname= "Jeff" ></div> get custom properties var appId = div.dataset.appId; set Value div.dataset.appId = "4";
InnerHTML	Returns the child node label of the element that called it
outerHTML	outerHTML returns the HTML tag that invokes its element and all child nodes
Inseradjacenthtml method	Element.insertadjacenthtml ("Beforebegin", <p>); beforebeginafterbeginbeforeendafterend
Memory and performance issues	InnerHTML is stronger than multiple DOM operations, but innterhtml don't do it too many times.
scrollIntoView	Can be called on all HTML elements, by scrolling the browser window or a container element to invoke the element can appear in the viewport if true, or do not pass the parameter, then the window scrolling will make the top of the call element and the top of the viewport as far as possible if false call element will appear in all of the viewports, But it doesn't have to be the same. Method: Setting focus for an element also causes the browser to scroll and display the element that gets focus
Children Property
Contains method
Rolling	Scrollintoviewifneededscrollbylinesscrollbypages

Reading notes-JS Advanced Programming-11th Chapter DOM Extensions