Home > Developer > Web Develop
In general, DOM operations are divided into three areas: Dom Core (CORE), Html_dom, and Css_dom.
1.DOM CoreDom Core is not specific to JavaScript, and it can be used by any programming language that supports the DOM. His use is not limited to the processing of web pages, but can also handle any kind of document written in markup language, such as XML
Methods such as Getelemrntbyid (), getElementsByTagName (), getattribute (), and SetAttribute () in JavaScript are all part of the DOM core.
For example:
Ways to get Form objects using DOM core:
document.getElementsByTagName ("form");Method of using DOM core to get the SRC attribute of an element
document.getElementsByTagName ("P"). getattribute ("src");When scripting HTML files using JavaScript and DOM, there are many attributes that are specifically html_dom. The advent of Html_dom is earlier than Dom core, which provides some more concise notation for describing various HTML attributes.
For example:
Ways to get form objects using Html_dom
Document.forms//html_dom provides a Forms object
Use Html_dom to get the attributes of an element
Element.src
The above method can be found to get some object properties and can be implemented using DOM Core or html_dom implementation, compared to the html_dom implementation is relatively short, but it can only be used to work with Web documents.
3.css_domCss_dom is a CSS-based operation, in JavaScript in China, the main function of Css_dom technology is to get and set the various properties of the style object, by changing the style object's various properties, can be a Web page to render a variety of different effects.
For example
Ways to set the font color of an element's style object
Document.getelementbytagname ("P") [0].style.color = "Red";jquery, as a JavaScript library, inherits and promotes JavaScript's manipulation of Dom objects, making it easy to manipulate DOM objects. The various DOM operations in jquery are described below.
To fully explain the operation of the DOM, we first create a Web page
HTML code we introduced jquery first.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <Scriptsrc=".. /js/jquery-2.1.1.min.js "></Script> </Head> <Body> <Ptitle= "Choose the fruit you like">Which fruit do you like best?</P> <ul> <Lititle= "Apple">Apple</Li> <Lititle= "Orange">Orange</Li> <Lititle= "Pineapple">Pineapple</Li> </ul> </Body></HTML>
Build a DOM tree based on the page structure above, as shown in 3-2.
Next, the various operations of the DOM are carried out around the DOM tree.
Find ELEMENT nodesGet the element node and print his text content The jquery code is as follows:
Find the UL child element Li returns the first Li node in the collection//text () Gets the text content on the node var $li = $ ("ul Li:eq (1)"), var $li _text = $li. Text (); alert ($li _text);The above code gets the <ul> element grain second <li> node and prints its text content "Orange".
Find attribute NodesAfter using the jquery selector to find the element you want, you can take advantage of the attr () method to get the values of its various properties, the parameters of the attr () method can be one or two, and when the argument is one, the name of the property to query.
For example
Gets the attribute node and prints his title property content jquery code is as follows
Find the attribute node var $p = $ ("P"); alert ($p. attr ("title"));The jquery selector makes it quick and easy to find a particular element node in a document, and you can then use the attr () method to get the values of the various properties of the element.
The real DOM operation is not so simple, in the DOM operation, often need to dynamically create HTML content, when the document in the browser to show the effect of change, and achieve a variety of human-computer interaction purposes.
(1) Creating ELEMENT nodesFor example, to create two <li> elements, and to add them as child nodes of the <ul> element node to the DOM node tree. It takes two steps to complete this task.
(1) Creation of two <li> elements
(2) Insert these two new elements into the document.
The first step can be done using the Factory function $ () in jquery, in the following format
$ (HTML)
The $ (HTML) method creates a DOM object based on the incoming HTML tag string and wraps the DOM object back as a jquery object.
After creating two <li> elements, we can use the Append () method to add to the DOM tree
The complete code is below
var $li _1 = $ ("<li> banana </li>"), var $li _2 = $ (" <li> Sydney </li>");//Add new elements created to the document $ ("ul"). Append ($li _1);//$ ("ul"). Append ($li _2);//You can also write this and the above two lines are equivalent to $ ("ul"). Append ($li _1). Append ($li _2);Note: When creating a single element. Be aware of closing tags and using XHTML format. For example, to create a <p> element, you can use $ ("<p/>") or $ ("<p></p>"). But do not use $ ("<p>") or uppercase $ ("<P/>")
No matter how complex the HTML format is in $ (HTML), it is created in the same way. For example $ ("<p><em> haha </em><b> a </b> complex combination </p>")
To create an attribute nodeCompare the following simple code
//Create a node with attributes var $li _3 = $ ("<title= ' Mango '> mango </ li>"); $ (" ul "). Append ($li _3);//Whether you can get the property alert ($ (" ul Li:last "). attr (" title "));// Can be prompted to indicate the success of adding attributesThere's not only one way to insert a created node into a document in jquery, but there are other ways to do so,
Append () appends content to each matching element
$ ("ul"). Append ($li _3);AppendTo () Appends all matching elements to the specified element, in effect reversing the regular $ ("A") using this method. Append (b), that is, not appending B to a but appending A to B
For example, add to the last face of an existing text.
$ ("<b> ha ha </b>"). AppendTo ($p);// p.innerhtml haha hahaPrepend () internal front content to each matched element
$p. prepend ("hehe hey");//Hey heh p.innerhtmlPrependto () resets all the created nodes to the specified element, in effect reversing the operation of $ (A) prepend (B). Instead of pre-placing B in a, put a forward to B
$ ("<b> roar ha Hey </b>"). Prependto ($p);// Roar, Hey, p.innerhtml.After () inserts the content after each matching element
< p > I want to say </ p > $ ("P"). After (" < b > hello </ b > < p > I want to say </ p >< b > hello </ b > InsertAfter () Inserts all the elements behind the specified element. In effect, this method reverses the normal $ (A) after (b) operation, that is, instead of inserting b behind a, insert a into the back of B.
<id= "P1"> Test Insert </p>$ (" < b > can i </b>"). InsertAfter ($ (" #p1 "));In fact, these inverted writing effects are just the same as creating the node in front of the problem.
Before () inserts the content before each matching element
<P>I would like to say</P>$ ("P"). Before ("<b>How are you doing</b>"); results<b>How are you doing</b><P>I would like to say</P>
InsertBefore () Inserts all matching elements in front of the specified element, in effect using this method reverses the normal $a.before (b) operation, that is, instead of inserting b in front of a, insert A into front of b
<P>I would like to say</P>$("<b>How are you doing</b>") insertbefore ($" P "); results<b>How are you doing</b><P>I would like to say</P>
These methods of inserting nodes can not only insert newly created DOM elements into the document, but also move all DOM elements
For example, take advantage of new elements created and insert them
Example
<Script>var$li _1= $("<li title= ' banana ' > Banana </li>")var$li _2= $("<li title= ' Sydney ' > Sydney </li>");var$li _3= $("<li title= ' other ' > Other </li>")var$parent= $("ul");var$two _li= $("ul Li:eq (1)");var$one _li= $("ul li:eq (0)"); $parent. Append ($li _1), $parent. Append ($li _2); $li _3.insertbefore ($two _li); $one _li.insertafter ($two _li);</Script>
Until we get here, that's how it works.
At this time $two_li is an orange
Execute to $parent. Append ($li _2); When the effect is like this
When executing here $li _3.insertbefore ($two _li), meaning when you insert a new node that you created before inserting it into Two_li.
We'll use $two_li here later.
After executing the last sentence, the effect is this way.
Delete a nodeIf one of the elements in the document is redundant, it should be deleted, and jquery provides two ways to delete nodes, remove () and empty ()
(1) Remove () methodThe effect is to remove all matching elements from the DOM, and the passed in parameters are used to filter the elements based on the jquery expression.
Then the above example adds the following line of code
$one _li.remove ();
Will remove the apple from the list.
When a node is removed with the Remove () method, all descendant nodes that the node contains are deleted at the same time. This method returns a reference to the node that has been deleted, so you can use the elements later. The following code shows if the element is deleted with remove (), or it can continue to be used,
var Removeli = $one _li.remove (); $parent. append (Removeli);
Add plus go has become the last sub-node of the UL, this can also achieve the effect of moving elements
The Remove () method can also selectively delete elements by passing parameters, as follows
$ ("ul Li"). Remove ("UL Li:eq (1)");Strictly speaking, the empty () method is not to delete a node, but to empty the node, and he can empty all descendant nodes in the element.
$ ("ul li:eq (0)"). Empty ()//Get the contents of the second Li node empty element note that the elementThere are a lot of things about jquerydom, including replication node replacement nodes, and so on, in the next blog post.
HTML Learning Note JQuery (DOM action)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
