从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性

一、兼容代码

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")));

        };

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>

---

二、自定义属性操作（设置，获取，移除）

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