JavaScript網頁腳本語言可以很高效的操作網頁的各個元素節點,并賦予給它們相對應的操作,使我們的前端網頁更的的智能化,更加的有利于訪客的體驗。

JavaScript中幾個操作元素對象的函數

下面自已記錄幾個常用的操作元素的方法,以便自己以后查找時使用。

getElementById(id)方法

国产视频appJavaScript中的getElementById中的方法,將返回一個與它有著相同ID屬性元素節點的對應對象。這里值得注意的是getElementById寫法一定要注意大小寫,否則會出錯。

getElementById()是document對象的特有函數,它只有一個參數值:如果你想獲得某個ID屬性元素的值,那么它的寫法如下

類似語法:

document.getElementById(ID)

例子:

如果想獲取關于元素ID屬性為“mochu”的元素對象

document.getElementById("mochu");

getElementsByTagName(tag)方法

getElementsByTagName()方法返回一個對象數組,這個對象數組中的每一個對象對應著文檔里有著給定標簽的一個元素。

類似語法:

document.getElementsByTagName(tag)

例子:

国产视频app如果想獲取對象中所有的"li"標簽

document.getElementsByTagName("li"):

国产视频app這個調用將返回一個對象數組,數組中的每一個對象分別對應里document文檔中的一個列表元素(li標簽)。關于這個對象數組的操作方法和其它數組一樣,要以使用數組的"length"屬性。

代碼如下:

for(var i=0;i < document.getElementsByTagName("li").length;i++)}
//這里是操作方法
alert(typeof document.getElementsByTagName("li")[i]);
}

我們也可以把上面的代碼簡化一下

var mochu = document.getElementsTagName("li");
for(var i=0;i<mochu.length;i++){
alert(typeof mochu[i]);
}

国产视频app我們也可以結合getElementById()方法來操作某個ID屬性下的元素對象。

示例代碼:

var mochuid = document.getElementById("mochuid"); //獲取ID屬性為“mochuid”的元素
var mochuli = mochuid.getElementsByTagName("li") //獲取mochuid元素中所有的"li"標簽
for(var i=0;i<mochuli.length;i++){
alert(typeof mochu[i]);
}

getElementsByClassName(class)方法

getElementsByClassName()是HTML5中新增的方法,在一些老式的瀏覽器中不支持此方法,所有使用時要注意!

getElementsByClassName()和上面的二個函數方法一樣,結合document(文檔對象)使用。

類似語法:

document.getElementsByClassName(class)

例子:
如果想獲取document(文檔)中class類名為“mochu”的元素

document.getElementsByClassName("mochu");

如果想獲取document(文檔)中同時含有兩個class類名為“mochu feiniaomy”的元素

document.getElementsByClassName("mochu feiniaomy");

注意:如果查找同時含有兩個class類名的元素,兩個類名要以空格分開,并無順序的區別

示例代碼:

国产视频app我們可以結合上面的二個函數方法來使用此函數,但是注意的是老式瀏覽器并不支持此函數

var mochuid = document.getElementById("mochuid"); //獲取ID屬性為“mochuid”的元素
var mochuli = mochuid.getElementsByTagName("li") //獲取mochuid元素中所有的"li"標簽
var mochuclass = mochuli.getElementsByClassName("mochuclass"); //獲取含有class類為“mochuclass”的li標簽
for(var i=0;i < mochuclass.length; i++){
alert(mochuclass[i]);
}

国产视频app上面示例代碼的第二行,第三行:

var mochuli = mochuid.getElementsByTagName("li") //獲取mochuid元素中所有的"li"標簽
var mochuclass = mochuli.getElementsByClassName("mochuclass"); //獲取含有class類為“mochuclass”的li標簽

簡寫為:

var mochuclass = mochuid.getElementsByClassName("mochuclass");

以上的三個函數方法分別通過元素的ID,元素的標簽,元素的類名來獲取元素的節點,并且這三個函數可以結合使用,可以更加方法的查找所需要的元素節點。

以上內容均來自博主的自學筆記,如果有什么錯誤的地方請留言給我,讓我們一起進步。