Master AJAX, Part 5: Manipulating DOM

xiaoxiao2021-04-11  2.5K+

Source URL: http://www-128.ibm.com/developerWorks/cn/xml/wa-ajaxintro5/index.html

If you read the previous article, you are very clear about everything happening behind the web page when the web browser shows the web. As mentioned earlier, the web page is converted into an object model from the text when HTML or CSS defined for the page is sent to a web browser. This is the case no matter the simple or complex code, it is the case. The browser then uses the object model directly instead of the text file you provide. The model used by the browser is called the document object model (Document Object Model, DOM). It connects to the objects of elements, properties, and text in document. All styles, values, and even most spaces in HTML and CSS are merged into the object model. The specific model of a given web page is called the DOM tree of the page.

Understand what is the DOM tree, and know how it means that HTML and CSS are just the first step in controlling the web page. Next, you also need to know how to handle the DOM tree of the web page. For example, if an element is added to the DOM tree, this element will immediately appear in the user's web browser - do not need to reload the page. Remove some text from the DOM tree, those text will disappear from the user screen. You can modify the user interface via the DOM or interact with the user interface, which provides strong programming capabilities and flexibility. Once you have learned how to deal with DOM trees, you have taken a big step towards achieving rich, interactive dynamic sites.

Note, the following discussion is based on the article "Web response using DOM". If you have not read it, please read the previous article before you continue to read.

The spelling problem of the initial alphabetic, from many ways, the document object model should be referred to as document node model (DNM). Of course, most people don't know the meaning of the node, and "DNM" is not as easy to speck as "DOM", so it is easy to understand why W3C has chosen DOM.

Crossiler, cross-language

The document object model is a W3C standard (see Referring to the link). Therefore, all modern web browsers support DOM - at least to some extent. Although different browsers have some differences, if Dom core features are used and pay attention to a few special circumstances and exceptions, the DOM code can be used in any browser in the same way. Modifying the code of the Opera webpage can also be used for Apple's Safari®, Firefox®, Microsoft® Internet Explorer® and Mozilla®.

DOM is also a specification across language, in other words, most mainstream programming languages ​​can use it. W3C defines several language bindings for DOM. A language bind is to let you use the DOM API for a particular language. For example, you can use the DOM language binding defined by C, Java, and JavaScript. Therefore, DOM can be used from these languages. There are several language bindings for other languages, although many are defined by third parties other than W3C.

This series of articles mainly discuss the DOM binding of JavaScript. This is because most asynchronous application development needs to write JavaScript code running in a web browser. Using JavaScript and DOM can instantly modify user interfaces, respond to user events and inputs, etc. - is completely standard JavaScript.

In short, it is recommended that you also try the DOM bindings in other languages. For example, using Java language binding not only handles HTML, but also can process XML, which will be discussed in later articles. Therefore, the techniques described herein can also be used in other languages ​​other than HTML, other environments other than client JavaScript. Node concept

The node is the most basic object type in the DOM. In fact, you will see this article, all other objects defined by the DOM are extension of node objects. However, before analyzing semantics, you must understand the concepts represented by nodes, and then the specific properties and methods of the node are very simple.

In the DOM tree, basically everything is a node. Each element is a node in the DOM tree on the bottom. Each attribute is a node. Each text is a node. Even annotations, special characters (such as copyright symbol ©), DOCTYPE declaration (if you have any words in HTML or XHTML) all nodes. Therefore, you must clearly grasp what is a node before discussing these specific types.

The node is ...

