獲取頁面元素的幾種方式

在JS中咱們能夠經過如下幾種方式獲取到頁面中的元素：

一、使用id來獲取對象的元素（獲取到的對象元素是惟一的）

document.getElementById("")

例：

<input type="text" value="默認的文字" id="txt"/>
<input type="button" value="按鈕" id="btn"/>
<script>
    // 第一種獲取頁面元素的方式  getElementById
    var txt =   document.getElementById("txt");
    console.log(txt);
    console.log(txt.value);
    txt.value="這是修改後的文字";

    var btn = document.getElementById("btn");
    console.log(btn);
    console.log(btn.value);

console.log(btn.id);
    btn.value = "按鈕6666";
</script>

二、經過標籤名來獲取

document.getElementsTagName("")

例

<input type="text" value="123"/>
<input type="text" value="456"/>
<input type="text" value="789"/>
<input type="text" value="abc"/>
<input type="text" value="mmmm"/>
<input type="text" value="kkk"/>

<script>
    // 得到頁面元素的第二種方式  經過標籤名

  var inputs =   document.getElementsByTagName("input");
    console.log(inputs);
    for(var i=0;i<inputs.length;i++){
//        console.log(inputs[i].value);
        inputs[i].value = "aaaaa";
    }
</script>

經過標籤名的方式獲取到的元素是一個數組，即便只有一個標籤也是放着數組裏面的；

三、經過類名來獲取

document.getElementsByClassName("")

例

div class="dv"></div>
<p class="dv"></p>
<div class="dv"></div>
<p class="dv"></p>
<span class="dv"></span>
<script>
    // 第三種獲取頁面元素的方式
    var eles = document.getElementsByClassName("dv"); //得到的也是一組數據
    console.log(eles);
</script>

經過類名獲取到對象的元素也是一組數據

可是getElementsByClassName有很強的兼容性，通常不推薦使用。

看完獲取頁面元素的方式下面咱們在看看JS中的事件；

事件就是頁面文檔或者瀏覽器窗口中發生的一些特色的交互瞬間。

事件有和小說同樣也有三要素：

第一事件要有事件源：要註冊事件的對象

第二事件要有事件名稱：就是要註冊什麼樣的對象

第三事件要有事件的處理程序：要執行的代碼或結果

註冊事件有兩種方式，分別是行內式和內嵌式；

 

看完事件後 在看看innerText與innerHTML的區別

例如

div id="box">
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p id="p3">這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
</div>
<script>
    // 得到事件源
    var box = document.getElementById("box");
    var p3 = document.getElementById("p3");
    console.log(box.innerText); // inner內部的  Text文本   內部的文本 只獲取標籤 之間的文本內容
    console.log(box.innerHTML); // 是獲取標籤之間的全部的內容，包括標籤

    // 當標籤之間只有文本信息的時候，效果是同樣的
    console.log(p3.innerHTML);
    console.log(p3.innerText);
</script>

 

小結一下：

innerText與innerHTML之間的區別

相同：使用innerText和innerHTML均可以得到元素之間的內容；

不一樣點：

一、innerText：內部的文本 只獲取標籤之間的文本內容

二、innerHTML:獲取標籤之間的全部內容，包括標籤（原樣輸出）

三、innerText在早期的火狐瀏覽器是不支持的，只支持textContent，新的版本火狐都支持；

四、innerText設置的時候，會原樣輸出，而innerHTML會將對應的標籤渲染成正常的標籤

當標籤之間只有文本信息的時候效果是同樣的。

今天就這樣吧！