javascript的基礎交互詳解

Posted on 2021-10-21 by WalkonNet

一.元素的獲取方式

文檔下獲取

隻要在文檔中符合都會獲取到

id獲取

基本語法：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-h2");
        console.log(myH2);

類名獲取（className）

基本語法：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

標簽名（tagName）

基本語法：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：隻會觸發自身這個事件對應做的事情，不會觸發父級這個事件對應做的事情

三.元素操作

原則：給值就是設置，不給值就是獲取

元素的所有操作都必須是具體的元素,集合不能直接操作

1.操作元素內容

從元素中獲取到的內容都是字符串，沒有內容獲取到的是空字符串

操作表單元素內容

設置：表單元素.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 h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h2,p);
// 設置：表單元素.innerText/innHTML = 值;
// 後邊設置的覆蓋前邊的
// div.innerText = "我是div";
// div.innerText = "<h6>我是div</h6>";
// div.innerHTML = "我是div";
div.innerHTML = "<h6><a href='https://www.baidu.com'>我是div</a></h6>";
h2.innerHTML = "我是H2";
// 獲取：表單元素.innerText/innHTML;  
console.log(div.innerText);//我是div
console.log(div.innerHTML);//<h6><a href="https://www.baidu.com">我是div</a></h6>
console.log(p.innerText);
console.log(p.innerHTML);

2.操作元素屬性

操作結構上天生自帶的屬性

設置：元素.屬性 = 值; 獲取不到返回空字符串
獲取：元素.屬性；

元素.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);

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

javascript的基礎交互詳解

目錄

一.元素的獲取方式

文檔下獲取

id獲取

類名獲取（className）

標簽名（tagName）

自定義獲取范圍

二.鼠標事件

區別：

三.元素操作

1.操作元素內容

操作表單元素內容

操作普通閉合標簽

2.操作元素屬性

總結

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

一.元素的獲取方式

文檔下獲取

id獲取

類名獲取（className）

標簽名（tagName）

自定義獲取范圍

二.鼠標事件

區別：

三.元素操作

1.操作元素內容

操作表單元素內容

操作普通閉合標簽

2.操作元素屬性

總結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