js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id

要用js操作一个html元素必须获取到这个元素，而获取元素要用 getElementById() 方法，这个方法是通过元素的Id获取到元素这个对象。getElementById 字符比较多，写得比较长，所以现在常常又用$()来获取html元素对象，这又是怎么回事？

其实$()本质还是通过getElementById()方法获取到html元素对象，只不过把这个获取方法定义为简单的$，这样书写简短快捷方便。取到元素 id 后，可通过它取元素的值和文本；还能用它判断元素是否存在。除一次获取一个元素 id 外，还能一次动态获取多个 id。

一、js获取Id的方法getElementById的使用方法

假如有 div 元素如下：

<div id="divId">用javascript获取Id的方法getElementById()的使用方法</div>

var obj = document.getElementById("divId");

以上是通过div的id号divId获取div这个对象，然后就可以对div进行各种操作了，如删除其内容，设置其属性，将其隐藏等等。

值得注意的是：div 必须先于 javascript 代码加载，也就是 div 要放在 var obj = document.getElementById("divId") 的前面，否则因找不到对象而报错。

二、js通过$获取html元素的Id

首先需要定义$：

var $ = function (objId) { return ("string" == typeof (objId)) ? document.getElementById(objId) : objId; };

其实是把 $ 定义为一个函数（方法），在这个函数中仍然是通过 getElementById 方法获取元素的这个对象；也就是 $ 本身并不具备获取元素对象的功能，它只是一个字符，不过是把它定义为了一个获取元素对象的方法。

获取上述的div元素通过$表示为：

var obj = $("divId");

用getElementById方法获取要写一长串字母，现在只需写一个字符，是不是方便快捷很多，尤其要获取很多元素对象的时候，优势更明显。

三、js 通过元素 Id 获取其值

假如要添加产品，这里以添加产品名称为例。首先要写 html 代码，然后再写 Javascript 代码，它们分别如下：

Html 代码：

<form id="form1">
      产品名称：<input id="inProName" type="text" />
      <input type="button" id="btnSubmit" value=" 提 交 " onclick ="return AddProduct()" />
    </form>

Javascript 代码:

<script type="text/javascript" language="javascript">
    function AddProduct() {
        var proName = document.getElementById("inProName");
        alert(proName.value);
    }
  </script>

提示：这里的 Javascript 代码可以放到 Html 代码前，因为加载网页时不执行 Javascript 代码，单击按钮时才执行。

四、js 通过元素 Id 获取其文本

假如要分别取 div 和 span 的文本，它们的代码分别如下：

Html 代码：

<id div="divId">javascript 通过 div 的 id 获取其文本</div>

<span id="spanId">javascript 通过 span 的 id 获取它的文本</ span>

Javascript 代码:

<script type="text/javascript" language="javascript">
    var $ = function (objId) { return ("string" == typeof (objId)) ? document.getElementById(objId) : objId; };
    var divObj = $("divId");
    var spanObj = $("spanId");
    alert(divObj.innerHTML + "；" + spanObj.innerHTML);
</script>

五、js 判断 html 元素是否存在

若要判断 id 为 imgId 的元素是否存在，代码可以这样写：

if (document.getElementById("imgId" ) != undefined)
        alert( "存在");
    else
        alert("不存在" );

undefined 也可以用 null 代替，即 if(document.getElementById("imgId") != null)。

六、js 动态添加和获取 id

1、js 动态添加 id

假如要在一个 div 中动态添加 10 个 div，Html 和 Javascript 代码分别如下：

Html 代码：

<id div="parentDiv"></div>

Javascript 代码:

<script type="text/javascript" language="javascript">
        function addIdDynamically(obj) {
            var parent = document.getElementById(obj);
            var parent;

            for (i = 0; i < 10; i++) {
               divObj = document.createElement("div");
               divObj.setAttribute("id", "divId" + i); //给新 div 设置 id
                divObj.innerHTML = "div" + i; //给新 div 添加文本
                parent.appendChild(divObj);
            }
        }
        addIdDynamically("parentDiv");
</script>

2、js 动态获取 id

以获取以上动态生成的 10 个 div 的 id 为例，Javascript 代码如下：

<script type="text/javascript" language="javascript">
        function getIdDynamically() {
            var divObj;

            for (i = 0; i < 10; i++) {
               divObj = document.getElementById("divId" + i);
                document.write(divObj.innerHTML); //显示每个 div 的文本
            }
        }
        getIdDynamically();
</script>