每日分享

1.nodeList

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>hello</p>
        <p>world</p>
        <p>hello</p>
        <p>world</p>
    </body>
    <script>
        var x = document.getElementsByTagName("p");
        for (var i=0;i<x.length;i++){ 
        }
        var y = x[2];
        console.log(y)　　　　　　//hello
    </script>
</html>

2.parentNode

parentNode 属性常被用来改变文档的结构。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            hello
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementById("box");
        box.parentNode.removeChild(box); 　　//删除
    </script>
</html>

3.firstChild以及lastChild

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
    <script type="text/javascript">
        var box = document.getElementById('box');
        var node1 = box.firstChild.nodeName; 　　　　//#text
        var node2 = box.lastChild.nodeName; 　　　　//#text
        alert(node1);
        alert(node2);
    </script>
</html>

4.previousSibling

previousSibling 属性返回同一树层级中指定节点的前一个节点。

被返回的节点以 Node 对象的形式返回。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="box"><li id="lis1">1</li><li id="lis2">2</li></ul>　　　　
    </body>
    <script type="text/javascript">
        var lis2 = document.getElementById('lis2');
        var damo = lis2.previousSibling.id;　　　　//前一个id lis1  li之间有空格的返回的则是undefined
        alert(damo);
    </script>
</html>

5.previousElementSibling

前一个兄弟元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="box"><li id="lis1">1</li><li id="lis2">2</li></ul>
    </body>
    <script type="text/javascript">
        var lis2 = document.getElementById('lis2');
        var damo = lis2.previousElementSibling.id;　　　　//返回的是前一个兄弟元素 　　lis1
        alert(damo);
    </script>
</html>

6.appendChild

在列表中添加项目

appendChild() 方法向节点添加最后一个子节点。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="box">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
    <script type="text/javascript">
        var node = document.createElement("LI");　　　　//创建元素节点
        var textnode = document.createTextNode("4");　　　　//创建文本节点
            node.appendChild(textnode);
            document.getElementById("box").appendChild(node);
    </script>
</html>

7.insertBefore

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="box">
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    <script>
        var newItem=document.createElement("LI");        //创建元素节点
        var textnode=document.createTextNode("1");        //创建文本节点
        newItem.appendChild(textnode);        //添加文本节点
        var box=document.getElementById("box");        //获取元素
        box.insertBefore(newItem,box.childNodes[0]);        //添加到位置
    </script>
</html>

posted on 2017-06-25 19:11 Iamgod` 阅读(107) 评论(0) 编辑收藏举报