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

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>

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

猜你喜欢