(4)document:getElementById、getElementByName、getNodeByTagName

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>      
posted @ 2017-08-06 00:37  测试开发分享站  阅读(158)  评论(0编辑  收藏  举报