In the simplest, anything in the DOM tree is a node. The reason why the word "things" is blurred because it can only be clear to this extent. For example, elements in HTML (such as IMG) and text fragments in HTML (such as "scroll down for more details) do not have much significant similarities. But this is because you may consider the function of each type, focusing on their differences.

But if you observe from another perspective, each element in the DOM tree has a father, this parent node may be another element (such as the child of IMG nested in P element), or DOM tree The top layer element (this is a special case in each document, even if the HTML element is used). In addition, elements and text have a type. Obviously, the type of element is element, the type of text is text. Each node has some definition structure: Is there any nodes (such as child elements) below? Is there a brother node (adjacent to elements or text "" node)? Which document belongs to each node?

Obviously, most of the content sounds abstract. In fact, the type of an element is that the element seems to be a bit stupid. However, we must truly recognize the value of the node as a common object type, must be considered abstract.

Universal node type

The most common task in the DOM code is to navigate in the DOM tree in the page. For example, you can locate a Form through its "ID" attribute, then start processing the elements and text in the form in the Form. It may contain text descriptions, labels, real INPUT elements, and other HTML elements (such as IMG) and links (A elements). If the elements and text are completely different, you must write a completely different code for each type.

If you use a generic node type, it is different. At this time, you only need to move from one node to another, and you need to consider the type of node only when you need a particular processing for the element or text. If you move only in the DOM tree, you can move to the element's parent node or child node using the same operation as the other node type. Only when the special nature of a certain node type is needed, such as elements' properties, the node type is required to be dedicated. Watch all objects in the DOM tree as nodes can simplify operations. After remember this, let's take a specific look at what the DOM node structure will provide, first starting with the properties and methods.

Node's properties

Some properties and methods are required when using the DOM node, so we first discuss the properties and methods of nodes. The properties of the DOM node are mainly:

NodeName Report Name of Node (see hereina). NodeValue provides a "value" of nodes (see later described later). ParentNode returns the parent node of the node. Remember, each element, attribute, and text have a parent node. ChildNodes is a list of children's nodes in nodes. For HTML, the list is only meaningful for elements, and there is no child in text nodes and attribute nodes. Firstchild is just a shortcut to the first node in the ChildNodes list. Lastchild is another shortcut that represents the last node in the ChildNodes list. Previoussibling returns the node before the current node. In other words, it returns the node in front of the node in the ChildNodes list of the parent node of the current node (if confusing, rereading the previous sentence). NextSibling is similar to the Previoussibling property, returns the next node in the ChildNodes list of the parent node. Attributes is only used for element nodes, returns a list of properties of elements. Other minority properties are actually only used for more general XML documents, and there is not much place in processing HTML-based webpages.

Uttrand

The significance of most of the above properties is clear, except for NodeName and NodeValue properties. We don't simply explain these two properties, but two strange problems: What should the nodename of the text node? Similarly, what should the element NodeValue?

If these problems are difficult to take over, you have already understood the vague of these attributes. NodeName and NodeValue are actually not applicable to all node types (so that other minority properties of nodes). This illustrates an important concept: any of these properties may return null values ​​(sometimes called "undefined" in JavaScript). For example, the NodeName property of the text node is a null value (or is called "undefined" in some browsers) because there is no name in the text node. If you expect, NodeValue returns the text of the node.

Similarly, the elements have nodename, namely the element name, but the NodeValue attribute value of the element is always empty. Attributes have NodeName and NodeValue. The next section I will also discuss these individual types, but because these attributes are part of each node, it is necessary to mention here.

Take a look at the list 1, it uses some node properties.

Listing 1. Using the node properties in the DOM

// These first two lines get the DOM tree for the current Web page, // and then the element for that DOM tree var myDocument = document; var htmlElement = myDocument.documentElement; // What's the name of the ELEMENT? "HTML" Alert ("THE ROOT Element Of the Page IS"; // Look for the element var headelement = htmlelement.getlementsBytagname ("head") [0]; if (HeadeElement) ! = NULL) {Alert ("We Found The Head Element, Named" HeadeElement.nodeName); //print out the title of the page var titleElement = headelement.getlementsbyTagname ("Title") [0]; if (TitleElement! = NULL) {// The text will be the first child node of the Element var TitleText = TitleElement.firstchild; // We can get the text of the text node with nodevalue alert ("The page title is') TitleText.NodeValue "'");} // after <head> is <body> var bodyElement = headelement.nextsibling; While (BodyElement.NodeName.tolowerCase ()! = "body") {bodyElement = bodyElement.nextsibling;} // We found the <body> element ... // we'll do morehen we know Some Methods on the Nodes Node method</p> <p>Next, look at all nodes have a method (like the node properties, I omitted a few ways to actually do not apply to most HTML DOM operations):</p> <p>INSERTBEFORE (NewChild, ReferenceNode) Put the NewChild node before the ReferenceNode. Remember, this method should be called for NewChild's target parent nodes. Replacechild (Newchild, Oldchild) replaces the OldChild node with the NewChild node. RemoveChild (Oldchild) removes the OldChild node from the node running the method. Appendchild (Newchild) Adds NewChild into the node running the function. NewChild is added to the end of the target node child list. HaschildNodes () returns true when you call the node of the method, otherwise returns false. Hasattributes () Returns true when calling the node of the method, otherwise returning false. Note that all of these methods are handled in most cases. This is their main use. If you just want to get a text node value or an element name, you don't need to call these methods, you can use the node properties. Listing 2 Adds the method to use on the list 1.</p> <p>Listing 2. Node method in DOM</p> <p>// These first two lines get the DOM tree for the current Web page, // and then the <html> element for that DOM tree var myDocument = document; var htmlElement = myDocument.documentElement; // What's the name of the <html > ELEMENT? "HTML" Alert ("THE ROOT Element Of the Page IS"; // Look for the <head> element var headelement = htmlelement.getlementsBytagname ("head") [0]; if (HeadeElement) ! = NULL) {Alert ("We Found The Head Element, Named" HeadeElement.nodeName); //print out the title of the page var titleElement = headelement.getlementsbyTagname ("Title") [0]; if (TitleElement! = NULL) {// The text will be the first child node of the <title> Element var TitleText = TitleElement.firstchild; // We can get the text of the text node with nodevalue alert ("The page title is') TitleText.NodeValue "'");} // after <head> is <body> var bodyElement = headelement.nextsibling; While (BodyElement.NodeName.tolowercase ()! = "body") {bodyElement = bodyElement.nextsibling;} // we found the <body> element ... // remove all the top-level <img> Elements in the body if (bodyElement.hasChildNodes ()) {for (i = 0; i <bodyElement.childNodes.length; i ) {var currentNode = bodyElement.childNodes [i]; if (currentNode.nodeName.toLowerCase () == "img" ) {bodyElement.removechild (currentnode);}}}} test!</p> <p>At present, although only two examples, list 1 and 2, you should be able to learn what you can do with the DOM tree through these two examples. If you want to try this code, you only need to drag your list 3 into an HTML file and save it, and open it with a web browser. Listing 3. HTML files containing JavaScript code using DOM</p> <p><html> <head> <title> JavaScript and the dom </ title> <script language = "javascript"> Function test () {// THESE FIRST TWO LINES GET THE DOM Tree for the current web page, // and dam the <html> element for that DOM tree var myDocument = document; var htmlElement = myDocument.documentElement;? // What's the name of the <html> element "html" alert ( htmlElement "The root element of the page is". nodeName); // Look for the <head> element var headElement = htmlElement.getElementsByTagName ( "head") [0];! if (headElement = null) {alert ( "We found the head element, named" headElement.nodeName ); // print outlelement = headelement.getleferenceSbyTagname ("title") [0]; if (titleElement! = Null) {// the text will be the first child node of the <title> Element VAR Titletext = TitleElement.firstchild; // We can get the text of the text node with nodevalue alert ("The page title is'" Titlete xt.nodeValue " '");} // After <head> is <body> var bodyElement = headElement.nextSibling;! while (bodyElement.nodeName.toLowerCase () = "body") {bodyElement = bodyElement.nextSibling;} // We found the <body> element ... // remove all the top-level <img> Elements in the body if (bodyElement.haschildnodes ()) {for (i = 0; i <bodyElement.childNodes.Length); i ) {var currentnode = bodyElement.childNodes [i];</p> <p>IF (currentnode.nodeename.tolowercase () == "img") {bodyElement.removechild (currentnode);}}}}} </ script> </ head> <body> <p> JavaScript and Dom Are a Perfect match. You can read more in <i> Head Rush Ajax </ i>. </ P> <img src = "http://www.headfirstlabs.com/images/hraj_cover-150.jpg" /> <input type = " Button "value =" TEST ME! "onclick =" test (); "/> </> </> </ HTML> After loading the page into the browser, you can see the screen similar to Figure 1.</p> <p>Figure 1. Use the button to run the HTML page of JavaScript</p> <p>Click Test ME! Will see the warning box shown in Figure 2.</p> <p>Figure 2. Warning box using NodeValue displaying element name</p> <p>After the code is running, the image will be deleted from the page in real time, as shown in Figure 3.</p> <p>Figure 3. Remove the image in real time using JavaScript</p> <p>API design problem</p> <p>Take a look at the properties and methods provided by various nodes. For those who are familiar with object-oriented (OO) programming, they explain an important feature of the DOM: DOM is not fully opposite the API of the object. First, in many cases the properties of the object directly instead of calling the node object. For example, there is no getNodeName () method, but directly use the NodeName property. So the node object (and other DOM objects) is used by attribute rather than the function.</p> <p>Second, if you are used to using the overloaded object and object-oriented API, especially Java and C , you will find that the objects and methods in the DOM are a bit strange. The DOM must be available for C, Java, and JavaScript (this is just a few languages), so API design has made some compromise. For example, there are two different forms: NamedNodeMap methods:</p> <p>GetNamedItem (String Name) getnameditemns (node ​​node)</p> <p>It looks very strange for Oo programmers. The two methods are the same, but only one use String parameter and the other uses the Node parameter. Most OO APIs use the same method names for both versions. The virtual machine running code will determine which method runs based on the object type passed to the method.</p> <p>The problem is that JavaScript does not support this technique called method overload. In other words, JavaScript requires each method or function to use a different name. Therefore, if there is a method of accepting a string parameter called getnamedItem (), no further method or function is also named GetNameDItem (), even if the parameter type of this method is different (or a set of parameters ). If this is done, JavaScript will report an error, and the code will not be executed in the expected manner.</p> <p>Fundamentally, DOM consciously avoids method overloading and other OO programming techniques. This is to ensure that the API can be used in a variety of languages, including those that do not support OO programming technology. The consequence is just asking you to remember some method names. Benewhere is to learn DOM in any language, such as Java, and clear the same method name and encoding structure can also be used in other languages ​​with DOM implementation, such as JavaScript. Let programmers carefully</p> <p>If you go deep into the API design or just pay attention to the API design, you may ask: "Why can't the node type attributes do not apply to all nodes?" This is a good problem, the answer is closer, and the relationship between the problem is closer. Non - technical causes. Simply put, the answer is, "Who knows! But a little annoyed, isn't it?"</p> <p>Attribute NodeName means that each type of node is allowed to have a name, but many cases are either unfained, or for the internal name of programmer's meaningless (for example in Java, many cases of NodeName is reported as #Text "). Fundamentally, you must assume yourself to handle errors. Direct access to mynode.nodeename and then use this value is dangerous, in many cases this value is empty. Therefore, like the usual programming, the programmer should be cautious.</p> <p>Universal node type</p> <p>Some features and properties (as well as some strange places) have now been introduced, and some of the special node types you will use will now. Only four node types are used in most web applications:</p> <p>The document node represents the entire HTML document. Element nodes represent HTML elements such as A or IMG. The property node represents the properties of the HTML element, such as HREF (A element) or SRC (IMG element). The text node represents the text in the HTML document, such as "Click On the Link Below for A Complete Set List". This is a text that appears in the elements of P, A or H2.</p> <p>When processed HTML, 95% of the time is to deal with these node types. Therefore, the rest of this article will discuss these nodes in detail. (Some of the other node types will be introduced when XML will be discussed.)</p> <p>Document node</p> <p>The first node type that is basically all DOM-based code is the document node. The document node is actually not an element in the HTML (or XML) page but is the page itself. Therefore, in the HTML web page, the document node is the entire DOM tree. In JavaScript, you can use keyword document to access document nodes:</p> <p>// THESE FIRST Two Lines Get The Dom Tree for the Current Web Page, // and The <HTML> Element for That Dom Treevar MyDocument = Document; Var htmlelement = myDocument.documentelement;</p> <p>The Document keyword in JavaScript returns the DOM tree of the current web page. From here you can start processing all the nodes in the tree.</p> <p>You can also create a new node using the Document object, as shown below:</p> <p>CreateElement (ElementName) creates an element using a given name. CreateTextNode (Text) creates a new text node using the provided text. CreateAttribute (AttributeName) Create a new attribute with the supplied name.</p> <p>The key here is that these methods create nodes, but they are not attached or inserted into specific documents. Therefore, this step must be done using the methods described earlier such as INSERTBEFORE () or appendchild (). Therefore, you can create a new element using the following code and add it to the document: VAR pelement = myDocument.createElement ("p"); var text = myDocument.createtextNode ("Here's Some Text In AP Element."); Pelement. Appendchild (text); bodyElement.Appendchild (pelement);</p> <p>Once you use the Document element to get access to the web page DOM tree, you can use the elements, properties, and text.</p> <p>Element node</p> <p>Although the element node will be used, many of the operations that need to be performed on the elements are all methods and properties allocate, not the specific methods and properties of the element. Elements have only two sets of proprietary methods:</p> <p>Methods related to attribute processing:</p> <p>GetaTtribute (name) Returns the attribute value named Name. RemoveAttribute (name) Deletes the properties called Name. SetAttribute (Name, Value) Creates a property called Name and sets its value to Value. GetaTtributeNode (Name) Returns the property node named Name (Introduction to the Properties Node). RemoveAttributeNode (Node) Deletes the property node that matches the specified node. Methods related to finding nested elements:</p> <p>getElementsBytagname (ElementName) Returns a list of elements nodes with the specified name.</p> <p>These methods are clear, but still come to see a few examples.</p> <p>Processing attribute</p> <p>The processing element is simple, such as the use of Document objects and the above method: a new IMG element:</p> <p>Var imgelement = document.createElement ("IMG"); imgelement.setttribute ("src", "http://www.headfirstlabs.com/images/hraj_cover-150.jpg" ); IMGElement.SetaTRibute ("width", " 130 "); imagelement.setattribute (" Height "," 150 "); bodyElement.appendchild (imagelement);</p> <p>It should now look very simple. In fact, as long as it understands the concept of nodes and knows what methods are available, it will be found that DOM in the web page and JavaScript code are very simple. In the above code, JavaScript creates a new IMG element that sets some properties and then adds to the body element of the HTML page.</p> <p>Find nested elements</p> <p>It is easy to find nested elements. For example, the following code is used to discover and delete all IMG elements in the HTML page shown in Listing 3:</p> <p>// Remove all the top-level <img> elements in the body if (bodyElement.hasChildNodes ()) {for (i = 0; i <bodyElement.childNodes.length; i ) {var currentNode = bodyElement.childNodes [i] ; if (currentnode.nodename.tolowercase () == "img") {bodyElement.removechild (currentnode);}}} can also use getElementsByTagname () to complete similar features:</p> <p>// Remove all the top-level <img> elements in the body var imgElements = bodyElement.getElementsByTagName ( "img"); for (i = 0; i <imgElements.length; i ) {var imgElement = imgElements.item [i ]; BodyElement.RemoveChild (Imgelement);</p> <p>Property node</p> <p>DOM represents the property as a node, can access the properties of the element through the element's Attributes, as shown below:</p> <p>// Remove all the top-level <img> elements in the body var imgElements = bodyElement.getElementsByTagName ( "img"); for (i = 0; i <imgElements.length; i ) {var imgElement = imgElements.item [i ]; // Print Out Some Information About this element var msg = "Found An Img Element!"; Var atts = imgelement.attributes; for (j = 0; j <atts.length; j ) {var att = atts.Item (j); msg = msg "/ n" att.nodeename ": '" att.nodevalue "" ";} alert (msg); bodyElement.removechild (imagelement);}</p> <p>The attributes of the attribute have some special places for DOM. On the one hand, the attributes don't actually be like other elements or texts. In other words, the attribute does not appear in the element "under". At the same time, attributes are obviously related to the elements, and the elements "have" attributes. The DOM uses nodes to represent attributes and allows the properties to be accessed through the specific list of elements. Therefore, the attribute is part of the DOM tree, but usually does not appear in the tree. There is reason to say that the relationship between the attributes and the other parts of the DOM tree is a bit blurred.</p> <p>It should be pointed out that Attributes properties are actually a node type rather than being limited to element type. It is a bit weird, does not affect you write code, but it still needs to know this.</p> <p>Although attribute nodes can also be used, it is often simple to process properties using an element class. These include:</p> <p>GetaTtribute (name) Returns the attribute value named Name. RemoveAttribute (name) Deletes the properties called Name. SetAttribute (Name, Value) Creates a property called Name and sets its value to Value.</p> <p>These three methods do not need to directly process the properties node. However, it is allowed to use simple string property settings and delete properties and their values.</p> <p>Text node</p> <p>The last node that needs to be considered is the text node (so at least when processing the HTML DOM tree). Basically, all attributes that are usually used to process text nodes are node objects. In fact, usually use the NodeValue property to access text nodes, as shown below:</p> <p>Var pelements = bodyElement.getlementsByTagname ("p"); for (i = 0; i <pelements.length; i ) {var pelement = pelements.Item (i); var text = pelement.FirstChild.NodeValue; Alert (text) }</p> <p>A few other methods are specifically used for text nodes. These methods are used to increase or decompose data in nodes:</p> <p>AppendData (text) will be added to the existing content provided by the text to the text node. INSERTDATA (Position, Text) allows data to be inserted in the middle of the text node. Insert the text provided at the specified location. ReplaceData (Position, Length, Text) Starts the specified length character from the specified location, replacing the deleted text with the supplied text.</p> <p>What node type?</p> <p>Most of the code you see so far assume that what types already knowing is, but the situation is not always the case. For example, if you navigate and process a general node type in the DOM tree, you may not know that you have or text. Perhaps all children of the P element, but cannot be determined whether the text, B element or IMG element. In this case, it is necessary to determine what type of node before further processing.</p> <p>Fortunately, it is easy to do. The DOM node type defines some constants, such as:</p> <p>Node.Element_Node is a constant of the element node type. Node.attribute_Node is a constant that represents the type of property node. Node.text_node is a constant that represents the type of text node. Node.Document_Node is a constant that represents the type of document node.</p> <p>There are other node types, but it is rarely used in HTML except these four kinds. I have no value for these constants, although these values ​​are defined in the DOM specification, never use those values ​​directly because this is the purpose of constants!</p> <p>NodeType properties</p> <p>The NodeType property can be used to compare nodes and constants described above - this attribute is defined on the DOM Node type, thus available for all nodes, as shown below:</p> <p>var someNode = document.documentElement.firstChild; if (someNode.nodeType == Node.ELEMENT_NODE) ​​{alert ( "We've found an element node named" someNode.nodeName);} else if (someNode.nodeType == Node. TEXT_NODE) ​​{alert ( "It's a text node; the text is" someNode.nodeValue);} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) ​​{alert ( "It's an attribute named" someNode.nodeName "with A value of '" Somenode.NodeValue " ");} This example is very simple, but explains a big problem: Get the type of node is very simple. More challenging is to determine what to do after the type of node, as long as the node, text, attributes, and element types provide what properties and methods, you can program it yourself.</p> <p>Ok, it's over.</p> <p>Setup in practice</p> <p>The NodeType property seems to be a hossip of the node - allowing to determine the node type to be processed and then write code for the node. The problem is that the above Node constant definition cannot be used correctly for Internet Explorer. So if you use node.ext_node, node.text_node or any constant in your code, Internet Explorer will return the error as shown in Figure 4.</p> <p>Figure 4. Internet Explorer Report Error</p> <p>Use Node constants in JavaScript, Internet Explorer will report. Because most people are still using Internet Explorer, it should be avoided using node.ext_node or node.text_node in the code. Although it is said that the upcoming new version of Internet Explorer 7.0 will solve this problem, it is still necessary to have many years before Internet Explorer 6.x exits the stage. It should therefore be avoided using Node, and you want your DOM code (and Ajax applications) to all major browsers. This is important.</p> <p>Conclude</p> <p>Prepare to become a top web designer? If you are ready to understand, you will become the top web programmer. Most web programmers know how to write images with JavaScript scroll or extract values ​​from the form, some can even send requests and reception responses to the server (you can do it after reading the first few articles of this series). But the bold or no experience is impossible to make an instant modification web structure.</p> <p>You have already studied a lot in the previous articles in this series. Now, you should not sit again. Next article, I look forward to me for introducing a variety of smart DOM trees. The current homework is to see how to create an imaginative effect or a beautiful interface using DOM. Experimental and practice in the use of knowledge learned in the past few articles. See if you can establish a website that is more close to the desktop app, the object can respond to the user's movement on the screen.</p> <p>It is best to draw a boundary for each object on the screen so that you can see where the object in the DOM tree is, then move the object. Create a node and add it to an existing child list, delete an empty node without nested nodes, change the CSS style of the node to see if the child's node will inherit these modifications. The possibility is unlimited. Whenever some new things have been tried, some new knowledge is learned. Modify your web page! In the last article of the DOM trilogy, I will introduce how to combine some great interesting DOM applications into programming. I will no longer talk to and explain the API from the concept, but will provide some code. Before you have, you will play your own intelligence and see what you can do.</p> <p>Reference</p> <p>Learn</p> <p>You can see this article in our website on our world. Read the introduction of the first few periods of this developerWorks series of articles:</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址: https://www.9cbs.com/read-133608.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="133608" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.015</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.1.0"></script><script src="view/js/jquery.min.js?2.1.0"></script><script src="view/js/popper.min.js?2.1.0"></script><script src="view/js/bootstrap.min.js?2.1.0"></script><script src="view/js/xiuno.js?2.1.0"></script><script src="view/js/bootstrap-plugin.js?2.1.0"></script><script src="view/js/async.min.js?2.1.0"></script><script src="view/js/form.js?2.1.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.1.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = '6Rjb53s_2B9gPPDtsSW_2FPxFPdJKRnIWwZfhzj5ZXRqKviTAGIRrjIOCTImevNIZox9MTzLd_2BRPad2HHtoZ4zDOWg_3D_3D'; var body = $('body'); body.on('submit', '#quick_reply_form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); postdata.safe_token = safe_token; $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { var s = '<ul>'+message+'</ul>'; var jli = $(s).find('li'); jli.insertBefore($('.postlist > .post').last()); $('.post-subject').remove(); jsubmit.button('reset'); $('#message').val(''); var jfloor = $('#newfloor'); jfloor.html(xn.intval(jfloor.html()) + 1); var jposts = $('.posts'); jposts.html(xn.intval(jposts.html()) + 1); var quotepid = jthis.find('input[name="quotepid"]'); $('[data-pid="'+quotepid.val()+'"]').removeClass('quote'); quotepid.val(0); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>