Dom:document Object Model Document: HTML page Document object: page element Document Object model: definition in order to allow the program (JS) to manipulate the elements in the page Dom will think of the document as a tree, It also defines a number of ways to manipulate each element (node) of the DOM node Getelementbyidgetelementbytagnamedocumentdocument.body element. ChildNodes: read-only attribute child node list collectionStandard: A node that contains text and element types, and also contains illegal nested child nodesnon-standard: contains only the element type of the node, IE7 the following will not contain illegal nested subnodesChildNodes contains only one level of child nodes and does not contain nodes below the grandchild level of the descendantsThere are many types of DOM nodes12 Kindselement. NodeType: Read-only property the node type element node of the current element: 1 Attribute node: 2 Text nodes:3ChildNodes issues Many of the recommendations use the children element. Children: read-only attribute child node list collectionStandard: Only nodes that contain element types (no text nodes are included)non-standard: nodes that contain only element typesfor (var i=0; i<oul.children.length; i++) {oul.children[i].style.background = ' red ';} element. FirstChild: Read-only property the first child nodeStandard: FirstChild will contain the text type of the nodenon-standard: contains only ELEMENT nodeselement var Ofirst = Oul.firstelementchild | | Oul.firstchild;oFirst.style.background = ' red ';When Firstelementchild is not supported, it returns NULL, followed by Textnode, so an error is returned. The correct method of use is as follows: if (Oul.children[0]) {oul.children[0].style.background = ' red ';} else {alert (' No child nodes can be set ');} element. lastchild | | Element. Lastelementchild the last child node element. nextSibling | | Element. Nextelementsibling the next sibling node element. previoussibling | | Element. previouselementsibling the previous sibling node element. parentnode: Read-only property the parent node of the current nodeNo compatibility issues
element. OffsetParent: Read-only property a parent node with a positional property closest to the current elementIf no parent is located, the default is bodyIE7 below, if the current element is not positioned by default is body, if there is a location it is HTMLIE7 below, if layout is triggered by a parent of the current element, then offsetparent will be directed to the parent node that triggered the layout attributeElement. Offsetleft[top]: Read-only property the distance from the current element to the anchored parent (offset value)The distance to the offsetparent of the current elementIf no parent is locatedOffsetParent, BodyHTML offsetleft If you have a location parentIE7: If you do not have a position, then Offsetleft[top] is the distance to the bodyIf you have a position, it is the distance to locate the parentOther: Distance to target parent<div id= "Div1" style= "width:100px; height:100px; border:1px solid red; padding:10px; margin:10px; " ></div>alert (ODiv.style.width);//100alert (odiv.clientwidth);//Style width + padding alert (odiv.offsetwidth);//Style width + padding + border viewable area width + border 122 Create element:/*document.createelement (tag name); Create element*/var oLi = document.createelement (' li '); oli.innerhtml = Otext.value + ' <a href= "javascript:;" > Delete </a> '; oli.innerhtml = Otext.value; var OA = document.createelement (' a '); oa.innerhtml = ' delete '; oa.href = ' javascript:; '; o A.onclick = function () {/*parent. RemoveChild (the element to be deleted); Delete element*/Oul.removechild (this.parentnode);} oli.appendchild (OA); Add to Page/*parent. appendchild (element to add) method appends child elements*///oul.appendchild (OLi); /*parent. InsertBefore (new element, inserted element) method inserts a new element in front of the specified elementin IE, if the node of the second parameter does not exist, an error will bein other standard browsers if the node of the second parameter does not exist, it will be added as AppendChild*///oul.insertbefore (OLi, oul.children[0]); if (Oul.children[0]) {Oul.insertbefore (OLi, oul.children[0]);} else {Oul.appendchild (oLi);} element Substitution/*parent. ReplaceChild (new node, replaced node) Replace child nodes*///document.body.replacechild (Odiv, OP); /*Appendchild,insertbefore,replacechild can operate dynamically created nodes, or you can manipulate existing nodes*///op.appendchild (ODIV); Get all Nodes document.getelementsbytagname (' * '); Form elements: <form id= "Form1" ><input type= "text" id= "Text1" name= "username" value= ""/></form>var oform = document.getElementById (' Form1 '); Gets the form of an element in the form. Element name alert (oForm.username.value); There will be a default tbody in the table. Gets the second element in the second TR notation: Otab.children[0].children[1].children[1].innerhtml;thead: table Header Tbodies: table Body TFoot: End of table rows : rows cells : columns otab.tbodies[0].rows[1].cells[1].innerhtml; Bom:browser Object Model Browser//open (address default is blank page, open by default new window) opens a new window
window.open (' http://www.baidu.com ', ' _self '); opener = window.open ();//Return value returns the Window object of the newly opened page//alert ( opener = = window) //opener.document.body.style.background = ' red '; window.close (); Close window FF: unable to close chrome: Direct close ie: Ask user //window.navigator.useragen T: Browser information//alert (window.navigator.userAgent) if (window.navigator.userAgent.indexOf (' MSIE ')! =-1) { alert (' I am ie ‘);} else { alert (' I am not IE ');} window.location.href = window.location content window.location.search = URL? content after Window.location.hash = url# //Visual Area size//alert (document.documentElement.clientHeight);//scroll distance//alert (DOCUMENT.DOCUMENTELEMENT.SCROLLTOP); Visible area to the top of the distance//alert (document.body.scrollTop);//document.documentelement.scrolltop = 100//var ScrollTop = Document.documentElement.scrollTop | | Document.body.scrollTop; Doing so is compatible with//alert (scrolltop) var odiv = document.getElementById (' Div1 ');//scrollheight: content is actually wide and high //offSetheight//alert (document.body.offsetHeight);//ie: If the content does not have a high visual area, the document height is the visible area//alert ( document.documentElement.offsetHeight); alert (document.body.offsetHeight); //onscroll: When the scrollbar scrolls, it triggers var i = 0; Window.onscroll = function () { document.title = i++;} OnResize: Triggers window.onresize = function () { document.title = i++ when the window size changes) Event:Focus: Enables the browser to distinguish between objects entered by the user, and when an element has the focus, he can receive input from the user. We can set the focus of the element in some way 1. Click 2.tab 3.js not all elements can receive the focus. The element that responds to the user's actions has focus onfocus: triggers Otext.onfocus = function () when the element gets to the focus Onblur: Triggers Otext.onblur = function () Obj.focus () to the specified element when the element loses focus Obj.blur () cancels the specified element's focus obj.select () selects the text contents of the specified element selected Is the user input content, the contents of the DIV is not an event object, when an event occurs, some detailed information about the event that occurs with the current object will be temporarily saved to a specified place-event object, for us to call in the need. Aircraft-black Box The event object must be used in a function called by an event to have a content event function: The function called by the event, a function is not an event function, is not defined by the decision, but depends on this call when compatible ie/chrome:event is a built-in global object There's no such object under FF.var ev = EV | | event;Standard: Event object is passed through the first parameter of the event function if a function is called by an event then the first parameter defined by the function is the event object Clientx[y]: When an event occurs, the distance of the mouse to the visual area of the page *///alert (event); There is no event/*document.onclick = function () {alert (event);}; */function fn1 (EV) {//alert (event);//alert (EV); var ev = EV | | event;//alert (EV); /*for (var attr in ev) {Console.log (attr + ' = ' + ev[attr]);} */alert (EV.CLIENTX);} FN1 ();//is not a function called by an event Document.onclick = fn1;//is a function called by an event, so the event has content//onmousemove: the trigger//trigger frequency that the mouse moves over an element is not a pixel, but a time interval. At a specified time (very short), if the position of the mouse and the previous position have changed, then the var odiv = document.getElementById (' Div1 ') is triggered; Document.onmousemove = function (ev) {//document.title = i++; var ev = EV | | event; var scrolltop = Document.documenteleme Nt.scrolltop | | Document.body.scrollTop; ODiv.style.left = ev.clientx + ' px '; ODiv.style.top = ev.clienty + scrolltop + ' px ';}
JavaScript Intermediate notes
