您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何掌握javascript的基礎(chǔ)交互”,在日常操作中,相信很多人在如何掌握javascript的基礎(chǔ)交互問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”如何掌握javascript的基礎(chǔ)交互”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
只要在文檔中符合都會(huì)獲取到
基本語法:document.getElementById(id值);
document:文檔,表示獲取的范圍
get:獲取 Element:元素 By:通過..
返回的是元素對(duì)象
返回值:獲取到了返回具體的元素,獲取不到返回null
用過id獲取只能在document下獲取,不能自定義獲取范圍
var box = document.getElementById("box1"); console.log(box);//<div id="box1">我是DIV</div> var box = document.getElementById("box2"); console.log(box); //null var myH2 = document.getElementById("my-h3"); console.log(myH2);
基本語法:document.getElementsByClassName(類名值);
document:文檔,表示獲取的范圍
get:獲取 Elements:元素(復(fù)數(shù)) By:通過..
得到的元素對(duì)象是動(dòng)態(tài)的偽數(shù)組
可以通過遍歷的形式打印出來
返回值:獲取到了:返回一個(gè)元素集合 HTMLCollection,這個(gè)集合由索引和值組成,0對(duì)應(yīng)第一項(xiàng),1對(duì)應(yīng)第二項(xiàng)依次類推,天生自帶length屬性,最后一項(xiàng)的索引是集合.length -1; 獲取不到 返回一個(gè)空集合 長(zhǎng)度是0
length屬性 集合的長(zhǎng)度 或 集合中元素的個(gè)數(shù)
集合.length;
獲取集合中具體元素
集合[索引]
var tests = document.getElementsByClassName("test"); console.log(tests); console.log(tests.length); //獲取長(zhǎng)度 // 直接輸出到控制臺(tái) console.log(tests[0]); console.log(tests[1]); console.log(tests[tests.length - 1]); // 存儲(chǔ)起來 var oDiv = tests[0]; var oH2 = tests[1]; console.log(oDiv, oH2); var test1 = document.getElementsByClassName("test1"); console.log(test1, test1.length); console.log(test1[0]); console.log(test1[1]); //沒有這個(gè)小標(biāo)或索引 相當(dāng)于集合中這個(gè)位置還沒有初始化,或未定義 返回undefined var hello = document.getElementsByClassName("hello"); console.log(hello, hello.length); console.log(hello[0]); //undefined
基本語法:document.getElementsByTagName(標(biāo)簽名);
document:文檔,表示獲取的范圍
get:獲取 Elements:元素(復(fù)數(shù)) By:通過..
返回值:獲取到了:返回一個(gè)元素集合 HTMLCollection,這個(gè)集合由索引和值組成,0對(duì)應(yīng)第一項(xiàng),1對(duì)應(yīng)第二項(xiàng)依次類推,天生自帶length屬性,最后一項(xiàng)的索引是集合.length -1; 獲取不到 返回一個(gè)空集合 長(zhǎng)度是0
length屬性 集合的長(zhǎng)度 或 集合中元素的個(gè)數(shù)
集合.length;
獲取集合中具體元素
集合[索引]
var oLis = document.getElementsByTagName("li"); console.log(oLis); // 獲取長(zhǎng)度 console.log(oLis.length); // 獲取具體的元素 console.log(oLis[0]); console.log(oLis[1]); console.log(oLis[2]); console.log(oLis[oLis.length - 1]);
父級(jí)元素:必須是具體的元素
父級(jí)元素.getElementsByClassName(類名值);
父級(jí)元素.getElementsByTagName(標(biāo)簽名);
// 獲取ol下的li // 獲取父級(jí)元素 var wrap = document.getElementById("wrap"); console.log(wrap); // var oLis = wrap.getElementsByClassName("test"); var oLis = wrap.getElementsByTagName("li"); console.log(oLis); console.log(oLis.length); console.log(oLis[0]); console.log(oLis[1]); console.log(oLis[oLis.length - 1]); // 獲取ul下的li // 獲取父級(jí) var wrap1 = document.getElementsByClassName("wrap"); console.log(wrap1); console.log(wrap1[0]); console.log(wrap1[1]); // var ullis = wrap1[1].getElementsByClassName("test"); var ullis = wrap1[1].getElementsByTagName("li"); console.log(ullis); console.log(ullis.length); console.log(ullis[0]); console.log(ullis[1]); console.log(ullis[ullis.length - 1]);
綁定事件也要是具體的元素,不能夠直接去操作集合
onclick 單擊事件
ondblclick 雙擊事件
onmousedown 鼠標(biāo)按下
onmouseup 鼠標(biāo)抬起
onmousemove 鼠標(biāo)移動(dòng)
oncontextmenu 鼠標(biāo)右擊
onmouseover 鼠標(biāo)移入
onmouseout 鼠標(biāo)移出
onmouseenter 鼠標(biāo)進(jìn)入
onmouseleave 鼠標(biāo)離開
<div id="box"></div> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var box = document.getElementById("box"); console.log(box); var myUl = document.getElementById("myUl") console.log(myUl); var oLis = myUl.getElementsByTagName("li"); console.log(oLis); // - onclick 單擊事件 box.onclick = function() { console.log("單擊"); } // - ondblclick 雙擊事件 oLis[0].ondblclick = function() { console.log("雙擊事件"); } // - onmousedown 鼠標(biāo)按下 oLis[1].onmousedown = function() { console.log("鼠標(biāo)按下"); } // - onmouseup 鼠標(biāo)抬起 oLis[1].onmouseup = function() { console.log("鼠標(biāo)抬起"); } // - onmousemove 鼠標(biāo)移動(dòng) oLis[1].onmousemove= function() { console.log("鼠標(biāo)移動(dòng)"); } // - oncontextmenu 鼠標(biāo)右擊 oLis[2].oncontextmenu = function() { console.log("鼠標(biāo)右擊"); } // - onmouseover 鼠標(biāo)移入 myUl.onmouseover = function() { console.log("鼠標(biāo)移入"); } // - onmouseout 鼠標(biāo)移出 myUl.onmouseout = function() { console.log("鼠標(biāo)移出"); } // - onmouseenter 鼠標(biāo)進(jìn)入 myUl.onmouseenter = function() { console.log("鼠標(biāo)進(jìn)入"); } // - onmouseleave 鼠標(biāo)離開 myUl.onmouseleave = function() { console.log("鼠標(biāo)離開"); } </script>
onmouseover 鼠標(biāo)移入
onmouseout 鼠標(biāo)移出
onmouseenter 鼠標(biāo)進(jìn)入
onmouseleave 鼠標(biāo)離開
onmouseover及onmouseout不僅會(huì)觸發(fā)自身這個(gè)事件對(duì)應(yīng)的事情還會(huì)將父級(jí)這個(gè)事件對(duì)應(yīng)做的事情再次觸發(fā)
onmouseenter及onmouseleave:只會(huì)觸發(fā)自身這個(gè)事件對(duì)應(yīng)做的事情,不會(huì)觸發(fā)父級(jí)這個(gè)事件對(duì)應(yīng)做的事情
原則:給值就是設(shè)置,不給值就是獲取
元素的所有操作都必須是具體的元素,集合不能直接操作
從元素中獲取到的內(nèi)容都是字符串,沒有內(nèi)容獲取到的是空字符串
設(shè)置:表單元素.value = 值;
獲?。罕韱卧?value;
// 多次賦值后邊覆蓋前邊的
// 獲取元素 var inputs = document.getElementsByTagName("input"); var btn = document.getElementsByTagName("button")[0]; console.log(inputs, btn); // 將兩個(gè)輸入框的和展示到第三個(gè)輸入框 // 綁定事件 // 事件每點(diǎn)擊一次 函數(shù)中代碼就重新執(zhí)行一次 btn.onclick = function () { //做什么事情 // 獲取兩個(gè)輸入框的值 var oneVal = inputs[0].value; var twoVal = inputs[1].value; console.log(oneVal, twoVal); // 遇到字符串表示拼接 先轉(zhuǎn)為數(shù)字 var total = parseFloat(oneVal) + parseFloat(twoVal); console.log(total); // 將和設(shè)置給第三個(gè)輸入框 inputs[2].value = total; }
設(shè)置:表單元素.innerText/innHTML = 值;
獲?。罕韱卧?innerText/innHTML;
區(qū)別:innerText只能識(shí)別文本,而innHTML既可以識(shí)別文本,又可以識(shí)別標(biāo)簽
var div = document.getElementsByTagName("div")[0]; var h3 = document.getElementsByTagName("h3")[0]; var p = document.getElementsByTagName("p")[0]; console.log(div, h3,p); // 設(shè)置:表單元素.innerText/innHTML = 值; // 后邊設(shè)置的覆蓋前邊的 // div.innerText = "我是div"; // div.innerText = "<h7>我是div</h7>"; // div.innerHTML = "我是div"; div.innerHTML = "<h7><a href='https://www.baidu.com'>我是div</a></h7>"; h3.innerHTML = "我是H2"; // 獲取:表單元素.innerText/innHTML; console.log(div.innerText);//我是div console.log(div.innerHTML);//<h7><a href="https://www.baidu.com">我是div</a></h7> console.log(p.innerText); console.log(p.innerHTML);
操作結(jié)構(gòu)上天生自帶的屬性
設(shè)置:元素.屬性 = 值; 獲取不到返回空字符串
獲?。涸?屬性;
元素.id = 值;/元素.id;
元素.className = 值;/元素.className;
元素.title = 值;/元素.title;
...
// 獲取元素 var div = document.getElementsByTagName("div")[0]; // 設(shè)置 div.className = "myBox"; div.title = "我是div"; // 獲取 console.log(div.id); console.log(div.className); console.log(div.title);
到此,關(guān)于“如何掌握javascript的基礎(chǔ)交互”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。