溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何掌握javascript的基礎交互”，在日常操作中，相信很多人在如何掌握javascript的基礎交互問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何掌握javascript的基礎交互”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
只要在文檔中符合都會獲取到
基本語法：document.getElementById(id值);
document：文檔，表示獲取的范圍
get：獲取 Element：元素 By:通過..
返回的是元素對象
返回值：獲取到了返回具體的元素，獲取不到返回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：元素（復數） By:通過..
得到的元素對象是動態的偽數組
可以通過遍歷的形式打印出來
返回值：獲取到了：返回一個元素集合 HTMLCollection,這個集合由索引和值組成，0對應第一項，1對應第二項依次類推，天生自帶length屬性，最后一項的索引是集合.length -1; 獲取不到 返回一個空集合 長度是0
length屬性 集合的長度 或 集合中元素的個數
集合.length;
獲取集合中具體元素
集合[索引]
var tests = document.getElementsByClassName("test");
console.log(tests);
console.log(tests.length); //獲取長度
// 直接輸出到控制臺
console.log(tests[0]);
console.log(tests[1]);
console.log(tests[tests.length - 1]);
// 存儲起來
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]); //沒有這個小標或索引 相當于集合中這個位置還沒有初始化，或未定義 返回undefined
var hello = document.getElementsByClassName("hello");
console.log(hello, hello.length);
console.log(hello[0]); //undefined基本語法：document.getElementsByTagName(標簽名);
document：文檔，表示獲取的范圍
get：獲取 Elements：元素（復數） By:通過..
返回值：獲取到了：返回一個元素集合 HTMLCollection,這個集合由索引和值組成，0對應第一項，1對應第二項依次類推，天生自帶length屬性，最后一項的索引是集合.length -1; 獲取不到 返回一個空集合 長度是0
length屬性 集合的長度 或 集合中元素的個數
集合.length;
獲取集合中具體元素
集合[索引]
var oLis = document.getElementsByTagName("li");
console.log(oLis);
// 獲取長度
console.log(oLis.length);
// 獲取具體的元素
console.log(oLis[0]);
console.log(oLis[1]);
console.log(oLis[2]);
console.log(oLis[oLis.length - 1]);父級元素：必須是具體的元素
父級元素.getElementsByClassName(類名值);
父級元素.getElementsByTagName(標簽名);
// 獲取ol下的li
// 獲取父級元素
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
// 獲取父級
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 鼠標按下
onmouseup 鼠標抬起
onmousemove 鼠標移動
oncontextmenu 鼠標右擊
onmouseover 鼠標移入
onmouseout 鼠標移出
onmouseenter 鼠標進入
onmouseleave 鼠標離開
<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 鼠標按下
oLis[1].onmousedown = function() {
console.log("鼠標按下");
}
// - onmouseup 鼠標抬起
oLis[1].onmouseup = function() {
console.log("鼠標抬起");
}
// - onmousemove 鼠標移動
oLis[1].onmousemove= function() {
console.log("鼠標移動");
}
// - oncontextmenu 鼠標右擊
oLis[2].oncontextmenu = function() {
console.log("鼠標右擊");
}
// - onmouseover 鼠標移入
myUl.onmouseover = function() {
console.log("鼠標移入");
}
// - onmouseout 鼠標移出
myUl.onmouseout = function() {
console.log("鼠標移出");
}
// - onmouseenter 鼠標進入
myUl.onmouseenter = function() {
console.log("鼠標進入");
}
// - onmouseleave 鼠標離開
myUl.onmouseleave = function() {
console.log("鼠標離開");
}
</script>onmouseover 鼠標移入
onmouseout 鼠標移出
onmouseenter 鼠標進入
onmouseleave 鼠標離開
onmouseover及onmouseout不僅會觸發自身這個事件對應的事情還會將父級這個事件對應做的事情再次觸發
onmouseenter及onmouseleave：只會觸發自身這個事件對應做的事情，不會觸發父級這個事件對應做的事情
原則：給值就是設置，不給值就是獲取
元素的所有操作都必須是具體的元素,集合不能直接操作
從元素中獲取到的內容都是字符串，沒有內容獲取到的是空字符串
設置：表單元素.value = 值;
獲取：表單元素.value;
// 多次賦值后邊覆蓋前邊的
// 獲取元素
var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);
// 將兩個輸入框的和展示到第三個輸入框
// 綁定事件
// 事件每點擊一次 函數中代碼就重新執行一次
btn.onclick = function () { //做什么事情
// 獲取兩個輸入框的值
var oneVal = inputs[0].value;
var twoVal = inputs[1].value;
console.log(oneVal, twoVal);
// 遇到字符串表示拼接 先轉為數字
var total = parseFloat(oneVal) + parseFloat(twoVal);
console.log(total);
// 將和設置給第三個輸入框
inputs[2].value = total;
}設置：表單元素.innerText/innHTML = 值;
獲取：表單元素.innerText/innHTML;
區別：innerText只能識別文本，而innHTML既可以識別文本，又可以識別標簽
var div = document.getElementsByTagName("div")[0];
var h3 = document.getElementsByTagName("h3")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h3,p);
// 設置：表單元素.innerText/innHTML = 值;
// 后邊設置的覆蓋前邊的
// 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);操作結構上天生自帶的屬性
設置：元素.屬性 = 值; 獲取不到返回空字符串
獲取：元素.屬性；
元素.id = 值;/元素.id;
元素.className = 值;/元素.className;
元素.title = 值;/元素.title;
...
// 獲取元素
var div = document.getElementsByTagName("div")[0];
// 設置
div.className = "myBox";
div.title = "我是div";
// 獲取
console.log(div.id);
console.log(div.className);
console.log(div.title);到此，關于“如何掌握javascript的基礎交互”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
