您的位置：首页 > Web前端 > JavaScript

JavaScript基础----20Javascript-DOM操作HTML

2015-08-06 20:27 761 查看 
<!DOCTYPE html>
<!--Javascript-DOM操作HTML-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<p>hello</p>-->
<!--<p>hello</p>-->
<!--<p>hello</p>-->
<!--<p>hello</p>-->
<!--<p>hello</p>-->
<!--<button onclick="demo()">按钮</button>-->
<!--<script>-->
<!--function demo(){-->
<!--//       p标签已经加载完成，如果使用按钮触发，就会覆盖-->
<!--//       p中的内容-->
<!--document.write("打印覆盖")-->

<!--}-->
<!--</script>-->

<!--通过id找到元素，改变p标签的值-->
<!--<p id="pid">hello</p>-->
<!--<button onclick="demo()">按钮</button>-->
<!--<script>-->
<!--function demo(){-->
<!--var nv=document.getElementById("pid");-->
<!--nv.innerHTML="zhiahaohao"-->
<!--}-->
<!--</script>-->

<!--通过标签找到元素，改变p标签的值-->
<!--<p>hello01</p>-->
<!--<p>hello02</p>-->
<!--<p>hello03</p>-->
<!--<button onclick="demo()">按钮</button>-->
<!--<script>-->
<!--function demo(){-->
<!--//        如果有多个p标签，要指定改变哪一个-->
<!--document.getElementsByTagName("p")[1].innerHTML="123456";-->

<!--}-->
<!--</script>-->

<!--改变html的属性,改变a的属性-->
<!--<a id="aid" href="http://www.sina.com.cn">极客学院</a>-->
<!--<button onclick="demo()">按钮</button>-->
<!--<script>-->
<!--function demo(){-->
<!--document.getElementById("aid").href="http://www.baidu.com";-->
<!--}-->
<!--</script>-->

<!--改变img的属性-->
<img id="tid1" src="image/mn2%20(1).jpg">
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("tid1").src="image/mn2%20(2).jpg";
}
</script>

</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航