要用js操作一个html元素必须获取到这个元素,而获取元素要用 getElementById() 方法,这个方法是通过元素的Id获取到元素这个对象。getElementById 字符比较多,写得比较长,所以现在常常又用$()来获取html元素对象,这又是怎么回事?
其实$()本质还是通过getElementById()方法获取到html元素对象,只不过把这个获取方法定义为简单的$,这样书写简短快捷方便。取到元素 id 后,可通过它取元素的值和文本;还能用它判断元素是否存在。除一次获取一个元素 id 外,还能一次动态获取多个 id。
一、js获取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 代码:
Javascript 代码:
function AddProduct() {
var proName = document.getElementById("inProName");
alert(proName.value);
}
提示:这里的 Javascript 代码可以放到 Html 代码前,因为加载网页时不执行 Javascript 代码,单击按钮时才执行。
四、js 通过元素 Id 获取其文本假如要分别取 div 和 span 的文本,它们的代码分别如下:
Html 代码:
javascript 通过 span 的 id 获取它的文本 span>
Javascript 代码:
var $ = function (objId) { return ("string" == typeof (objId)) ? document.getElementById(objId) : objId; };
var divObj = $("divId");
var spanObj = $("spanId");
alert(divObj.innerHTML + ";" + spanObj.innerHTML);
五、js 判断 html 元素是否存在若要判断 id 为 imgId 的元素是否存在,代码可以这样写:
if (document.getElementById("imgId" ) != undefined)
alert( "存在");
else
alert("不存在"
);
undefined 也可以用 null 代替,即 if(document.getElementById("imgId") != null)。
六、js 动态添加和获取 id1、js 动态添加 id
假如要在一个 div 中动态添加 10 个 div,Html 和 Javascript 代码分别如下:
Html 代码:
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");
2、js 动态获取 id
以获取以上动态生成的 10 个 div 的 id 为例,Javascript 代码如下:
function getIdDynamically() {
var divObj;
for (i = 0; i < 10; i++) {
divObj = document.getElementById("divId" + i);
document.write(divObj.innerHTML); //显示每个 div 的文本
}
}
getIdDynamically();