大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、相容程式碼

1、封裝 innerText 和 TextContent

// 設定任意標籤的文字內容為任意內容
        function setText(element, text) {
            (typeof element.TextContent === "undefined") ? (element.innerText = text) : (element.textContent = text);
        }

        // 獲取任意標籤的文字內容
        function getText(element) {
            return (typeof element.TextContent === "undefined" ? element.innerText : element.textContent);
        }

// 示例程式碼
        my$("btn").onclick = function () {
            setText(my$("dv"), "hahahhahha");
        };

        my$("btn").onclick = function () {
            console.log(getText(my$("dv")));
        };
 

1、設定成對標籤中文字內容：

innerText 屬性是 IE8 標準屬性，chrome，fireFox，IE8都支援。

textContent 是W3C標準屬性，chrome，firefox支援，IE8不支援。

2、獲取成對標籤中文字內容：

在 IE8 下使用 textContent 獲取成對標籤中文字內容，返回值為 undefined。

那麼說明，瀏覽器不支援的屬性的型別都為 undefined.

通過判斷元素有無 textContent 屬性（沒有則元素的 textContent 屬性為 undefined）來決定用 innerText 還是 textContent。

2、innerText 和 innerHTML

    <div id="dv">
        哈哈
        <p>p標籤</p>
    </div>

    <script src="common.js"></script>
    <script>
        my$("dv").innerText = "div標籤"; // 只顯示文字
        my$("dv").innerHTML = "div標籤"; // 只顯示文字

        my$("dv").innerText = "<a href='#'>a標籤</a>"; // 只顯示文字
        my$("dv").innerHTML = "<a href='#'>a標籤</a>"; // 帶有a標籤格式

        console.log(my$("dv").innerText); // 哈哈 p標籤
        console.log(my$("dv").innerHTML); // 哈哈 <p>p標籤</p>
    </script>
 

innerText 屬性：設定和獲取只能得到文字內容。

innerHTML 屬性：不僅可以獲得文字內容，還可以設定和獲取 html 標籤，讓其顯示或得到對應標籤的格式。

二、自定義屬性操作（設定，獲取，移除）

<p>p標籤</p>
<script src="common.js"></script>
<script>
      var pObj = document.getElementsByTagName("p")[0];
      pObj.setAttribute("hello", "world"); // <p hello="world">p標籤</p>
console.log(pObj.getAttribute("hello")); // world
</script>

1、標籤中自定義的屬性是不能通過DOM物件.屬性 的方式獲取的，因為這個屬性在DOM裡面不存在，強行獲取只能是 undefined。

2、相應的，設定也是一樣的，通過 DOM物件.屬性 的方式設定自定義標籤，結果設定的只是DOM物件的自定義屬性，這個自定義屬性不會在標籤上顯示出來。

獲取：通過DOM物件 .getAttibute("自定義屬性的名字") 來獲取自定義屬性的值。

設定：通過DOM物件 .setAttibute("自定義屬性的名字", "自定義屬性的值") 來設定自定義屬性。

移除：通過DOM物件 .removeAttibute("自定義屬性的名字") 來設定自定義屬性。

PS：removeAttibute 也可以用來移除元素自帶的屬性，比如類 class 屬性等。removeAttribute("class")