当网页加载时,浏览器会创建页面的文档对象模型(DOM)。通过DOM,Js可以对HTML实现以下 *** 作:
改变页面中的所有HTML元素。 改变页面中的所有HTML属性。 改变页面中的所有CSS样式。 对页面中的所有事件作出反应。DOM HTML 获得HTML属性的三种方式
通过ID查找HTML元素
<script> x=document.getElementByID("intro"); document.write("<p>文本来自 ID 为 intro 段落: " + x.INNERHTML + "</p>"); </script>
通过标签名找到元素
<script> //查找ID为main的元素 var x=document.getElementByID("main"); //查找该元素中所有<p>元素,返回的为一个数组 var y=x.getElementsByTagname("p"); document.write('ID="main"元素中的第一个段落为:' + y[0].INNERHTML); </script>
通过类名查找元素
<script> x=document.getElementsByClassname("intro"); document.write("<p>文本来自 class 为 intro 段落: " + x[0].INNERHTML + "</p>"); </script>
使用document.write()可用于直接向HTML输出流写内容
<!DOCTYPE HTML> <HTML> <body> <script> document.write(Date()); </script> </body> </HTML>
<script>document.getElementByID("p1").INNERHTML="新文本!";</script>改变HTML属性
改变HTML属性可以套用以下模板
document.getElementByID(ID).attribute=新属性值
使用实例如下
<script> //改变img的src属性 document.getElementByID("image").src="landscape.jpg"; </script>
改变HTML样式可以使用以下语法
document.getElementByID(ID).style.property=新样式
使用实例
<script> document.getElementByID("p2").style.color="blue"; document.getElementByID("p2").style.FontFamily="Arial"; document.getElementByID("p2").style.FontSize="larger"; </script>
当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交HTML表单时 当用户触发按键时 ... ..HTML事件属性
如需监听HTML元素的事件,可以使用事件属性进行分配
//监听button元素的onClick事件 <button onclick="displayDate()">点这里</button>
HTML DOM允许使用Js来向HTML元素分配事件
<script> //向button元素分配onClick事件 //并将displayDate函数分配给ID=“myBtn”的HTML元素 document.getElementByID("myBtn").onclick=function(){displayDate()}; </script>
onload和onunload会在用户进入或离开页面时被触发,可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。也可用于处理cookie
// <body onload="checkcookies()">
onchange事件常结合对输入字段的验证来使用
```
//当用户改变输入字段的内容时,调用upperCase()函数
####onmouSEOver和onmouSEOut事件- onmouSEOver和onmouSEOut事件可用于在用户的鼠标移至HTML元素上方或移出元素时出发函数 ```<div onmouSEOver="mOver(this)" onmouSEOut="mOut(this)" >Mouse Over Me</div><script>function mOver(obj){ obj.INNERHTML="Thank You"}function mOut(obj){ obj.INNERHTML="Mouse Over Me"}</script> ```####onmouseDown、onmouseup、以及onclick事件- 这三个事件构成了鼠标点击事件的所有部分、当点击鼠标按钮时,会出发onmousedown事件,当释放鼠标时会触发onmouseup事件,最后,当完成鼠标点击时,会触发onclick事件。##DOM EventListener###addEventListener()方法#### 用处 1. 用于向元素添加事件监听 2. 一个元素可以添加多个监听事件 3. 可以向同个元素添加多个同类型的监听事件,比如:两个onclick事件。 4. 可以向任何DOM对象添加事件监听,不仅仅是HTML元素,比如:window对象。 5. 可以更简单的控制事件(冒泡与捕获) 6. 使用addEventListener()方法时,JavaScript从HTML标记中分离开来,可读性更强,在没有控制HTML标记时也可以添加事件监听。 7. 可以使用removeEventListener()方法来移除事件的监听。#### 语法
//第一个参数是事件类型(如click或mousedown)//第二个参数是事件触发后调用的函数//第三个参数是布尔值,用于描述事件是冒泡还是捕获。该参数是可选的,默认为false,冒泡传递element.addEventListener(event, function, useCapture);
```
实例
//当用户点击按钮时触发监听事件 document.getElementByID("myBtn").addEventListener("click",displayDate);
实例1: 当用户点击元素时d出“hello world”
element.addEventListener("click",function(){ alert("Hello World!"); });
实例2: 使用函数名,来引用外部函数
//当用户点击元素时d出helloworld element.addEventListener("click",myFunction); function myFunction() { alert ("Hello World!"); }
element.addEventListener("click",myFunction); element.addEventListener("click",mySecondFunction);
element.addEventListener("mouSEOver",mySecondFunction); element.addEventListener("mouSEOut",myThirdFunction);
//当用户重置窗口大小时添加事件监听 window.addEventListener("resize",function(){ document.getElementByID("demo").INNERHTML = sometext; });
element.addEventListener("click",function(){ myFunction(p1,p2); });
element.removeEventListener("mousemove",myFunction);
原文:大专栏 DOM(文档对象模型)
总结以上是内存溢出为你收集整理的DOM(文档对象模型)全部内容,希望文章能够帮你解决DOM(文档对象模型)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)