JavaScript_节点相关操作_返回id下li的节点-CSDN博客

本文链接：https://blog.csdn.net/chance2015/article/details/50464464

什么是节点？

节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合
树也有节点，从根到叶每一个点都相当于一个节点

节点都有哪些操作？

1.获取指定的元素节点

1). 获取 id 为 bj 的那个节点.

      //在编写 HTML 文档时, 需确保 id 属性值是唯一的. 
    //该方法为 document 对象的方法
        var bjNode = document.getElementById("bj");
        alert(bjNode);

上面使用了getElementById();方法
该方法为寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null。

2）. 获取所有的 li 节点.

    //使用标签名获取指定节点的集合. 
    //该方法为 Node 接口的方法, 即任何一个节点都有这个方法. 
    var liNodes = document.getElementsByTagName("li");
    alert(liNodes.length);
    var cityNode = document.getElementById("city");
    var cityLiNodes= cityNode.getElementsByTagName("li");
    alert(cityLiNodes.length);

这里使用了getElementsByTagName()方法
该方法寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

3) 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合.

var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);

4)若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()方法对于 IE 无效. 所以使用该方法时需谨慎.

var bjNode2 = document.getElementsByName("BeiJing");
alert(bjNode2.length);

源代码body部分如下:

<body>
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj" name="BeiJing">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br><br>
        gender: 
            <input type="radio" name="gender" value="male"/>Male
            <input type="radio" name="gender" value="female"/>Female
    </body>

2.读写属性节点

通过元素节点 . 的方式来获取属性值和设置属性值.
属性节点即为某一指定的元素节点的属性.

1). 先获取指定的那个元素节点

var nameNode = document.getElementById("name");

2). 再读取指定属性的值

alert(nameNode.value);

使用元素节点.value方法读取到相应的值

3）. 设置指定的属性的值.

nameNode.value = "chance";

使用元素节点.value = 值的方法进行赋值
源代码body体内容为:

<body>
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj" name="BeiJing">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br><br>
        name: <input type="text" name="username" 
            id="name" value="test"/>
    </body>

3.获取元素节点的子节点

1）. 获取 city 节点的所有子节点.

var cityNode = document.getElementById("city");

2). 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.但该方法不实用.

alert(cityNode.childNodes.length);

3). 获取 #city 节点的所有 li 子节点.

var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);

4). 获取指定节点的第一个子节点和最后一个子节点.

    alert(cityNode.firstChild);
    alert(cityNode.lastChild);

源代码中body体内容如下:

<body>
        <p>你喜欢哪个城市?</p>
        <ul id="city"><li id="bj" name="BeiJing">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br><br>
        name: <input type="text" name="username" 
            id="name" value="chance"/>
    </body>

节点有哪些属性

关于节点的属性: nodeType, nodeName, nodeValue
在文档中, 任何一个节点都有这 3 个属性
而 id, name, value 是具体节点的属性.
nodeType、nodeName 是只读的.
而 nodeValue 是可以被改变的。
以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多.
例如:

    //1. 元素节点的这 3 个属性
    var bjNode = document.getElementById("bj");
    alert(bjNode.nodeType); //元素节点: 1
    alert(bjNode.nodeName); //节点名: li
    alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null
    //2. 属性节点
    var nameAttr = document.getElementById("name")
                                       .getAttributeNode("name");
    alert(nameAttr.nodeType); //属性节点: 2
    alert(nameAttr.nodeName); //属性节点的节点名: 属性名
    alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值

    //3. 文本节点:
    var textNode = bjNode.firstChild;   
    alert(textNode.nodeType); //文本节点: 0
    alert(textNode.nodeName); //节点名: #text
    alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.

body代码如下:

<body>
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj" name="BeiJing">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br><br>
        name: <input type="text" name="username" 
            id="name" value="atguigu"/>
    </body>