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