DOM初探（11）——元素节点的一些属性和方法，封装函数insertAfert()，将目标节点背部的节点顺序逆序

DOM基本操作：

Element节点的一些属性

innerHTML

innerText/textContent（老版本IE不好使）

Element节点的一些方法：

ele.setAttribute(“属性名”,”属性值”)

ele.getAttribute(“属性名”)；

innerHTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div>
            <span>123</span>
            <strong>234</strong>
        </div>
        <script type="text/javascript">
            var div = document.getElementsByTagName("div")[0];
            var span = document.getElementsByTagName("span")[0];
            var strong = document.getElementsByTagName("strong")[0];
        </script>
    </body>
</html>

div.innerHTML = "123456789"//会覆盖div原来的内容

div.innerHTML += "123456789"//不会覆盖

innerText：

ele.setAttribute()：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div></div>
        <span></span>
        <strong></strong>
        <script type="text/javascript">
            var all = document.getElementsByTagName("*");
            for(var i = 0;i < all.length;i ++){
                all[i].setAttribute("this.name",all[i].nodeName);
            }
        </script>
    </body>
</html>

练习34：

请编写一段JavaScript脚本，生成下面的这段DOM结构。要求：使用标准的DOM方法或属性。

</div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <script type="text/javascript">
            var div = document.createElement("div");
            var p = document.createElement("p");
            div.setAttribute("class","emample");
            p.setAttribute("class","slogan");
            var text = document.createTextNode("123");
            p.appendChild(text);
            div.appendChild(p);
            document.body.appendChild(div);
        </script>
    </body>
</html>

练习35：

封装函数insertAfert()；功能类似insertBefore()；

提示：可忽略老版本浏览器，直接在Element.prototype上编程。

练习36：

将目标节点背部的节点顺序逆序。

eg：<div><a></a><em></em></div>-à<div><em></em><a></a></div>

练习35答案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <div>
            <i></i>
            <b></b>
            <span></span>
        </div>
        <script type="text/javascript">
            Element.prototype.inertAfter = function (targetNode,afterNode) {
                var beforeNode = afterNode.nextElementSibling;
                if(beforeNode == null){
                    this.appendChild(targetNode);
                }else{
                    this.insertBefore(targetNode,beforeNode);
                }
            }
            var div = document.getElementsByTagName("div")[0];
            var b = document.getElementsByTagName("b")[0];
            var span = document.getElementsByTagName("span")[0];
            var p = document.createElement("p");
        </script>
    </body>
</html>

一般的情况：

特殊情况：

练习36答案：

appendChild()

DOM初探（11）——元素节点的一些属性和方法，封装函数insertAfert()，将目标节点背部的节点顺序逆序

猜你喜欢