学习内容:
1.document对象
2.event对象
该对象将标记型文档进行封装
该对象的作用,是对可标记型文档进行操作
常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节点,就必须先获取节点所属的文档对象document
获取节点的方法体现:
getElementById();提高标签的id属性值获取该标签节点,返回该标签节点
getElementsByName();通过标签的name属性获取节点,返回的是一个数组/容器
getElementsTagName();通过标签名获取节点,因为标签名会有重复,所以返回一个数组
在操作文档时为了获取某一个特定的元素,getelementById方法是最好的选择...
<html> <head> <script type="text/javascript"> function getValue() { var x=document.getElementById("myHeader") alert(x.innerHTML)//修改h1所显示的标题... } </script> </head> <body> <h1 id="myHeader" onclick="getValue()">This is a header</h1> <p>Click on the header to alert its value</p> </body> </html>
当我们在执行多次的getelementById方法时,我们可以定义一个方法,使其返回getelementById方法,这样可以避免
在每次调用的时候,都书写其方法,解决了代码冗余...
function id(x) { if (typeof x == "string") return document.getElementById(x); return x; }
getElementByName()与getelementById方法相似,但是他查询的是name,而不是id属性...
<html> <head> <script type="text/javascript"> function getElements() { var x=document.getElementsByName("myInput"); alert(x.length); } </script> </head> <body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="名为 ‘myInput‘ 的元素有多少个?" /> </body> </html>
getElementsByTagName() 返回一个指定标签的集合...
<html> <head> <script type="text/javascript"> function getElements() { var x=document.getElementsByTagName("input"); alert(x.length); } </script> </head> <body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="How many input elements?" /> </body> </html>
可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表。例如,下面的代码可获取文档中所有的表:
var tables = document.getElementsByTagName("table"); alert ("This document contains " + tables.length + " tables");
也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
<script type="text/javascript"> function getNodeByTagNameDemo2(){ var divNode = document.getElementById("newlink"); var nodes = divNode.getElementsByTagName("a");//nodes成为了一个数组,存放着多个a属性... for(var i = 0;i<nodes.length;i++){ nodes[i].target="_blank"; } } </script> <input type="button" value="document对象获取节点" onclick="getNodeByTagNameDemo2()"/> <a href="http://www.baidu.com">百度1</a> <a href="http://www.baidu.com">百度2</a> <div id="newlink"> <a href="http://www.163.com">1631</a> <a href="http://www.163.com">1632</a> <a href="http://www.163.com">1633</a> </div>
2.event对象..
事件绑定:
第一种方式
<html> <head> <script type="text/javascript"> function text(){ window.alert("hello"); } </script> </head> <body> <input type="button" value="直接绑定方式" onclick="test()"/> </body> </html>
第二种方式:
通过getelementById方法获取元素后再监听绑定
<html> <head> <script language=”javascript” Function test() { Document.write("hello"); } </script> </head> <body> <input type=”button” id=”ID名称” value=”刷新界面”/> <script> Document.getElementById(“ID名称”).onClick=test;//只能绑定在这,绑定在前面会报错。。。 </script> </body> </html>
时间: 2024-10-29 05:04:53