document对象：该对象将标记型文档进行封装。 该对象的作用：是对可以标记型文档进行操作 最常见的操作是：想要实现动态效果，需要对节点操作，那么要先获取到这个节点操作，那么要先获取到这个节点。 所以document对象最常见的操作就是获取页面中的节点 获取节点的方法体现： 1）getElementById:通过标签的id属性值获取该标签节点，返回该标签节点 2）getElementByName:通过标签的name属性获取节点，因为name有相同。所以返回一个数组 只要带s的都是返回数组 3)getElementByTagName:通过标签名获取节点，因为标签名有重复，所以返回一个数组 常见节点有三种，标签型节点：类型1、属性节点：类型2、文本节点类型3 标签型节点没有值，属性和文本节点可以有值 一、getElementById
<body> <script type="text/javascript"> function getNodeDemo() { var divNode=document.getElementById("divid");//返回的是对象 //节点有三个必备的属性：节点名称、节点类型、节点值 // alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue); var text=divNode.innerHTML;//获取文本，这是一个div区域 // alert(text); divNode.innerHTML="文本被我改了"; } </script> <input type="button" value="演示document对象获取节点" onclick="getNodeDemo()"/> <div id="divid">这是一个div区域</div> </body>二、getElementByName:具有这个有超链接和表单中的组件
function getNodeDemo2() { var node=document.getElementsByName("user"); // alert(node[0].nodeName);//获取了input对象节点名称 //alert(node[0].type);//已经获取了对象，所以可以通过.的方式，获取其中的属性 // alert(node[0].value);//获取值 //若确定就一个元素，可以这样写 var userNode=document.getElementsByName("user")[0]; alert(userNoder.value); } <input type="text" name="user" value="wo"/>三、getNodeByTagName()
function getNodeDemo3() { var nodes=document.getElementsByTagName("a"); // alert(nodes.length);//2 // alert(nodes[0].innerHTML); for(var x=0;x<nodes.length;x++) { // alert(nodes[x].innerHTML); nodes[x].target="_blank";//让每个超链接在新的网页打开 } } <a href="http://www.sina.com.cn">新浪网站11</a> <a href="http://www.sina.com.cn">新浪网站22</a> <a href="http://www.SOHU.com.cn">搜狐网站33</a>只想获取一部分的超链接
function getNodeDemo4() { //需求：将页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面中打开 /* 要获取其中被操作的对象，可以通过document获取超链接，拿到页面中所有的超链接 只想拿到一部分的超链接，只要获取备操作的超链接所属的节点即可 再通过这个节点获取到它里面的所有超链接节点 */ //获取超链接所属的div节点 var divNode=document.getElementById("newslink"); //通过对div对象方法的查找，此对象也包含getElemetsByTagName方法 //所有容器型标签都具备这个方法，在该标签范围内获取指定名称的标签 var aNodes=divNode.getElementsByTagName("a"); for(var x=0;x<aNodes.length;x++) { //alert(aNodes[x].innerHTML); aNodes[x].target="_blank"; } <div id="newslink"> <a href="http://www.163.com.cn">新闻网站11</a> <a href="http://www.baidu.com.cn">新闻网站22</a> <a href="http://www.164.com.cn">新闻网站33</a> <a href="http://www.165.com.cn">新闻网站44</a> </div>