获取元素节点的子节点 & 获取文本节点

时间：2023-03-08 16:07:19

1. 获取元素节点的子节点(**只有元素节点才有子节点):
              ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
                    的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
              ②. firstChild 属性获取第一个子节点
              ③. lastChild 属性获取最后一个子节点

dom-getNode3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<script type="text/javascript">

    //获取元素节点的子节点

    window.onload = function() {

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

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

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

        alert(cityNode.childNodes.length);//9

        //3.获取city节点的所有li子节点,这个实用的

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

        alert(cityLiNodes.length);//4

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

        alert(cityNode.firstChild);//[object Element]]

        alert(cityNode.lastChild);//[object Text]]

    }

</script>

</head>

<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="xiaoxiaolin">

</body>

</html>

2. 获取文本节点:

①. 步骤: 元素节点 --> 获取元素节点的子节点
              ②. 若元素节点只有文本节点一个子节点,
                   例如 <li id="bj" name="BeiJing">北京</li>
                   可以先获取到指定的元素节点 eleNode,
                   然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<script type="text/javascript">

    //获取文本节点，文本节点一定是元素节点的子节点

    window.onload = function() {

        //1.获取文本节点所在的元素节点

        var bjNode = document.getElementById("bj");

        //2.通过firstChild定义到文本节点

        var bjTextNode =bjNode.firstChild;

        //3.通过操作文本节点的nodeValue 属性来读写文本节点的值

        alert(bjTextNode.nodeValue);

        bjTextNode.nodeValue = "我想去*";

    }

</script>

</head>

<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="xiaoxiaolin">

</body>

</html>

练习1：点击每个li节点都弹出其文本值

ex1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<script type="text/javascript">

    //点击每个li节点都弹出其文本值

    window.onload = function() {

        //1.获取所有的li节点

        var liNodes = document.getElementsByTagName("li");

        //2.使用for循环遍历

        for (var i = 0; i < liNodes.length; i++) {

            //3.为每一个li节点添加onclick响应函数

            liNodes[i].onclick = function() {

                //4.在响应函数中获取当前节点的文本值, 打印

                //this为正在响应事件的那个节点

                alert(this.firstChild.nodeValue);

            }

        }

    }

</script>

</head>

<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="xiaoxiaolin">

</body>

</html>

练习2：点击每个li节点,若li节点的文本值没有^^开头,则加上,有则去掉

ex2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<script type="text/javascript">

    // 点击每个li节点,若li节点的文本值没有^^开头,则加上,有则去掉

    window.onload = function() {

        //1.获取所有的li节点

        var liNodes = document.getElementsByTagName("li");

        //2.使用for循环遍历

        for (var i = 0; i < liNodes.length; i++) {

            //3.为每一个li节点添加onclick响应函数

            liNodes[i].onclick = function() {

                var val = this.firstChild.nodeValue

                var reg = /^\^{2}/g;

                if (reg.test(val)) {

                    val = val.replace(reg, "");

                } else {

                    val = "^^" + val;

                }

                this.firstChild.nodeValue = val;

            }

        }

    }

</script>

</head>

<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="xiaoxiaolin">

</body>

</html>

相关文章