<html>
<head>
<style>
#p1 {
color: grey;
font-family: 'Arial',sans-serif
}
</style>
<script>
window.onload = function() {
var _p2 = document.getElementById("p2");
//alert(_p2.style.color + " - " + _p2.style.fontFamily + " - " + _p2.style.fontSize);
//alert(p2.nodeName + " --- " + p2.style + " --- " + p2.nodeType);
//alert(typeof _p2.nodeName + " " + typeof _p2.style); //string object
_p2.style.color = "blue";
var _p = document.getElementsByTagName("p");
for (var i = 0; i < _p.length; i++) {
//alert(typeof _p[i].nodeName);
//alert(typeof _p[i].style);
_p[i].onclick = function() {
alert("You clicked on a paragraph");
}
}
var h1List = document.getElementsByTagName("h1");
//alert(h1List.length);
//alert(0 < h1List.length);
try {
for (var j = 0; j < h1List.length; j++) {
console.log("run one!!!!");
//alert("222");
var nextEle = h1List[j].nextElementSibling;
//alert(nextEle.innerHTML);
nextEle.style.color = "pink";
}
console.log("ddddddddddddddddddddddddddddddd");
} catch(e){
alert(e);
console.log(e);
}
// alert("ff");
}
</script>
</head>
<body>
<p id="p1">This is a message.</p>
<p id="p2" style="color:red;font-family: 'Arial',sans-serif; font-size: 20px;">This is a message.</p>
<h1>This is H1</h1>
<p>This is hehe msg!#</p>
<p>This is haha msg!!#</p>
<h1>This is H1</h1>
<p>This is hehe msg!</p>
<p>This is haha msg!!</p>
</body>
</html>