javascript（二）之HTMLDOM
本文共 3300 字，大约阅读时间需要 11 分钟。
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
-
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
实例
本例改变了 <img> 元素的 src 属性：
-
改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
例子 1
下面的例子会改变 <p> 元素的样式：
Hello World!
- 执行点击事件
- <button type="button" οnclick="my()">点击这里</button></body> <button type="button" οnclick="document.getElementById('demo').style.color='red'">点击这里</button></body>
- <input type="button" value="隐藏文本" οnclick="document.getElementById('demo').style.visibility='hidden'" /> <input type="button" value="显示文本" οnclick="document.getElementById('demo').style.visibility='visible'" />
//==================
1.
HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
向 button 元素分配 onclick 事件：
============
请点击该文本
2.HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
向 button 元素分配 onclick 事件：
<body> <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> <button id="myBtn">点击这里</button> <script> document.getElementById("myBtn").οnclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body>
onload某个元素加载完成时调用，
onunload 事件会在用户离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件,当改变事件状态时，常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<html> <body> <div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> <script> function mOver(obj) { obj.innerHTML="谢谢" } function mOut(obj) { obj.innerHTML="把鼠标移到上面" } </script> </body> </html>
／／===================== onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件
- onfocus文本框获得焦点时调用； ／／====创建新的html元素=================
向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> function myadd(){ var para=document.createElement("p");／／创建新的元素 var node=document.createTextNode("这是新段落。");／／穿件元素的文本节点 para.appendChild(node);／／向p元素追加这个文本节点 var element=document.getElementById("div1");／／获得div元素 element.appendChild(para);／／向div元素后追加p元素 } </script> <button type="button" οnclick="myadd()">点击这里添加一个p段落</button></body>
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
<div id="div1">
<p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> function myadd(){ var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); } function mydel(){ var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child);//或者可以写成下面的
找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");child.parentNode.removeChild(child); //====================
转载地址：http://tzmgi.baihongyu.com/
你可能感兴趣的文章
网络_HttpURLConnection_原始类
查看>>
网络_OKHttp
查看>>
android_事件分发机制_几行代码直接通晓
查看>>
图片_OOM_OutOfMemory
查看>>
技术学习_经验分享
查看>>
android中常见的设计模式有哪些？
查看>>
ViewDragHelper_v4的滑动视图帮助类_解释和代码
查看>>
即时通讯技术- 推送技术协议方案
查看>>
vitamio简介.java
查看>>
ActiveMQ 实现负载均衡+高可用部署方案
查看>>
《搜索和推荐中的深度匹配》——2.5 延伸阅读
查看>>
解读：阿里文娱搜索算法实践与思考
查看>>
基于位置的点击模型
查看>>
链表操作算法题合集
查看>>
Crackme3 破解教程
查看>>
奖学金评比系统（数据库系统设计版）
查看>>
HTTP Live Streaming直播
查看>>
rtmp+fms rtmp 视频发布环境
查看>>
最简单的基于librtmp的示例：发布（FLV通过RTMP发布）
查看>>
Windows/Linux下引用jar包，并用javac/java编译运行
查看>>