js獲取元素方法有:
1、getElementById :根據指定的 id 屬性值得到對象。返回 id 屬性值等于 sID 的第一個(gè)對象的引用。假如對應的為一組對象,則返回該組對象中的第一個(gè)。
2、getElementsByName:getElementsByName(name)該方法與 getElementById() 方法相似,但是它查詢(xún)元素的 name 屬性,而不是 id 屬性。
另外,因為一個(gè)文檔中的 name 屬性可能不唯一(如 HTML 表單中的單選按鈕通常具有相同的 name 屬性),所以getElementsByName() 方法返回的是所有匹配元素組成的數組,而不是一個(gè)元素。
3、getElementsByTagName:getElementsByTagName() 方法會(huì )使用指定的標簽名返回所有的元素(作為一個(gè)節點(diǎn)列表),這些元素是您在使用此方法時(shí)所處的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素
如果把特殊字符串 "*" 傳遞給 getElementsByTagName() 方法,它將返回文檔中所有元素的列表,元素排列的順序就是它們在文檔中的順序。
傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫(xiě)。
js獲取元素方法有:1、getElementById :根據指定的 id 屬性值得到對象。
返回 id 屬性值等于 sID 的第一個(gè)對象的引用。假如對應的為一組對象,則返回該組對象中的第一個(gè)。
2、getElementsByName:getElementsByName(name)該方法與 getElementById() 方法相似,但是它查詢(xún)元素的 name 屬性,而不是 id 屬性。另外,因為一個(gè)文檔中的 name 屬性可能不唯一(如 HTML 表單中的單選按鈕通常具有相同的 name 屬性),所以getElementsByName() 方法返回的是所有匹配元素組成的數組,而不是一個(gè)元素。
3、getElementsByTagName:getElementsByTagName() 方法會(huì )使用指定的標簽名返回所有的元素(作為一個(gè)節點(diǎn)列表),這些元素是您在使用此方法時(shí)所處的元素的后代。getElementsByTagName() 可被用于任何的 HTML 元素如果把特殊字符串 "*" 傳遞給 getElementsByTagName() 方法,它將返回文檔中所有元素的列表,元素排列的順序就是它們在文檔中的順序。
傳遞給 getElementsByTagName() 方法的字符串可以不區分大小寫(xiě)。
常用以下幾種方式:
<div id="mued" class="mued"></div>
<script>
//通過(guò)DOM標簽獲取,會(huì )選擇頁(yè)面上所有的DIV標簽
var divObj = document.getElementsByTagNames("div");
//通過(guò)ID獲取,具有唯一性
var divObjId = document.getElementsById("mued");
//通過(guò)Class獲取,會(huì )選擇頁(yè)面上所有CLASS名為mued的DOM標簽
var divObjClass = document.("mued");
//如果使用jQuery庫,相對來(lái)說(shuō)比較簡(jiǎn)單
var jDiv = $("div");
var jDivId = $("#mued");
var jDivClass = $(".mued");
</script>
getElementById()
// 通過(guò)ID來(lái)取得元素,所以只能訪(fǎng)問(wèn)設置了ID的元素,比如說(shuō)有一個(gè)DIV的ID為docid:
//
// 那么就可以用getElementById("docid")來(lái)獲得這個(gè)元素。
getElementsByName()
// 通過(guò)NAME來(lái)獲得元素,DOCUMENT中元素的NAME可以重復,如果一個(gè)文檔中有兩個(gè)以上的標// 簽NAME相同,那么getElementsByName()就可以取得這些元素組成一個(gè)數組。
// 比如有兩個(gè)DIV:
//
//
// 那么可以用getElementsByName("docname")獲得這兩個(gè)DIV,用getElementsByName("docname")[0]訪(fǎng)問(wèn)第一個(gè)DIV。getElementsByTagName()
// 通過(guò)TAGNAME(標簽名稱(chēng))來(lái)獲得元素,一個(gè)DOCUMENT中會(huì )有相同的標簽,所以這個(gè)方法也是取得一個(gè)數組。
// 可以用 getElementsByTagName("div")來(lái)訪(fǎng)問(wèn)它們,用getElementsByTagName("div")[0]訪(fǎng)問(wèn)第一個(gè) DIV,用getElementsByTagName("div")[1]訪(fǎng)問(wèn)第二個(gè)DIV。
試一下 ContentEditable 這個(gè)屬性。
看一下這個(gè) Demo:
HTML5 Demo: ContentEditable
5demos.com/contenteditable
相關(guān)代碼:
1
2
3
4
5
6
vareditable = document.getElementById('editable');addEvent(editable, 'blur', function() {
// lame that we're hooking the blur event
localStorage.setItem('contenteditable', this.innerHTML);
document.designMode = 'off';});addEvent(editable, 'focus', function () {
document.designMode = 'on';});if (localStorage.getItem('contenteditable')) {
editable.innerHTML = localStorage.getItem('contenteditable');}
不過(guò),建議用JQuery比較好,而且簡(jiǎn)單,Jquery有個(gè)屬性,直接可以獲取當前元素的所有子元素
改成w=w.offsetWidth;
js獲取Html元素的實(shí)際寬度高度
第一種情況就是寬高都寫(xiě)在樣式表里,就比如#div1{width:120px;}。這中情況通過(guò)#div1.style.width拿不到寬度,而通過(guò)#div1.offsetWidth才可以獲取到寬度。
第二種情況就是寬和高是寫(xiě)在行內中,比如style="width:120px;",這中情況通過(guò)上述2個(gè)方法都能拿到寬度。
小結,因為id.offsetWidth和id.offsetHeight無(wú)視樣式寫(xiě)在樣式表還是行內,所以我們獲取元素寬和高的時(shí)候最好用這2個(gè)屬性。注意如果不是寫(xiě)在行內style中的屬性都不能通過(guò)id.style.atrr來(lái)獲取。
現在的前端制作很少直接把樣式寫(xiě)style里了,都是寫(xiě)在樣式表里。如果你要獲取的樣式?jīng)]有相對應的(就像#div1.style.width對 應#div1.offsetWidth),就只能分別針對不用瀏覽器來(lái)獲取樣式表的屬性了,可以試著(zhù)搜索“JS 獲取樣式屬性”之類(lèi)的。
getElementById() // 通過(guò)ID來(lái)取得元素,所以只能訪(fǎng)問(wèn)設置了ID的元素,比如說(shuō)有一個(gè)DIV的ID為docid:// // 那么就可以用getElementById("docid")來(lái)獲得這個(gè)元素。
getElementsByName()// 通過(guò)NAME來(lái)獲得元素,DOCUMENT中元素的NAME可以重復,如果一個(gè)文檔中有兩個(gè)以上的標// 簽NAME相同,那么getElementsByName()就可以取得這些元素組成一個(gè)數組。// 比如有兩個(gè)DIV:// // // 那么可以用getElementsByName("docname")獲得這兩個(gè)DIV,用getElementsByName("docname")[0]訪(fǎng)問(wèn)第一個(gè)DIV。
getElementsByTagName()// 通過(guò)TAGNAME(標簽名稱(chēng))來(lái)獲得元素,一個(gè)DOCUMENT中會(huì )有相同的標簽,所以這個(gè)方法也是取得一個(gè)數組。// 可以用 getElementsByTagName("div")來(lái)訪(fǎng)問(wèn)它們,用getElementsByTagName("div")[0]訪(fǎng)問(wèn)第一個(gè) DIV,用getElementsByTagName("div")[1]訪(fǎng)問(wèn)第二個(gè)DIV。
聲明:本網(wǎng)站尊重并保護知識產(chǎn)權,根據《信息網(wǎng)絡(luò )傳播權保護條例》,如果我們轉載的作品侵犯了您的權利,請在一個(gè)月內通知我們,我們會(huì )及時(shí)刪除。
蜀ICP備2020033479號-4 Copyright ? 2016 學(xué)習?shū)B(niǎo). 頁(yè)面生成時(shí)間:2.563秒