Js notes-DOM Basics

DoM browser support: IE: 10% FF: 99% Chrome: 60% childNotes incompatible in Chrome and IE9 will also count the text node as childNotes, while in the IE6-8 childNotes is only the element node, not a text node. & Lt; ul & gt; & lt; li & gt; & DoM browser support: IE: 10% FF: 99% Chrome: 60% childNotes is incompatible. In Chrome and IE9, the text node is also counted as childNotes, while in the IE6-8, childNotes is counted as only element nodes, not text nodes.

In IE9 and Chrome, ul has 9 childNotes and 4 in IE6-8. NoteType display node type information (browser compatibility): text node: noteType value is 3 element node: noteType value is 1 if you want to operate the li style in ul, it also has compatibility with browsers of different versions and can be implemented using noteType. For (var I = 0; I

12 hide

23 hide

34 hide

45 hide

Var aA = document. getElementsByTag ("a"); for (var I = 0; I aA [I]. onclick = function () {this. parentNode. style. display = "none"; // this should point to node aA [I], and its parentNode should be li, and then implement hide} offsetParentcss: absolute and relative positioning? Who is the absolute positioning element? The absolute element in css is located based on the parent element that has been located. If the first parent element is not absolutely located, then, the system looks for its parent element until a located element is found (the outermost layer locates based on the body .) The difference between absolute positioning and relative positioning: the absolute positioning of a reference object is a parent element that has been defined; and the relative positioning of a reference object is its original position, accurately, the left and top values are not set. Set style 1: the parent-level element div1 is not located, so div1 is changed and div2 is not moved because div2 is definitely positioned as the parent body of div1. Set style 2: the parent div1 element has been located, and the div2 reference object is the div1 position. Therefore, the div1 location should be changed, and div2 will also move. OffsetParent can be used to obtain the parent level that an element is used to locate. It points to an object. Script var oDiv = document. getElementById ("div2"); alert (oDiv. offsetParent); script firstChild and firstElementChild obtain the first element in the child element.

• 1
• 2
• 3

Script var oUl = document. getElementById ("ul1"); if (oUl. firstElementChild) {// earlier IE6-8 does not recognize the flag firstElementChild, but can recognize firstChild oUi. firstElementChild. style. background = "red";} else {// a later browser can identify firstElementChild rather than firstChild oUi. firstChild. style. background = "red";} obtain the last node from script: lastChild and lastElementChild. Obtain the sibling nodes: nextSibling, nextElementSibling, previussibling, and previuselementsibling. However, there are compatibility issues. The first type of DOM operation element attribute operation on an element: oDiv. style. display = "block"; Type 2: oDiv. style ["display"] = "block"; Method 3: Dom-based element attribute acquisition: getAttribute (name) Setting: setAttribute (name, value) Deletion: removeAttribute (name) the flexible search of DOM elements selects the desired elements through the element className.

Script function getByClass (oParent, ClassName) {var oElem = oParent. getElementsByTag ("*"); var aResult = []; for (var I = 0; I