Modifying HTML tag properties with JavaScript __mysql

HTML DOM Object

From a JavaScript standpoint, each HTML tag on a Web page is a DOM object, and the properties of the label are also properties of the DOM object. such as:

From the JavaScript point of view, this tag is an Image object, which is one of the DOM objects. Its ID, src, width, border attribute values have been specified, and the other attributes take the default values.

Using a JavaScript program to access a DOM object is actually a program that accesses an HTML tag. You can programmatically modify the properties of a DOM object by modifying the properties of an HTML tag with a program to make the label manageable.

The properties of a DOM object usually correspond to the attributes of the corresponding HTML tag, and the names are usually the same, but the properties of the DOM objects need to be case-sensitive. For example, the border attribute can be used in , <table> and other tags, then the corresponding Image object, table object and other DOM objects also have border properties, the value method is the same.

The names of individual DOM properties and HTML tags have different attribute names, but they are actually the same property. For example, the class attribute of the HTML tag corresponds to the DOM attribute that is classname (note case). This is because class is a JavaScript reserved word, and a property name cannot have the same name as a reserved word.

There are also some DOM attributes that do not have HTML attributes corresponding to them, such as InnerHTML is a DOM property that represents what a label contains. This property allows you to modify the content between the start and end tags of an HTML. However, for a single label such as , its corresponding Image object has no InnerHTML attribute.

In addition, a DOM object provides a method that can be invoked in a program.

In fact, a DOM object is not a JavaScript-specific object, it is a Cross-platform object, and many languages provide access support for DOM objects. JavaScript is just one of them. acquisition of Objects

When you set or modify the properties of an HTML tag with JavaScript, the first thing to do is get the DOM object for the tag. The common methods are:

1. Get DOM object with ID:

If a tag has the id attribute set, we can access the tag using the ID value, which has the JavaScript code: document.getElementById (ID)

Document is a BOM object that represents the current HTML document; getElementById is a method of the Document object; ID is the id attribute value of an HTML tag in a Web page.

The return value of the document.getElementById (ID) is an object type data, which is a DOM object.

2. Get DOM object with Name:

If a tag has the name attribute set, we can access the tag using the name value, which has the JavaScript Code code: Document.getelementsbyname (name)

Note: In a Web page, if you set the id attribute for the label, the id attribute value of each label cannot be the same, and if you set the Name property for the label, you can have more than one label with the same value for the Name property in a Web page.

So the return value of Document.getelementsbyname (name) is not a single object, but an array of DOM objects that contain the same labels for all the name values on this page.

3. Get DOM object with tag name:

We can access the specified tag directly with the tag name, and its JavaScript code code is: document.getElementsByTagName (tagname)

Note: Because the same label can appear multiple times in a Web page, the return value of document.getElementsByTagName (tagname) is also an array of DOM objects that contains all the labels for the type of the specified page.

For example: document.getElementsByTagName ("img") returns an array of Image objects, each of which corresponds to a tag in the Web page, and the elements in the array are arranged in the order in which they appear in labels.

Comparing the above three methods, document.getElementById (ID) is the best and quickest way to directly access a specified HTML tag in a Web page, which is the most common method we will use in the future. set or modify the properties of a label

After getting a DOM object, we can assign a value to the object's properties, thereby modifying the property value of its corresponding label. The general method is: Dom object. property name = value;

The property name of a DOM object is usually the same as the property name of the HTML tag, but it is case-sensitive, so pay special attention when writing.

Example 1:
<button onclick= "SetBorder (0)" >border= "0" </button>
<button onclick= "SetBorder (1)" >border= "1" </button>
<button onclick= "SetBorder (3)" >border= "3" </button>
<button onclick= "SetBorder (8)" >border= "8" </button>

<script type= "Text/javascript" >
function SetBorder (n)
{
document.getElementById ("Image1"). border = N;
}
</script>

The effect is:

Border= "0" border= "1" border= "3" border= "8"

This example allows you to modify the value of the border property of the label by using the button.

First, in order to access the tag, it defines the id= "Image1" attribute.

In the button, use the event handle onclick to respond to the mouse click event and call the JS function SetBorder ().

In the SetBorder () function, use the document.getElementById ("Image1") method to get the Image object corresponding to the label and set a new value for its border property.

Example 2: <marquee id= "Mar" > Welcome. </marquee>
<p><button onclick= "Setdir ()" > Change Direction </button></p>

<script type= "Text/javascript" >
var dir = "Left";
function Setdir ()
{
Dir = (dir== "left")? "Right": "Left";
document.getElementById ("Mar"). Direction = dir;
}
</script>

The effect is:

Welcome to our visit.

Change direction

This example uses the button to modify the value of the direction property of the <marquee> label.

<marquee> when the label does not specify the direction property, its default value is left. Use the JS program to modify its value.