Dom Programming (II)

Source: Internet
Author: User

  Document is a property of the Window object because you can omit window when you use the members of the Window object, so you generally write the document directly
  Document method:
  (1) Write: Writes content to the document. Writeln, similar to write, except last add a carriage return
  <input type= "button" value= "click" onclick= "document.write (' <font color= red> Hello </font> '/>
  code written in events such as onclick will flush the contents of the page, and only write will merge with the original content during page loading
  < Script type= "Text/javascript",
    document.write (' <font color=red> Hello </font> ');
  </script>
  Write is often used in AD code, consolidated resource code.
  Content Alliance, AD code, CNZZ, do not need to be the master of the main page to maintain the content, as long as the embedded JS content provider to modify content, the content of the display has changed. The
  getElementById method, which is very common, obtains an object based on the ID of the element, and the ID in the Web page cannot be duplicated. Elements can also be referenced directly through the ID of the element, but with a valid scope, Form1.textbox1, and so on, it is not recommended to manipulate the element directly through the ID, but rather through getElementById
  (*) getelementsbyname , the object is obtained according to the name of the element, because the name of the element in the page can be duplicated, such as the name of multiple RadioButton, so the Getelementsbyname return value is an array of objects.
  (*) getElementsByTagName, an array of elements with the specified tag name, such as getElementsByTagName ("P"), to obtain all <p> tags.

  document.write can only be created dynamically during page loading.
  can call the document's CreateElement method to create a DOM object with the specified label, and then add the newly created element to the appropriate element by calling the AppendChild method of an element

Value gets table cell
Almost all DOM elements have innertext, innerHTML attributes (note case), respectively, the textual representation of the contents of the element tag and the HTML source code, both of which are readable and writable. Use innerHTML also can replace createelement, belong to simple, extensive type, the consequence is conceited create
  function Createlink () {
var divmain = document.getElementById ("Divmain");
  divmain.innerhtml = "<a href= ' http://www.rupeng.com ' > such as Peng Network </a>";
 }
  Browser Compatibility example: IE6,IE7 support for Table.appendchild ("tr") is different from IE8, using InsertRow, Insertcell instead or adding tbody to the table, Then add the TR to the tbody. FF does not support innertext. <table id= "Tablelinks" ><TBODY></TBODY></TABLE>, and then Tablelinks.tbodies[0].appendchild (TR).
  Event Bubbling: If element A is nested in element B, then a is clicked not only A's OnClick event will be triggered, and the onclick of B will also be triggered. The order of the triggers is "from Inside Out"
  this in the event. In addition to using Event.srcelement in the event response function, this represents the control in which the event occurred. Only the event response function can use this to obtain the control in which the event occurred, it cannot be used in the function called by the event response function, or if it is to be used, pass this to the function or use event.srcelement. The semantics of this and event.srcelement are not the same, this is the object that represents the current listener event, and Event.srcelement is the object that raised the event: event bubbling.

Modify Style
ERR: Modifying an element's style is not setting the Class property, but the ClassName property. Modifying the style of an element cannot this.style= "background-color:red".
ERR: Properties that modify a style individually use "style. Property name". Note that in CSS, property names may be different when manipulated in JavaScript, primarily in attributes that contain attributes in the attribute name, because JavaScript--is not a property, a class name. So the background color in CSS is Background-color, JavaScript is style.backgroundcolor; The element style name is class, and in JavaScript it is the classname attribute; font-size→style.fontsize;margin-top→style.margint Op
Modify the style of the control individually <input type= "button" value= "AAA" onclick= "this.style.color= ' Red '"/>. Skill, no document in the case of the value of the property name, a random element to set the ID, and then in JS can be id.style. The properties that can be used.
Display of the control layer: modify Style.display

Dom Programming (II)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.