码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript HTML DOM

时间:2017-03-01 16:51:15      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:lin   doc   space   font   sch   ima   html   elf   html dom   

1: 改变HTML元素的内容

使用innerHTML方法: document.getElementById(id).innerHTML=new HTML 
如: document.getElementById("p1").innerHTML="New text!";
 
2: 改变HTML元素属性
使用  document.getElementById(id).attribute=new value
如: document.getElementById("image").src="landscape.jpg";
 
3: 改变HTML样式
使用: document.getElementById(id).style.property=new style
如: document.getElementById("p2").style.color="blue";
 
 
4: 对事件作出反应
HTML事件的例子:
- 当用户点击鼠标时
- 当网页加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交HTML表单时
- 当用户触发按键时
 
如: 点击元素时候执行JS代码, nclick=Javascript
    <h1onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
    
   点击按钮时候执行JS:[使用JS向HTML中的元素分配事件]
    <script>
    document.getElementById("myBtn").onclick=function(){displayDate()};
    function displayDate()
    {
    document.getElementById("demo").innerHTML=Date();
    }
    </script>
 
参考: HTML DOM Event对象
http://www.w3school.com.cn/jsref/dom_obj_event.asp
 
5: 创建新的HTML元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
使用element.appendChild(para);
 
6:  删除已有的HTML元素
parent.removeChild(child);

 

Javascript HTML DOM

标签:lin   doc   space   font   sch   ima   html   elf   html dom   

原文地址:http://www.cnblogs.com/srialy/p/6484491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!