從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性

你們好，這裏是「 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")));
        };

一、設置成對標籤中文本內容：

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

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

二、獲取成對標籤中文本內容：

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

那麼說明，瀏覽器不支持的屬性的類型都爲 undefined.

經過判斷元素有無 textContent 屬性（沒有則元素的 textContent 屬性爲 undefined）來決定用 innerText 仍是 textContent。

二、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 標籤，讓其顯示或獲得對應標籤的格式。

---

2、自定義屬性操做（設置，獲取，移除）

<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>

一、標籤中自定義的屬性是不能經過DOM對象.屬性 的方式獲取的，由於這個屬性在DOM裏面不存在，強行獲取只能是 undefined。

二、相應的，設置也是同樣的，經過 DOM對象.屬性 的方式設置自定義標籤，結果設置的只是DOM對象的自定義屬性，這個自定義屬性不會在標籤上顯示出來。

獲取：經過DOM對象 .getAttibute("自定義屬性的名字") 來獲取自定義屬性的值。

設置：經過DOM對象 .setAttibute("自定義屬性的名字", "自定義屬性的值") 來設置自定義屬性。

移除：經過DOM對象 .removeAttibute("自定義屬性的名字") 來設置自定義屬性。

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