JS的Node属性

最新推荐文章于 2024-01-04 14:18:16 发布

原创最新推荐文章于 2024-01-04 14:18:16 发布 · 307 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

<html>
<head>
    <meta charset="utf-8"/>
    <title>Node属性</title>
</head>
<body>
<!-- 获取元素节点、属性节点、文本节点 -->
<span id="aId">aaa</span><br/>
<script type="text/javascript">
    //获取元素对象 span
    var span1 = document.getElementById("aId");
    document.write("span元素类型：" + span1.nodeType + "<br/>");//1
    document.write("span元素名称：" + span1.nodeName + "<br/>");//SPAN
    document.write("span元素值：" + span1.nodeValue + "<hr/>");//null
    //nodeValue 属性对于文档节点和元素节点是不可用的。

    //通过元素对象获取属性节点对象 id
    var id1 = span1.getAttributeNode("id");
    document.write("id属性类型：" + id1.nodeType + "<br/>");//2
    document.write("id属性名称：" + id1.nodeName + "<br/>");//id
    document.write("id属性值：" + id1.nodeValue + "<hr/>");//aId

    //通过元素对象获取第一个文本节点对象 aaa	(也就只有一个对象)
    var text1 = span1.firstChild;
    document.write("text文本类型：" + text1.nodeType + "<br/>");//3
    document.write("text文本名称：" + text1.nodeName + "<br/>");//#text
    document.write("text文本值：" + text1.nodeValue + "<hr/>");//aaa

</script>
<hr/>

<!-- 获取子节点和父节点 -->
<ul id="ulId">
    <li id="li1">aaa</li>
    <li id="li2">bbb</li>
    <li id="li3">ccc</li>
</ul>
<script type="text/javascript">
    //获取 li2 子节点
    var li2 = document.getElementById("li2");
    //通过 li2 子节点获取其 ul 父节点
    var ul = li2.parentNode;
    document.write("ul 标签的id为：" + ul.id + "<br/>");
    //通过 ul 父节点获取第一个子节点
    var li1 = ul.firstChild;
    document.write("li1 的id为：" + li1.id + "<br/>");
    //通过 ul 父节点获取最后一个子节点
    var li4 = ul.lastChild;
    document.write("li4 的id为：" + li4.id + "<br/>");
</script>

<!-- 获取同辈节点 -->
<script type="text/javascript">
    var li3 = document.getElementById("li3");
    document.write("li3 的id：" + li3.id + "<br/>");
    //通过 li3 获取其上一个节点 li2
    var li2 = li3.previousSibling;
    document.write("li2 的id：" + li2.id + "<br/>");
    //通过 li3 获取其下一个节点 li4
    var li4 = li3.nextSibling;
    document.write("li4 的id：" + li4.id + "<br/>");
    //通过 li4 获取其下一个节点 超出范围为null
    var li5 = li4.nextSibling;
    document.write("li5：" + li5 + "<br/>");
</script>
</body>
</html>