DOM 原生操作
DOM 原生操作
施长成 发表于3年前
DOM 原生操作
  • 发表于 3年前
  • 阅读 57
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: DOM原生操作的注意点

1.

var a = document.getElementById();
var b = document.getElementByName();...

从上面的代码中得到的值[a,b] 它们的数据类型为 元素数组 例如[p, item: function, namedItem: function];

但是在原生DOM的操作中我们需要使用的Node类型的数据,因此需要将 元素数组 转出 Node元素。

Node node = a[0];或者 Node node = b[0];简单的说,如果通过 var elements = document.getElementBy.. 这样的方法可以能到满足条件的所有元素,以及一些function方法,而 通过 elements[0] 或者 elements[1] ([]中的值根据满足条件的节点数目而定) 可能获取到这个元素的 Node 值。

 2.insertBefore 和 insertAfter 的使用。

    在html5 中 insertBefore(paramA,paramB) 和  insertAfter(paramA,paramB) 中必须使用两个参数,如果使用一个错误会报错。insertBefore 和 insertAfter 方法只有Node类型的元素 才具有该方法,insertBefore和insertAfter中的第二个参数为调用该方法的Node的子节点,如果该Node存在子节点则可以使用 Node.childNodes[0]来替换,如果没有子节点则通过其他方式来添加节点。在该处可能会出现的js错误:

    1. The node before which the new node is to be inserted is not a child of this【code】

    2. Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 present.

    3. Uncaught TypeError: undefined is not a function

    4. Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

3.API介绍

    因为我主要是想提醒大家在使用原生DOM时可能会出现的问题,对于API的介绍我推荐:http://weirhp.iteye.com/blog/963835


结尾代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <p><label>aaa</label></p>
        <label>dddd</label>
    </div>
    <div>
        <p>aaa</p>
        <label>dddd</label>
    </div>
</body>

<script type="text/javascript">
    var div = document.getElementsByTagName("div");
    console.log(div);
    var div1 = div[0];
    console.log(div1);
    var p = div1.getElementsByTagName("p");
    div1.setAttribute("shi","shi");
//    div1.className = "shi";
    console.log(p);
    p.className = "aaa";
    var label = document.createElement("label");
    label.innerText = "label";
//    console.log(typeof (document.body));
    console.log(p[0]);
    var a = document.createElement("a");
    a.innerText = "shi";
//    document.body.insertBefore(a,p[0]);
//    p[0].insertBefore(a,p[0].childNodes[0]);//正确的
//    p.insertBefore(a,p[0].childNodes[0]);//演示错误  Uncaught TypeError: undefined is not a function
//    p[0].insertBefore(a);//演示错误  Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 present.
    p[0].insertBefore(a,p[0]);//演示错误  Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
//    document.body.removeChild(div1);
</script>

</html>



共有 人打赏支持
粉丝 4
博文 63
码字总数 22544
×
施长成
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: