zoukankan      html  css  js  c++  java
  • etElementByID getElementsByName getElementsByTagName的区别和总结

    WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签:

    1、getElementById()
    getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
    比如说有一个DIV的ID为docid:
    <div id="docid"></div>
    那么就可以用getElementById("docid")来获得这个元素。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>ById</title>
    <style type="text/css">
    <!--
    #docid{
    height:400px;
    400px;
    background-color:#999;}
    -->
    </style>
    </head>
    <body><div id="docid" name="docname" onClick="bgcolor()"></div>
    </body>
    </html>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function bgcolor(){
    document.getElementById("docid").style.backgroundColor="#000"
    }
    -->
    </script>
    、getElementsByName()
    这个是通过NAME来获得元素,但不知大家注意没有,这个是GET ELEMENTS,复数ELEMENTS代表获得的不是一个元素,为什么呢?
    因为DOCUMENT中每一个元素的ID是唯一的,但NAME却可以重复。打个比喻就像人的身份证号是唯一的(理论上,虽然现实中有重复),但名字

    重复的却很多。如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。

    比如有两个DIV:
    <div name="docname" id="docid1"></div>
    <div name="docname" id="docid2"></div>
    那么可以用getElementsByName("docname")获得这两个DIV,用getElementsByName("docname")[0]访问第一个DIV,用getElementsByName


    3、getElementsByTagName()
    这个呢就是通过TAGNAME(标签名称)来获得元素,一个DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组。
    下面这个例子有两个DIV,可以用getElementsByTagName("div")来访问它们,用getElementsByTagName("div")[0]访问第一个DIV,用

    getElementsByTagName("div")[1]访问第二个DIV。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Byname,tag</title>
    <style type="text/css">
    <!--
    #docid1,#docid2{
    margin:10px;
    height:400px;
    400px;
    background-color:#999;}
    -->
    </style>
    </head>
    <body>
    <div name="docname" id="docid1" onClick="bgcolor()"></div>
    <div name="docname" id="docid2" onClick="bgcolor()"></div>
    </body>
    </html>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function bgcolor(){
    var docnObj=document.getElementsByTagName("div");
    docnObj[0].style.backgroundColor = "black";
    docnObj[1].style.backgroundColor = "black";
    }
    -->
    </script>
    总结一下标准DOM,访问某一特定元素尽量用标准的getElementById(),访问标签用标准的getElementByTagName(),但IE不支持

    getElementsByName(),所以就要避免使用getElementsByName(),但getElementsByName()和不符合标准的document.all[]也不是全无是处,它

    们有自己的方便之处,用不用那就看网站的用户使用什么浏览器,由你自己决定了。

      Javascript中的getElementById十分常用,但在标准的页面中,一个id只能出现一次,如果我想同时控制多个元素,例如点一个链接, 让多个层隐藏,该怎么做?用class,当然,同一个class是可以允许在页面中重复出现的,那么有没有getElementByClass呢?没有, 但是可以解决:

    //Create an array 
    var allPageTags = new Array();

    function hideDivWithClasses(theClass) {
    //Populate the array with all the page tags
    var allPageTags=document.getElementsByTagName("div");
    //Cycle through the tags using a for loop
    for (i=0; i//Pick out the tags with our class name
    if (allPageTags[i].className==theClass) {
    //Manipulate this in whatever way you want
    allPageTags[i].style.display='none';
    }
    }
    }
     

    1,grid.getCell(i,3).innerHTML;curobj.nextSibling.innerHTML

        innerHTML InnerHtml 属性不自动对进出 HTML 实体的特殊字符进行编码。HTML 实体允许显示特殊字符(如 < 字符),浏览器通常会将这些字符解释为具有特殊含义。< 字符会被解释为标志的开头,并且不会在页面上显示。若要显示 < 字符,将需要使用实体 &lt;。

    例如,如果 InnerHtml 属性设置为 "<b> Hello </b>",则 < 和 > 字符不会分别转换为 &lt; 和 &gt;。呈现的输出仍将是:<b> Hello </b>。浏览器将检测 <b> 标记并用粗体显示“Hello”文本。

    警告   由于未对此文本进行 HTML 编码,因此可以在文本的 HTML 标记内嵌入脚本。如果该属性是使用用户输入动态设置的,请务必验证它的值以减少安全漏洞。
    若要提供自动 HTML 编码和解码,请使用 InnerText 属性。

    以上是微软的一个网站上介绍的,而我只是简单的认为取出来的是html格式。


    2,typeName = temp.options[temp.selectedIndex].innerText;document.all("B1").innerText="关闭";name==name_other.options[i].innerText;opn.innerText=nameArray[i];

    使用 InnerText 属性以编程方式修改 HTML 服务器控件的开始和结束标记之间的内容。

    与 InnerHtml 属性不同,InnerText 属性自动对进出 HTML 实体的特殊字符进行编码。HTML 实体允许显示特殊字符(如 < 字符),浏览器通常会将这些字符解释为具有特殊含义。< 字符会被解释为标志的开头,并且不会在页面上显示。若要显示 < 字符,将需要使用实体 &lt;。

    例如,如果 InnerText 属性设置为 "<b> Hello </b>",则 < 和 > 符号分别转换为 &lt; 和 &gt;。呈现的输出将是:&lt; b &gt; Hello &lt;/b &gt;。&lt; 和 &gt; 实体将向浏览器指示这些字符将显示在页上。浏览器将不检测 <b> 标记并用粗体显示该文本。显示在页上的文本是:<b> Hello </b>。
     

     =======================================================================
    用js读出xml中的项中。项中。。项中。的子内容

     <SCRIPT LANGUAGE="JavaScript">
     <!--
      xmlDoc=loadXMLDoc("http://www.cnblogs.com/winner/Rss.aspx"); //调用下面的loadxml
     //var x=xmlDoc.getElementsByTagName('title'); //得到一共有多少个title对象
      var x=xmlDoc.getElementsByTagName('item'); 
     // var x=b.getElementsByTagName('title');
      for (i=0;i<x.length;i++)
      {
      //document.write(x[i].childNodes[1].nodeValue) //不知道元素,则用 xmldoc.getElementsByTagName("item")[i].chileNodes[0].nodeValue表示第一项的值
      document.write(x[i].getElementsByTagName("title").item(0).text);   //心得"如果知道title指定元素则用他"
      document.write("<br />")
      }

     

      function loadXMLDoc(dname) 
    {
    var xmlDoc;
    // code for IE
    if (window.ActiveXObject)
    {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    }
    // code for Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument)
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
    else
    {
    alert('Your browser cannot handle this script');
    }
    xmlDoc.async=false;
    xmlDoc.load(dname);
    return(xmlDoc);
    }
      //-->
     </SCRIPT>


    =================================================
    xml+js实例

    The XML file“note.xml“<?xml version="1.0" encoding="ISO8859-1" ?>
    <note>
      <to>Tove</to>
      <from>Jani</from>
      <heading>Reminder</heading>
      <body>Don't forget me this weekend!</body>
    </note>

    以下三组脚本分别反映了不同的方法(容易理解)
    <script language="VBScript" type="text/VBScript">
    set xmlDoc=CreateObject("Microsoft.XMLDOM")
    xmlDoc.async="false"
    xmlDoc.load("note.xml")

    for each x in xmlDoc.documentElement.childNodes
      document.write(x.nodename)
      document.write(": ")
      document.write(x.text)
      document.write("<br>")
    next
    </script>
     

    <script language="JavaScript"
    for="window" event="onload">
    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
    xmlDoc.async="false"
    xmlDoc.load("note.xml")
    nodes = xmlDoc.documentElement.childNodes
    to.innerText = nodes.item(0).text
    from.innerText = nodes.item(1).text
    header.innerText = nodes.item(2).text
    body.innerText = nodes.item(3).text
    </script>
    <title>HTML using XML data</title>
    </head>
    <h1>Refsnes Data Internal Note</h1>
    <b>To: </b><span id="to"></span>
    <br>
    <b>From: </b><span id="from"></span>
    <hr>
    <b><span id="header"></span></b>
    <hr>
    <span id="body"></span>
     

    <script language="JavaScript">
    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
    xmlDoc.async="false"
    xmlDoc.load("note.xml")
    document.write("The From element contains: ")
    document.write(xmlDoc.getElementsByTagName"from").item(0).text)
    </script>

  • 相关阅读:
    Saltstack module gem 详解
    Saltstack module freezer 详解
    Saltstack module firewalld 详解
    Saltstack module file 详解
    Saltstack module event 详解
    Saltstack module etcd 详解
    Saltstack module environ 详解
    Saltstack module drbd 详解
    Saltstack module dnsutil 详解
    获取主页_剥离百度
  • 原文地址:https://www.cnblogs.com/wangguowen27/p/2605785.html
Copyright © 2011-2022 走看看