js基础_DOM练习

取消超链接的默认行为

点击超链接后，超链接会跳转页面，这个是超链接的默认行为，但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为。
比如：

window.onload=function(){
                //获取a标签
                var mya=document.getElementById("mya");
                //在超链接标签的单击响应函数里取消超链接的默认行为
                mya.onclick=function(){
                    return false;
                }
}

或者，直接在href里写javascritp:;
如图：

练习：

    
        
        
        
        
    
    
        

            

                
Name
                
Email
                
Salary
                
 
            
            

                
Tom
                
tom@tom.com
                
5000
                
Delete
            
            

                
Jerry
                
jerry@sohu.com
                
8000
                
Delete
            
            

                
Bob
                
bob@tom.com
                
10000
                
Delete
            
        
        

            
添加新员工
            

                

                    
name: 
                    

                        
                    
                
                

                    
email: 
                    

                        
                    
                
                

                    
salary: 
                    

                        
                    
                
                

                    

                        
                            Submit
                        
                    
                
            
        
    

css样式如下：

@CHARSET "UTF-8";
#total {
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}
ul {
    list-style-type: none;
}
li {
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float: left;
}
.inner {
    width: 400px;
    border-style: solid;
    border-width: 1px;
    margin: 10px;
    padding: 10px;
    float: left;
}
#employeeTable {
    border-spacing: 1px;
    background-color: black;
    margin: 80px auto 10px auto;
}
th,td {
    background-color: white;
}
#formDiv {
    width: 250px;
    border-style: solid;
    border-width: 1px;
    margin: 50px auto 10px auto;
    padding: 10px;
}
#formDiv input {
    width: 100%;
}
.word {
    width: 40px;
}
.inp {
    width: 200px;
}

a索引的问题

当body不变，将scrijpt改成如下时：

输出结果为3
在这里，for循环会在页面加载完成后立即执行，而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕。

所以，这里alist[i].parentNode.parentNode找不到，因为这时候i已经变成了3了，所以输出alist[i]为undefined，而alist[0]——alist[2]都能找到a标签。
而this.parentNode.parentNode能找到，因为this就是这个a标签

比如：