<html>
<head>
<title>Introduction to the DOM</title>
<script>
// We can't manipulate the DOM until the document
// is fully loaded
window.onload = function(){
// Find all the <li> elements in the document
var li = document.getElementsByTagName('li');
// and add a ared border around all of them
for ( var j = 0; j < li.length; j++ ) {
li[j].style.border = '1px solid #000';
}
// Locate the element with an ID of 'everywhere'
var every = document.getElementById( "everywhere" );
// and remove it from the document
every.parentNode.removeChild( every );
};
</script>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome, here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>
使用Dom去掉了第一个li。只显示后面2个。
改变以上的代码，可以有一个特效：
<script>
// We can't manipulate the DOM until the document
// is fully loaded
window.onload = function(){
// Find all the <li> elements, to attach the event handlers to them
var li = document.getElementsByTagName('li');
for ( var i = 0; i < li.length; i++ ) {
// Attach a mouseover event handler to the <li> element,
// which changes the <li>s background to blue.
li[i].onmouseover = function() {
this.style.backgroundColor = 'blue';
};
// Attach a mouseout event handler to the <li> element
// which changes the <li>s background back to its default white
li[i].onmouseout = function() {
this.style.backgroundColor = 'white';
};
}
};
</script>