“This is the 20th day of my participation in the August Gwen Challenge.

Element object attributes

The value attribute

Value gets the value of the element object. Value;

Value = Sets the value of the element object. Value = Sets the value of the element object.

<input type="text" id="t1" value="Hello" /> alert(t1.value); </script>Copy the code

Now I want to change the value of t1 to HelloWorld.

t1.value = "HelloWorld"
Copy the code

The className attribute

ClassName gets the class attribute value of the element object.

Sets the class value of the element object by setting the class value of the element object. ClassName =.

<style> .ys1{ color:red; } .ys2{ color: blue; } </style> <span id="s1" class="ys1"> </span> <script> var s1 = document.getElementById("s1"); alert(s1.className); </script> </body>Copy the code

Here I’ve given two styles, currently style 1, and we’ll see what happens when we change its className value.

s1.className="ys2"
Copy the code

You can see that the element style has been changed.

Checked attribute

Checked gets the checked property value of the element object.

Set the checked property value of the element object via the element object. Checked = set checked property value.

Checked represents the default value of a checkbox or checkbox in HTML. Note that checked= “checked” in HTML returns true in JavaScript and false when checked.

So let’s see how it works.

                <input type="checkbox"  id="sex"/>
		<script>
			var sex = document.getElementById("sex");			
			alert(sex.checked);
		</script>
Copy the code

We didn’t set checked at the beginning, so it defaults to false, so let’s make that check box checked.

sex.checked=true; It’s already selected.

InnerHTML attribute

The innerHTML attribute operates on the content body of the element.

InnerHTML Gets the content body of the element object.

Sets the content body of an element object with the.innerhtml = attribute value.

Give it a try.

Gets the content body of the element. <span id="s1"> <span > <script> var s1 = document.getelementbyid ("s1"); alert(s1.innerHTML); </script>Copy the code

Changes the content body of an element.

S1. innerHTML=" It looks like rain today ";

This is resetting the content body, so what if we want to append to the content body?S1. innerHTML+=", remember to bring an umbrella!" ;

Write in the last

Ok, so much for the common properties of DOM objects. If there is something wrong with the above content, welcome to dig friends to criticize and correct! Come and give it a try.