JavaScript--操作DOM对象(一)

2301_77287584

358人浏览 · 2025-09-29 15:48:45

2301_77287584 · 2025-09-29 15:48:45 发布

JavaScript–操作DOM对象

文章目录

JavaScript--操作DOM对象

1.DOM介绍

DOM：Document Object Model（文档对象模型）

在这里插入图片描述

2.节点和节点关系

在这里插入图片描述

3.访问节点

3.1使用getElement系列方法访问指定节点

getElementByld()
getElementsByName()
getElementsByTagName()

3.2根据层次关系访问节点

节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="bsz">白石洲</li>
        <li>无题</li>
        <li>获奖之作</li>
    </ul>
</body>
<script>
    var bsz=document.getElementById("bsz");
    //获取父节点
    alert(bsz.parentNode);
    //获取第一个孩子节点
    alert(bsz.parentNode.firstChild.innerHTML);
    //获取最后一个孩子节点
    alert(bsz.parentNode.lastChild.innerHTML);
    //获取下一个兄弟节点
    alert(bsz.nextSibling.innerHTML);//因为有空格获得的时null
</script>
</html>

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="bsz">白石洲</li>
        <li>无题</li>
        <li>获奖之作</li>
    </ul>
</body>
<script>
    var bsz=document.getElementById("bsz");
    //获得第一个子节点，直接出来结果就是白石洲
    alert(bsz.parentNode.firstElementChild.innerHTML);
    alert(bsz.parentNode.lastElementChild.innerHTML);
    alert(bsz.nextElementSibling.innerHTML);
</script>
</html>