SoFunction
Updated on 2025-03-01

JS traversal of all object properties and implementation methods on page

Javascript example for...in loop:

<html>
<head>
<title>One to usefor...inCircularJavascriptExample</title>
</head>
<body>
<script type="text/javascript">
// Create an object myObject and three properties sitename, siteurl, sitecontent.var myObject = new Object();
 = "Cloud";
 = "";
 = "Chinese site for web tutorial code gallery";
//Transfer all properties of the objectfor (prop in myObject)
{
("Properties '" + prop + "' for " + myObject[prop]);
("<br>");
}
</script>
</body>
</html>

Today, the Java Tang blog online found a method to iterate through all the attribute names and values ​​of a JavaScript object. This is very intuitive and convenient when using the method. The code is as follows:

/*
 * Used to traverse all attribute names and values ​​of the specified object
 * obj Objects to traverse
 * author: Jet Mah
 */ 
function allPrpos ( obj ) { 
// Used to save all attribute names and valuesvar props = "" ; 
// Start traversalfor ( var p in obj ){ 
// methodif ( typeof ( obj [ p ]) == " function " ){ 
obj [ p ]() ; 
} else { 
// p is the attribute name, obj[p] is the value of the corresponding attributeprops += p + " = " + obj [ p ] + " \t " ; 
} 
} 
// Finally, all attributes are displayedalert ( props ) ; 
}

AJAX's JavaScript reflection mechanism refers to the program being able to obtain its own information when it is run. For example, an object can know what methods and properties it has at runtime. In JavaScript, the syntax is as follows:

for(var p in obj){ 
//Sentence}

In Ajax programming, it is often necessary to dynamically change the style of interface elements. This can be changed through the object's style attribute. For example, to change the background color to red, you can write it like this:

="#ff0000";

Basically, the properties that are owned in CSS can be used in JavaScript:

function setStyle(_style){ 
//Get the interface object to change the stylevar element=getElement(); 
=_style; 
}

The entire style object is directly passed as a parameter:

var style={ 
color:#ffffff, 
backgroundColor:#ff0000, 
borderWidth:2px 
}

You can call the function like this:
setStyle(style);

Or write it directly as:
setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

This code seems to have no problem, but in fact, when using the parameter _style assigning value inside the setStyle function, if the element already has a certain style, for example, it has been executed:
="20px";

However, the definition of height is not included in _style, so the height style of element is lost, not the initial result. To solve this problem, you can use the reflection mechanism to override the setStyle function:

function setStyle(_style){ 
//Get the interface object to change the stylevar element=getElement(); 
for(var p in _style){ 
[p]=_style[p]; 
} 
}

Iterate through each attribute of _style in the program to get the attribute name, and then use square bracket syntax to assign the corresponding attribute in the corresponding attribute in _style.

The above article on the JS traversal page is all the content shared by the editor. I hope it can give you a reference and I hope you support me more.