Master AJAX, Part 4: Use the DOM for web response ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ -------------------------------------------------- published: 2006-04-18 09:04:50 author: Brett McLaughlin source: ibm language: Chinese views: 302 times with many Web programmers, you may have used HTML. HTML is the way the programmer began to deal with the web page; HTML is usually the last step in which they complete the application or site - adjust some layout, color or style. However, although HTML is often used, what happens when HTML is forwarded to the browser, and people are generally misunderstood. Before I analyze what you think may happen, I hope that you will be clear about the process of designing and serving the web page:
Some people (usually you!) Create HTML in a text editor or IDE. Then you upload HTML to a web server, such as Apache Httpd, and disclose it on the Internet or intranet. Users requested your web page with browsers such as Firefox or Safaria. The user's browser requests HTML to your server. The browser will present the page received from the server in graphics and text; the user sees and activates the web page. This looks very foundation, but things will become interesting. In fact, the huge number of "stuff)" occurs between steps 4 and 5 is the focus of this article. The term "filler" is also very applicable because most programmers have never truly considered what happened to markers when the user browser requests the display tag.
Whether the browser just reads text in HTML and displays it? CSS? Especially when CSS is located outside the external file. JavaScript? It is also usually located in an external file. How does the browser handle these items, if the event handler, function, and style are mapped to this text tag? Practice certificate, the answers to all of these issues are Document Object Model. Therefore, less nonsense, directly study the DOM. Web programmers and tags for most programmers when their work is over when the web browser begins. That is to say, after putting an HTML file into the Directory of the web browser, you usually think it has been "completed", and (full of hope), you will not consider it again! It is also a great goal when it is written, and it is also a great goal; I hope that your tagged browser, use various versions of CSS and JavaScript to display the content it should display, nothing. The problem is that this method limits the understanding of the truly happening in the browser. More importantly, it limits the ability to dynamically update, changes, and reboot web pages with client JavaScript. Get rid of this restriction, so that your Web site has greater interactivity and creativity. Programmers do as a typical web programmer, you may start entering HTML, CSS, and even JavaScript after you start text editing and IDE. It is easy to think that these tags, selectors and properties are just a small task that makes the site correctly. However, at this point you need to expand your ideas and realize that you are organizing your content. Don't worry; I guarantee that this will not turn to label beauty, you have to recognize the true potential of the web page or a lecture of any other metamorphism. What you need to know is what role in the Web development. Speaking of the appearance of the page, you can only mention suggestions. When you provide a CSS style sheet, users can override your style selection. When you provide a font size, the user browser can change these sizes for the visifison, or to reduce the proportion on large displays (with equivalent resolution). Even the colors and fonts you choose are also subject to the fonts installed on their system. Although doing do your design page style is very good, this is not your greatest impact on the web page. You are absolutely controlling the structure of the web page. Your tag cannot be changed, users can't get messages; their browser can only retrieve tags from your web server (although the pattern is more in line with the user's taste rather than your own taste). But the page is organized, whether it is in this paragraph or other partitions, only by you separately. If you want to actually change your page (this is most of the Ajax applications), you are working on the structure of the page. Although it is easy to change the color of a piece of text, adding text on existing pages or has a lot of things throughout the section. Regardless of how users design the style of this section, they are controlled by your organization. Mark Do you realize that your tag is truly related to the organization, you will look at it. Will not think that H1 causes the text to be a big name, black, bold, and will think that H1 is a title. How do users look at this issue and they use your CSS, their own CSS or the combination of both, this is a secondary consideration. Instead, we must realize that only tags can provide this level of organization; P is indicated in the paragraph, IMG represents images, divide the page into a section, and so on. It should also be clear that style and behavior (event handler and JavaScript) are applied to the organization after things. The tag is ready to operate or design it.
So, as you can save CSS in an external file of HTML, the tag of the tag is separated from its style, format and row. Although you must use JavaScript to change the style or text style, it is more interesting to actually change your tag. As long as you keep in mind that your marking is only provided to organize your page, you can stand in an invincible place. Before entering a small step, you will understand how the browser accepts all the text organizations and transforms them into a super interesting thing, a set of objects, where each object can be changed, added, or deleted.
About other ideas for markers Edit: Is it wrong? Pure text is ideal for storage tags, but is not suitable for editing tags. The big way is to operate the web page tag using IDE, such as Microsoft® FrontPage®, or more Macromedia Dreamweaver or a more powerful point. These environments typically provide shortcuts and help to create a web page, especially when using CSS and JavaScript, both from the actual page tag. Many people still prefer to use ancient Notepad or VI (I admit me is also one of them), this is not tight. In any case, the end result is a text file full of tags. Text on the Internet: Good things have been said, the text is the best media of the document, such as HTML or CSS, which is transmitted thousands of times on the network. When I said that the browser indicates that the text is difficult, it is a visual graphic page that converts text to the user to the user. This doesn't matter how the browser actually retrieves the page from a web browser; in which case the text is still the best choice. The advantages of text tags are worth considering why plain text is definitely the best choice for storage of HTML (see some other ideas for marking). Do not consider excellent shortcomings, just recalling that HTML is sent to a web browser through the network (for simple, not considering cache, etc.). It's really no way to pass the text again. Binary objects, page graphical representations, reorganized tag blocks, etc., all all this is more difficult to pass network through network files. In addition, the browser also adds a bright color. Today's browser allows users to change text size, compact image, and download the CSS or JavaScript (most case), even more, which completely excludes the sending of any type of page graphic representation to the browser. However, the browser requires the original HTML so that it can apply any processing on the page in the browser instead of trusting the browser to process the task. Similarly, the CSS separates from JavaScript and separates CSS from HTML marking requirements to be easily separated format. Text files have become the best way to be the task again. Last but equally, it is, remember, new standards (such as HTML 4.01 and XHTML 1.0 and 1.1) Commitment to separate content (data in the page) with representations and styles (usually applied by CSS applications). If the programmer wants to separate HTML with CSS, then forced the browser to retrieve some of the pages of the blended pages, which will lose most of these standards. Keeping these parts When they arrive at the browser, they have been separated so that the browser has unprecedented flexibility when you get HTML from the server. To learn more about the web browser for some web programmers, all the content read in the previous article may be a funny story about the role in the web development process. But talking about the behavior of the browser, many of the most capable web designers and developers usually have not realized the actual situation of "insider". I will talk about this section. Don't worry, the code is coming soon, but you want to make your encoded mood, because you really understand the exact behavior of the web browser is very important for your code correctly. The shortcomings of text tags are just except for the design staff and page creators, it also has quite shortcomings for browsers. Specifically, the browser is difficult to direct text tags to the user (see some other ideas for tags). Consider the following common browser tasks:
Based on element type, class, id, and its location in the HTML document, the CSS style (usually from multiple style sheets from external files) is applied to tags. Based on JavaScript code (usually located in an external file) to apply style and format to different parts of the HTML document. Change the value of the form single field based on the JavaScript code. Based on JavaScript code, support visual effects, such as image flipping and image exchange. Complexity is not to encode these tasks; everything in it is quite easy. Complexity comes from a browser that actually implements a request action. If the tag is stored as text, for example, how to enter text (text-align: center) in the P element in the Center-Text class, how to implement it? Add the inline style to the text? Apply styles to HTML text in your browser, and only keep content or not in content? Apply an unmovable HTML, then apply the format after the event? These very difficult problems are now very few reasons for writing browsers. (Writing a browser should accept the most sincere gratitude), pure text is not a good method for storing browser HTML, although the text is the best solution for page tags. If you add JavaScript to change the ability to change the page structure, things become subtle. Should the browser restote the modified structure to disk? How can I keep the latest version of the document? Undoubtedly, text is not an answer. It is difficult to modify, it is very difficult to apply style and behavior, and the dynamic essence of the Web page today is very far away. A answer to the tree view (at least the answer to today's Web browser) is used to represent HTML using a tree structure. See Listing 1, this is a fairly simple and boring HTML page representing the tag of this article. Listing 1. Simple HTML page in text tag
Trees, Trees, Everywhere </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><H1> Trees, Trees, Everywhere </ h1></p>
<p><P> Welcome to a <em> really </ em> boring page. </ p></p>
<p><DIV></p>
<p>Come again soon.</p>
<p><img src = "http://www-128.ibm.com/developerworks/cn/xml/wa-ajaxintro4/COME-AGAIN.GIF" /></p>
<p></ div></p>
<p></ body></p>
<p></ html></p>
<p>The browser accepts this page and converts it to the tree structure, as shown in Figure 1. Figure 1. The tree view of the Listing 1 In order to maintain the progress of this article, I did a little simplification. Experts from DOM or XML will realize that the blank has an impact of the document text represents and decomposes the way in the web browser tree structure. The skin's understanding will only make things ambiguous, so if you want to figure out the impact of the blank, it is best nothing; if you don't want it, you can continue to read, don't consider it. When it becomes a problem, you will understand everything you need. In addition to the actual tree background, it may first notice that everything in the tree contains an element with an outermost HTML, ie the HTML element begins. This is called a root element using the metaphor of the tree. So even if this is the bottom layer of the tree, when you view and analyze the tree, I usually start here. If it does work, you can put the entire tree down, but this does have some metaphor of the tree. The line from the root outflow represents the relationship between different marking parts. Head and body elements are children of HTML root elements; Title is a child of Head, while text "Trees, Trees, Everywhere" is Title's child. The whole tree goes to this organization until the browser obtains a structure similar to Figure 1. Some additional terms are branches of HTML (BRANCHES) in order to follow the tree. The branch is because they have their own children. When arriving at the end of the tree, you will enter the main text, such as "Trees, Trees, Everywhere" and "Really"; these usually referred to as leaves because they do not have their own children. You don't need to remember all of these terms, when you try to figure out the meaning of specific terms, as long as you think that the tree structure is much easier. The value of the object has learned some basic terms, and should now pay attention to the small rectangle containing the element name and the text (Figure 1). Each rectangle is an object; the browser solves some text issues. By using an object to represent each part of the HTML document, you can easily change your organization, application style, allowing JavaScript to access documents, and so on. Each possible type of object type and properties tag has its own object type. For example, the elements in HTML are represented by the ELEMENT object type. The text in the document is represented by a text type, and the property is represented by Attribute type to use this class. So the web browser can not only use object models to represent documents (thus avoiding processing static text), but also use object types to immediately identify what is something. The HTML document is parsed and converted to an object collection, as shown in Figure 1, then a bracket and escape sequence (for example, using <indicating <indicating <, use> means>) or the like is no longer a problem. This makes the browser's work (at least after parsing the input HTML) easier. How to find something is element or attribute and determine how to handle this type of object, which is very simple. By using objects, web browsers can change the properties of these objects. For example, each element object has a parent element and a series of sub-elements. So add a new child element or text only needs to add a new child element to the child's sub-list of the elements. These objects also have a Style property, so the style of fast changing elements or text segments is very simple. For example, to change the height of the DIV using JavaScript, as shown below: Somediv.Style.Height = "300px";</p>
<p>In other words, the web browser uses object properties to easily change the appearance and structure of the tree. Compared with the browser to represent a complex thing that must be made when the page is text as text, each change attribute or structure requires a browser to rewrite static files, resolving and resculating on the screen. With an object, all this is solved. Now, spend some HTML documentation and tap it with a tree. Although this looks an unusual request (especially in such an article containing very little code), if you want to manipulate these trees, you need to be familiar with them. In this process, some weird things may be found. For example, consider the following:</p>
<p>What happened attribute? Decompose the text of elements (such as EM and B)? Is incorrect structure (such as the HTML that is missing when the P mark is missing? Once you are familiar with these issues, you can better understand the following sections. Strictly sometimes a good thing if you try to practice I, you may find that the marked tree view is in some potential problems (if you don't practice, then listen to me!). In fact, some problems will be found in Listing 1 and Figure 1, first look at how the P element is decomposed. If you ask the usual web developer "What is the text content of P element", the most common answer will be "Welcome to a really boring web page.". If you compare it to Figure 1, you will find this answer (although logic) is not true. In fact, the P element has three different sub-objects, with no complete "Welcome to a really boring web page." Text. You will find part of the text, such as "Welcome to A" and "Boring Web Page", but not all. To understand this, remember that any content in the tag must be converted to a type of object. In addition, the order is insignificant! If the browser displays the correct object, but the order in which the display is not provided in HTML, then you can imagine how users will respond to a web browser? Paragraph clip in the middle of the page title and article title, and this is not the style when you organize documents yourself? Obviously, the browser must maintain the order of elements and text. In this example, the P element has three different parts:</p>
<p>The text of the text EM element itself before the EM element The text after the EM element is disrupted, and the focus may be placed in the wrong part of the text. In order to keep all normal, the P element has three sub-objects, and its sequence is the order shown in the HTML of Listing 1. Moreover, the focus text "Really" is not a sub-element of the P; it is a child element of the sub-element EM of the P. It is very important to understand this concept. Although "real" text may be displayed with other P element text, it is still the direct child element of the EM element. It can have different formats that are different from other P texts and can be moved every other text. To keep it in mind, try to use the figure to represent the HTML in Listing 2 and 3, ensuring that the text has the correct parent element (regardless of how the text will eventually display on the screen). Listing 2. Tags with smart elements</p>
<p><html></p>
<p><HEAD></p>
<p><title> this is a little tricky </ title></p>
<p></ hEAD></p>
<p><body></p>
<p><h1> pay <u> close </ u> attention, ok? </ h1> <div></p>
<p><p> this p really isn "t <em> necessary </ em>, but it makes the</p>
<p><span id = "bold-text"> structure <i> and </ i> the Organization </ span></p>
<p>Of the page easier to keep up with. </ p></p>
<p></ div></p>
<p></ body></p>
<p></ html></p>
<p>Listing 3. More smart elements Nested</p>
<p><html></p>
<p><HEAD></p>
<p><title> Trickier Nesting, Still </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><div id = "main-body"></p>
<p><div id = "contents"></p>
<p><table></p>
<p><TR> <TH> Steps </ TH> <TH> Process </ TH> </ TR></p>
<p><TR> <TD> 1 </ TD> <TD> Figure Out The <em> root element </ em>. </ td> </ tr></p>
<p><Tr> <TD> 2 </ TD> <TD> DEAL with the <span id = "code"> Head </ span> first,</p>
<p>AS IT "S Usually Easy. </ TD> </ TR></p>
<p><Tr> <TD> 3 </ TD> <TD> Work Through The <span id = "code"> body </ span>.</p>
<p>Just <em> take your time </ em>. </ Td> </ tr></p>
<p></ TABLE></p>
<p></ div></p>
<p><div id = "closing"></p>
<p>This Link is <em> NOT </ em> Active, But if it were, the answers</p>
<p>To this <a href="answers.html"> <img src = "http://www-128.ibm.com/developerworks/cn/xml/wa-</p>
<p>Ajaxintro4 / Exercise.gif "/> </A> Would</p>
<p>Be there. but <em> do the supercise anyway! </ em></p>
<p></ div></p>
<p></ div></p>
<p></ body></p>
<p></ html></p>
<p>These exercises will be found in Tricky-Solution.gif and Figure 3 at the GIF file in this article. Don't peek, take some time to answer it. This will help you understand how stringent rules applied when you organize trees, and truly help you master HTML and their tree structure. What about the property? Are you experiencing some problems when you try to figure out how to deal with properties? Before you mention, the property does have your own object type, but the property does not show the child elements of its elements, nested elements and text are not in the same property "level", you will notice that Listing 2 and 3 Answers There is no display attribute. The attribute is in fact stored in the object model used by the browser, but they have some special situations. Each element has a list of available properties and is separated from the sub-object list. So the DIV element may have a list containing the properties "ID" and another attribute "class". Remember, the properties of the elements must have the only name, that is, one element cannot have two "id" or two "class" properties. This makes the list easy to maintain and access. In the next article, you will see that you can simply call methods such as GetAttribute ("ID") to obtain the value of the attribute by name. You can also use a similar approach to add a value of an attribute or setting (reset) existing attribute. It is worth noting that the uniqueness of the attribute name makes the list different from the list of child objects. The P element can have multiple EM elements, so the child object list can contain multiple repetitions. Although the operation mode of the sub-list and attribute list is similar, one can contain a repetitive item (sub item for the object), and an incomplete (attribute of the element object). Finally, only the elements have attributes, so the text object does not have additional lists for storing properties. The messy HTML talks to how the browser is converted to a tree before going to the tree, and there is a topic worth exploring, that is, how the browser is not a good format. The format is a widely used term in XML, there are two basic elections:</p>
<p>Each start tag has a matching end tag. So each <p> matches </ p> in the document, each <div> and </ div> match, and so on. The most inside start tag matches the most inside end tag, and then the beginning markings match the end tag of the times, and so on. So <B> <i> bold and italics </ b> </ i> is illegal, because the most inside start tag <i> is not properly matched with the innermost end tag <b>. To make it well, do you switch the start tag order, or switch the end tag order. (If both switches, there will be problems). In-depth study of these two rules. These two rules not only simplify the organization of documents, but also eliminate uncertainty. Is it necessary to apply a bold after bold? Or just the opposite? If this order and umbellar are not a big problem, please remember that the CSS allows the rules to overwrite other rules, so, for example, if the text of the text in the B element is different from the font in the I element, the format application order will change It is very important. Therefore, the format of HTML has a good role. If the browser receives a document that is not a format, it will only do its best. The tree structure will be approximate to the original page of the author's hopes, worst unrecognizable. If you have filed the page into the browser, you can see how your structure should be guess when you see the browser results, and continue to work in frustration. Of course, it is quite simple to get this question: Make sure the document is a good format! If you don't know how to write standardized HTML, please consult the reference information to get help. Dom Introduction To this, you already know that the browser converts the web page to an object, you may even guess, the object is DOM tree. Dom said Document Object Model is a specification that can be obtained from World Wide Web Consortium (W3C) (you can see some DOM related links in the reference). But more importantly, the DOM defines the type and attribute of the object, allowing the browser to indicate. (This series will specifically describe the specification of the DOM in JavaScript and Ajax code.) Document Object First, you need to access the object model itself. This is very easy; you want to use the built-in Document variable in any JavaScript code running on the web page, you can write the following code: Var Domtree = Document;</p>
<p>Of course, the code itself is not used, but it demonstrates that each web browser allows the Document object to be used for JavaScript code and demonstrates the full tree indicating the mark (Figure 1). Each item is a node, which is important, but this is just starting. Before further in-depth, you need to learn another term: node. You already know that each part of the tag is represented by an object, but it is not just an arbitrary object, it is a specific type of object, a DOM node. More specific types, such as text, elements, and attributes inherit from this basic node type. So there are text nodes, element nodes, and attribute nodes. If there are many JavaScript programming experience, you may already use the DOM code. If you have been tracking this Ajax series so far, you must now use the DOM code for a while. For example, the code line var number = document.getlementByid ("Phone"). Value; use the DOM to find a specific element, then retrieve the value of the element (in this example is a form field). So even if you don't realize this, you will use the DOM each time you type a Document. Detailed explanation The term has been learned, the DOM tree is the tree of the object, but more specifically, it is the tree of the node object. In a AJAX application or in any other JavaScript, these nodes can be used to generate the following effects, such as removing elements and their content, highlighting specific text, or adding new image elements. Because all occur in the client (the code running in the web browser), these effects immediately occur, not communicating with the server. The final result is usually the application feeling faster because the content changes on the web page do not have a long pause when requesting a steering server and interpreting a response. In most programming languages, you need to learn the actual object name of each node type, learn the available properties, and figure out the type and forced conversion; but in JavaScript is not required. You can only create a variable and assign you the object you want (as you have already seen): var Domtree = Document;</p>
<p>Var phoneenumbelement = document.getlementByid ("Phone");</p>
<p>Var phoneenumber = phonenumbelement.value;</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-130896.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="130896" 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.040</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.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.2.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 = 'g7eiGgfy9UnMDcEjajn848T63GF6DpxkVZbEWZt9M7Gs1Mr1Mj2Mclq4dRwdTzu0FybSwvCrxMiuaZCRERhJhg_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} 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>
