练习：取标签子节点，并输出NodeName&NodeType&NodeValue

原创于 2018-07-30 08:40:56 发布 · 648 阅读

1 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

54 篇文章

订阅专栏

本文通过一个简单的HTML页面示例介绍了如何使用JavaScript获取指定元素的子节点，并输出每个子节点的类型、名称及值。该示例有助于理解DOM操作的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<head>
    <title>取标签子节点，并输出NodeName&NodeType&NodeValue</title>
    <script type="text/javascript">
        function getChildInfo(){
            var bjNode=document.getElementById("bj");
            var childs=bjNode.childNodes;//找bj节点下的所有子节点
            for(var i=0;i<childs.length;i++){
                var cnode=childs[i];//取具体的一个子节点
                alert(cnode.nodeType+","+cnode.nodeName+","+cnode.nodeValue);
            }
        }
    </script>
</head>
<body>
<ul>
    <li id="bj" value="beijing">
        北京
        <h1>海淀</h1>
        奥运
    </li>
    <li id="sh" value="shanghai">
        上海
    </li>
    <br/>
    <input type="button" value="li取值" onclick="getChildInfo()"/>
</ul>
</body>
</html>