Example analysis of JavaScript methods and attributes for obtaining elements

JS method of getting elements

You can use the built-in object## The getElementById method on #document is used to obtain the element with the id attribute set on the page. What is obtained is an html object, and then it is assigned to a variable

  <scripttype="text/javascript">    var op =document.getElementById(&#39;p1&#39;);
   alert(op)弹出对话框
 </script>  <p id="p1">这是一个p元素</p>

##But

Note:If Put the above piece of code into and an error will be reported

Solution Method:

Computer loading

<scripttype="text/javascript">    
1.window.onload = function(){        
2.var op = document.getElementById(&#39;p1&#39;);    
}
  </script>
 
<p id="p1">这是一个p元素</p>

js operation element’s attributes

Get By selecting a page element, you can operate the attributes of the page element. The operation of attributes includes reading and writing attributes.

Methods for operating attributes

• 1. "." Operation

• 2. "[ ]" operation

How to write attributes

• 1. The attributes of html are written in the same way as the attributes in js

• 2.

  "class" attribute is written as "className"

• 3. "style" attribute Attributes of

  with horizontal bars should be changed to camel case , for example: "font-size" should be changed to "style.fontSize"

Get attributes through dot (.)

<scripttype="text/javascript">
1.加载：window.onload =function(){        
2.获取：var oInput = document.getElementById(&#39;input1&#39;);        
2.获取：var oA = document.getElementById(&#39;link1&#39;);        
3.//读取属性值        
var sValue =oInput.value;        
var sType =oInput.type;        
var sName =oInput.name;        
var sLinks = oA.href;        
4.//写(设置)属性        
oA.style.color = &#39;red&#39;;        
oA.style.fontSize = sValue;    
}
</script>
<inputtype="text" name="setsize" id="input1"value="20px"><a href="" id="link1">百度</a>

Get through [ ]

<scripttype="text/javascript">
1.加载：window.onload= function(){        
2.获取：var oInput1 =document.getElementById(&#39;input1&#39;);        
2.获取：var oInput2 =document.getElementById(&#39;input2&#39;);        
2.获取：var
 oA =document.getElementById(&#39;link1&#39;);        
3.//读取属性        
var sVal1 = oInput1.value;        
var sVal2 = oInput2.value;        
4.//写(设置)属性        
// oA.style.val1 = val2; 没反应        
oA.style[sVal1] = sVal2;          
 }
</script>
<inputtype="text" name="setattr" id="input1"value="fontSize">
<input type="text" name="setnum" id="input2"value="30px">
<a href="" id="link1">百度</a>

Through the innerHtml attribute of the acquired tagRead and write the content of the tag package

• Read op .innerHtml

• Write op.innerHTML = "New Content"

The above is the detailed content of Example analysis of JavaScript methods and attributes for obtaining elements. For more information, please follow other related articles on the PHP Chinese website!