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

DOM object: when a web page is loaded, the browser creates a document object model (Document Object Model) of the page.

The HTML DOM model is constructed as a tree of objects.

When you open a web page, the first thing you see is the browser window, the top-level window object.

Second, what you see is the content of the web document, that is, the document document.

First, take a look at the definition of document objects and other related knowledge provided by W3C

Now let's take a closer look at the document object:

The first category: four basic methods of finding elements

Document.getElementById ("D1")

Find elements according to id, because id is unique and can only be found.

GetElementsByClassName ("C1")

Find elements according to class. Because class is not unique, you can find multiple elements and return an array.

Document.getElementsByTagName ("div")

Find the element according to the label signature. Because the tag name is not unique, you can find multiple elements and return an array.

Document.getElementsByName ("uname")

Find elements according to name, mainly used for form elements, because there are radio selections and other cases where name is not unique, you can find multiple elements and return an array

12 3 4 5 untitled document 6 7 8 9 10 11 12 13 14 15 16 17 18 var a = document.getElementById ("D1"); / / find element 19 var b = document.getElementsByClassName ("C1") according to id; / / find element 20 var c = document.getElementsByTagName ("div") according to class; / / find element 21 var d = document.getElementsByName ("uname") according to label signature / / find element 22 alert (a + "\ n" + b [1] + "\ n" + c [0] + "\ n" + d [0]) according to name; 23

The return value an of id=d1 to find the div element

The return value array of class=c1, the second element in the array b, finds the span element

The return value of the tag = div array c < 0], the first element of the array c, find the div element

Name=uname returns an array of input d [0], the first element of the array d, and finds the element

As we can see above, except for finding elements according to id, other methods can find multiple elements and return an array.

Complex a.childNodes [0] method to find the child elements of the element

12 3 4 5 untitled document 6 7 8 9 10 11 12 13 14 15 16 17 18 var a = document.getElementById ("D1") / / find element 19 alert according to id (a.childNodes [0] + "\ n" + a.childNodes [1] + "\ n" + a.childNodes [2] + "\ n" + a.childNodes [3] + "\ n" + a.childNodes [4] + "\ n" + a.childNodes [5] + "\ n"); 20

As we can see above, we will find multiple child elements, and the array must be returned. The element with id D1 contains five child elements, three texts, a div element and a span element.

Note: this method finds not only the tag in the tag, but also the text, where the enter newline is also recognized as text written into the array

A [XSS _ clean] find the parent element

12 3 4 5 untitled document 6 7 8 9 10 11 12 13 14 15 16 17 18 var a = document.getElementById ("D1"); / / find element 19 alert (a [XSS _ clean]) according to id; 20

There can be only one parent element, as shown above is the parent element body element of the element of id=d1

Find the sibling element a.previousSibling find the previous sibling element a.nextSibling find the next sibling element

12 3 4 5 untitled document 6 7 8 9 10 11 12 13 14 15 16 var a = document.getElementById ("D1"); / / find element 17 alert (a.previousSibling + "\ n" + a.nextSibling) according to id; 18

In the above code, we first let the element of id=d1 stick to the text content such as carriage return before and after it, and get whether the previous sibling element is not, and the next sibling element is div.

The second category: control element remove delete element createElement create element appendChild append element

12 3 4 5 untitled document 6 7 8 9 10 11 12 13 14 15 16 17 var a = document.getElementById ("D1"); / / find element 18 var b = document.getElementById ("D2") according to id; 19 a.remove (); / / remove element 20 var s = document.createElement ("p"); / / create element 21 b.appendChild (s) / / append element 22

By reviewing the element, we can see that the element of id=d1 has been removed and the element of id=d2 has been appended with child elements.

The third category: operation of content ordinary elements innerText get content text innerHTML get content code

12 3 4 5 untitled document 6 7 8 9 this is the content of span in div 10 11 12 this is the content of span in div2 13 14 15 this is the content of span in div3 16 17 18 19 20 var a = document.getElementById ("D1"); / / find the element 21 var b = document.getElementById ("D2") according to id 22 var c = document.getElementById ("d3"); 23 alert (a.innerText+ "\ n" + a [XSS _ clean]); 24 b.innerText= "hello"; / / assign values to the element, and for text, other content is replaced by 25 cs [XSS _ clean] = "bold" 26

As we can see above, innerText only gets the content text, while innerHTML gets the content code together.

These two methods can not only get the content, but also assign the write content. The content written by the assignment will replace the original content, and the content written through the innerHTML assignment will take effect in the web page like the normal code.

Operation of form elements

12 3 4 5 untitled document 6 7 8 9 10 11 12 var a = document.getElementById ("d5"); 13 a. Value = "hello"; / / assign 14 alert (a.value) to the element; / / the value of the element is 15

As above, we can assign and take values to the form elements by calling value.

The fourth category: operate attribute setAttribute (attribute name, attribute value) set attribute removeAttribute (attribute name) remove attribute getAttribute (attribute name) get attribute

12 3 4 5 untitled document 6 7 8 9 this is the content in span in div 10 11 12 this is the content in span in div2 13 14 15 16 17 var a = document.getElementById ("D1"); 18 var b = document.getElementById ("D2"); 19 a.setAttribute ("bs", 100); / / add attribute bs=10020 b.setAttribute ("bs", 100) / / add attribute bs=10021 alert (a.getAttribute ("bs")); / / get the value of attribute bs 22 b.removeAttribute ("bs"); / / delete attribute bs23 of b

As shown above, we can see the bs attribute that we added, the bs attribute that was removed from the second div, and the bs attribute that was obtained.

Category 5: operation style

12 3 4 5 untitled document 6 7 8 9 this is the content of div1 10 11 12 this is the content of div2 13 14 15 16 17 var a = document.getElementById ("D1"); 18 var b = document.getElementById ("D2"); 19 a.style.backgroundColor = "red"; / / set the style with inline 20b.style.backgroundColor = "red" / / set the style with 21 alert (a.style.height) inline; / / get the style 22 b.style.backgroundColor22; / / remove the style 23

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.