1, DOM
The Web Standard is now hot in hot, but the discussion below is a Document.All that does not meet the standard.
Dom - Document Object Model Document Object Model provides a way to access document objects.
For example, there is a table in the document, you have to change its background color, you can access this table with Document.all [] in JavaScript. But DOM is also different, because
For the competition between browser manufacturers, all browser manufacturers have developed their private DOM, which can only run correctly on their own browsers. Document.all [] is only running
IE is
Microsoft's private DOM. In order to correctly understand DOM, give IE4 DOM
2, understand Document.all []
Object Model from IE4 IE adds Document.all [] to see DosisT.All [] Description:
Array of all html tags in the document.collection of all elements contained by the object.
That is to say, Document.all [] is an array variable consisting of all tags in the document, including all elements in the document object (see Example 1).
IE's Document.all Collection Exposes All Document Elements.this Array Provides Access To Every Element in The
Document.
Document.all [] This array can access all elements in the document.
Example 1 (This can make you understand which objects are objects)
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
Document.All Example </ Title></p>
<p><meta http-equiv = "content-type" content = "text / html; charSet = ISO-8859-1" /></p>
<p></ hEAD></p>
<p><body></p>
<p><h1> eXample heading </ h1></p>
<p><hr /></p>
<p><p> this is a <em> paragraph </ em>. it is only a <em> paragraph. </ em> </ p></p>
<p><p> yet another <em> paragraph. </ em> </ p></p>
<p><p> this final <em> paragraph </ em> HAS <em id = "special"> Special Emphasis. </ em> </ p></p>
<p><hr /></p>
<p><script type = "text / javascript"></p>
<p><! -</p>
<p>Var i, Origlength;</p>
<p>Origlength = document.all.length;</p>
<p>Document.write ('Document.all.Length =' Origlength "<br />"); for (i = 0; i <Origlength; i )</p>
<p>{</p>
<p>Document.write ("Document.all [" i "] =" Document.All [i] .tagname "<br />");</p>
<p>}</p>
<p>// -></p>
<p></ script></p>
<p></ body></p>
<p></ html></p>
<p>[Ctrl A All Select Tips: You can modify some code first, press Run]</p>
<p>Example 2 (Access a specific element)</p>
<p><! Doctype html public "- // w3c // dtd html 4.01 transitional // en"</p>
<p>"http://www.w3.org/tr/html4/loose.dtd"></p>
<p><html></p>
<p><HEAD></p>
<p><meta http-equiv = "content-type" content = "text / html; charSet = GB2312"></p>
<p><Title> Click DIV Callo Color </ Title></p>
<p><style type = "text / css"></p>
<p><! -</p>
<p>#docid {</p>
<p>HEIGHT: 400PX;</p>
<p>Width: 400px;</p>
<p>Background-color: # 999;</p>
<p>-></p>
<p></ style></p>
<p></ hEAD></p>
<p><body> <div id = "DOCID" name = "DOCNAME" onclick = "bgcolor ()"> </ div></p>
<p></ body></p>
<p></ html></p>
<p><script language = "javaScript" type = "text / javascript"></p>
<p><! -</p>
<p>Function bgcolor () {</p>
<p>Document.all [7] .style.backgroundcolor = "# 000"</p>
<p>}</p>
<p>-></p>
<p></ script></p>
<p>[Ctrl A All Select Tips: You can modify some code first, press Run]</p>
<p>The above example allows you to know how to access a specific element in the document, such as a DIV in the document</p>
<p><div id = "docid" name = "docname"> </ div></p>
<p>You can access this DIV through this DIV ID, Name or INDEX property:</p>
<p>Document.all ["docid"]</p>
<p>Document.all ["docname"]</p>
<p>Document.all.Item ("DOCID")</p>
<p>Document.all.Item ("DOCNAME")</p>
<p>Document.all [7]</p>
<p>Document.all.tags ("div") returns all DIV arrays in the document. There is only one div in this example, so you can access it with Document.All.tags ("DIV") [0].</p>
<p>3, use document.all []</p>
<p>Example 3</p>
<p><! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"></p>
<p><html xmlns = "http://www.w3.org/1999/xhtml"></p>
<p><HEAD></p>
<p><title> Document.All Example # 2 </ title></p>
<p><meta http-equiv = "content-type" content = "text / html; charSet = ISO-8859-1" /></p>
<p></ hEAD></p>
<p><body></p>
<p><! - Works in Internet Explorer and Compatible -></p>
<p><h1 id = "Heading1" align = "center" style = "font-size: lar;"> DHTML FUN !!! </ h1></p>
<p><form name = "testform" id = "testform" Action = "#" method = "get"></p>
<p><br /> <br /></p>
<p><Input Type = "Button" value = "align left"</p>
<p>οnclick = "Document.all ['Heading1']. Align = 'Left';" /></p>
<p><Input Type = "Button" value = "align center"</p>
<p>οnclick = "Document.all ['Heading1']. align = 'center';" /></p>
<p><Input Type = "Button" value = "align right"</p>
<p>οnclick = "Document.All ['Heading1']. Align = 'Right';" /></p>
<p><br /> <br /></p>
<p><Input Type = "Button" value = "BIGGER"</p>
<p>οnclick = "Document.all ['Heading1']. style.fontsize = 'xx-large';" /></p>
<p><Input Type = "Button" value = "smaller"</p>
<p>οnclick = "Document.all ['Heading1']. style.fontsize = 'xx-small';" /></p>
<p><br /> <br /></p>
<p><Input Type = "Button" value = "red"</p>
<p>οnclick = "Document.all ['Heading1']. style.color = 'red';" /></p>
<p><Input Type = "Button" value = "blue"</p>
<p>οnclick = "Document.all ['Heading1']. style.color = 'blue';" /></p>
<p><Input Type = "Button" value = "black"</p>
<p>οnclick = "Document.all ['Heading1']. Style.Color = 'Black';" /></p>
<p><br /> <br /></p>
<p><input type = "text" name = "usertext" id = "usertext" size = "30" /></p>
<p><Input Type = "Button" value = "Change Text"</p>
<p>οnclick = "Document.all ['Heading1']. InnerText = Document.testform.Usertext.Value;" /></p>
<p></ form></p>
<p></ body></p>
<p></ html></p>
<p>[Ctrl A All Select Tips: You can modify some code first, press Run]</p>
<p>4, access method in standard DOM</p>
<p>I said that Document.all [] did not comply with the web standard, what is it used to replace it? Document.getlementByid</p>
<p>Most Third-Party Browsers Are "strict standards" IMPLEMENTATIONS, MeANing That Theimplement W3c and Ecma Standards and</p>
<p>Ignore Most of The Proprietary Object Models of Internet Explorer and Netscape.</p>
<p>If The demographic for your Web site incduDes Users Likey To Use Less Common Browsers, Such as Linux AfICIS, IT Might</p>
<p>Be a good idea to Avoid IE-Specific Features and Use The W3C Dom INSTEAD.</p>
<p>BY Internet Explorer 6, We See That Ie Implements Significant Portions of The W3C DOM.</p>
<p>The meaning of this paragraph is that most third-party browsers only support W3C DOM. If your website users use other browsers, then you should best avoid using IE private properties. And IE6 is also open</p>
<p>Start W3C DOM.</p>
<p>After all, most people still don't understand the standard. Before using the standard, you can also access document objects in your web page. (to be continued)</p>
<p>Write the web standard in front, continue today</p>
<p>Under the web standard, you can access any of the tabs in Document by getElementByName (), and getElementsBytagname (), and getElementsByTagname ().</p>
<p>1, getElementByid ()</p>
<p>getElementByid () can access a particular element in the document, as the name suggests, is to obtain an element through the ID, so you can only access the elements set up the ID.</p>
<p>For example, there is a DIV ID for docid: <div id = "docid"> </ div></p>
<p>Then you can get this element with getElementByid ("DOCID").</p>
<p><! Doctype html public "- // w3c // dtd html 4.01 transitional // en"</p>
<p>"http://www.w3.org/tr/html4/loose.dtd"></p>
<p><html></p>
<p><HEAD></p>
<p><meta http-equiv = "content-type" content = "text / html; charSet = GB2312"></p>
<p><title> byid </ title></p>
<p><style type = "text / css"></p>
<p><! -</p>
<p>#docid {</p>
<p>HEIGHT: 400PX;</p>
<p>Width: 400px;</p>
<p>Background-color: # 999;</p>
<p>-></p>
<p></ style></p>
<p></ hEAD></p>
<p><body> <div id = "DOCID" name = "DOCNAME" onclick = "bgcolor ()"> </ div></p>
<p></ body></p>
<p></ html></p>
<p><script language = "javaScript" type = "text / javascript"></p>
<p><! -</p>
<p>Function bgcolor () {</p>
<p>Document.GetElementByid ("docid"). style.BackgroundColor = "# 000"</p>
<p>}</p>
<p>-></p>
<p></ script></p>
<p>[Ctrl A All Select Tips: You can modify some code first, press Run]</p>
<p>2, getElementsByname ()</p>
<p>This is an element through Name, but I don't know if you don't pay attention, this is get elements, the plural Elements representative is not an element, why?</p>
<p>Because the ID of each element in the Document is unique, Name can be repeated. The metaphor is like a person's ID number (theoretical, although repetition in reality), but the name</p>
<p>There are many repetitions. If there are more than two label Names in one document, getElementsByName () can make these elements to form an array.</p>
<p>For example, there are two DIVs:</p>
<p><div name = "docname" id = "docid1"> </ div></p>
<p><div name = "docname" id = "docid2"> </ div></p>
<p>Then you can use getElementsByname ("DOCNAME") to access the first DIV with getElementSbyName ("DOCNAME") [0], with getElementsByname</p>
<p>("DOCNAME") [1] Access the second DIV.</p>
<p>Below this paragraph is wrong, please see the resumption of Forfor but a pity, IE does not support this method, everyone is interested in debugging the following examples in Firefox or Netscape. (I was debugged in Netscape7.2 English and Firefox 1.0.) <! Doctype html public "- // w3c // DTD XHTML 1.0 transitional // en" "http://www.w3.org/tr/ XHTML1 / DTD / XHTML1-TransitionAl.dtd "> <html xmlns =" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv =" content-type "content =" text / HTML; Charset = GB2312 "> <title> BYNAME, TAG </ title> <style type =" text / css "> <! - # docid1, # docid2 {margin: 10px; height: 400px; width: 400px; background -Color: # 999;} -> </ style> </ head> <body> <div name = "DOCNAME" ID = "DOCID1" OnClick = "BGCOLOR ()"> </ div> <div name = " DocName "id =" docid2 "onclick =" bgcolor ()> </ div> </ body> </ html> <script language = "javascript" type = "text / javascript"> <! - function bgcolor () {var Docnobj = document.getElementsByname ("DOCNAME"); DOCNOBJ [0] .style.backgroundColor = "black"; docnobj [1] .style.BackgroundColor = "Black";} -> </ script> It seems that the latest The browser understands the web standard, I know only the box model, space bug, floating bug, Flash insert bug, from Document.getElementSbyName, I can see Firefox, Netscape understanding standard, but forfor said: To be flexible Application standard.</p>
<p>3, getElementsBytagname ()</p>
<p>This is the element through the Tagname (Label Name), and a document will have the same label in a document, so this method is also an array.</p>
<p>Below this example has two div, you can access them with getElementsBytagname ("div"), use getElementsBytagname ("div") [0] to access the first DIV, with</p>
<p>GetElementsBytagname ("DIV") [1] accesses the second DIV.</p>
<p><! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">" HTML XMLNS = "http : //www.w3.org/1999/xhtml>></p>
<p><HEAD></p>
<p><meta http-equiv = "content-type" content = "text / html; charSet = GB2312"></p>
<p><title> BYNAME, TAG </ Title></p>
<p><style type = "text / css"></p>
<p><! -</p>
<p># docid1, # docid2 {</p>
<p>Margin: 10px;</p>
<p>HEIGHT: 400PX;</p>
<p>Width: 400px;</p>
<p>Background-color: # 999;</p>
<p>-></p>
<p></ style></p>
<p></ hEAD></p>
<p><body></p>
<p><div Name = "DOCNAME" ID = "docid1" onclick = "bgcolor ()> </ div></p>
<p><div name = "DOCNAME" ID = "docid2" onclick = "bgcolor ()> </ div></p>
<p></ body></p>
<p></ html></p>
<p><script language = "javaScript" type = "text / javascript"></p>
<p><! -</p>
<p>Function bgcolor () {</p>
<p>Var docnobj = document.getlementsBytagname ("div");</p>
<p>Docnobj [0] .style.backgroundcolor = "black";</p>
<p>DOCNOBJ [1] .style.backgroundcolor = "black";</p>
<p>}</p>
<p>-></p>
<p></ script></p>
<p>[Ctrl A All Select Tips: You can modify some code first, press Run]</p>
<p>Summary Standard DOM, access a particular element as much as possible with standard getElementByid (), access the standard getElementBytagName (), but IE does not support</p>
<p>getElementSbyName (), so avoid using getElementsByname (), but getElementsByname () and does not meet the standard Document.all [] is not all unsatisfactory, it</p>
<p>We have your own convenience, use no browsers who don't have to watch the website users, you decided by yourself.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-48968.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="48968" 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.055</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 = '0wfJRplRVrHpWu4GO5Zkw4MMcj_2BMZHVNguTOgDpZPmTNme3kyCAYLp5PYdtN1SP97cGVySq5a4ytXO9nt_2Bd_2B_2Bg_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>
