01 获取HTML元素对象与导航

m0_73745472

已于 2023-07-18 15:28:09 修改

阅读量51

点赞数

文章标签： html 前端 javascript

于 2023-07-18 15:12:15 首次发布

本文链接：https://blog.csdn.net/m0_73745472/article/details/131783637

版权

本文介绍了如何通过Document对象的属性来获取HTML元素，如body、head和forms等，并展示了使用getElementById、getElementsByClassName等方法搜索特定元素。同时，文章还讨论了导航属性，如childNodes、firstChild和nextSibling，用于遍历和操作DOM结构。

摘要由CSDN通过智能技术生成

一、使用属性获取元素对象

通过Document对象的属性获取元素对象

Document对象的元素属性
属性	说明	返回
activeElement	返回一个代表当前带有键盘焦点元素的对象	HTMLelement
body	返回一个代表body元素的对象	HTMLelement
head	返回一个代表head元素的对象	HTMLelement
forms	返回代表所有form对象的	HTMLCollection
images	返回所有img对象	HTMLCollection
links	返回所有有href属性的对象	HTMLCollection
scripts	所有script	HTMLCollection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="rectangle.png" alt=""id="rectangle">
    <p>长方形（rectangle）也叫矩形，是一种平面图形，是有一个角是直角的平行四边形。</p>
    <img src="triangle.png" alt="" id="triangle">
    <p>三角形(triangle)是由同一平面内不在同一直线上的三条线段‘首尾’顺次连接所组成的封闭图形，在数学、建筑学有应用。</p>
    <script>
        var images = document.images;
        for(var i = 0;i < images.length;i++){
            document.write(images[i].id);
            document.write("<br/>");
        }
    </script>
</body>
</html>

三、搜索元素

寻找元素的方法
方法	说明	返回
getElementById	返回带有指定id的元素	HTMLElement
getElementsByClassName	返回带有指定类名的元素集合	HTMLElement[]
getElementsByName	返回带有指定name值的元素集合	HTMLElement[]
getElementsByTagName	返回带有指定标签的元素集合	HTMLElement[]
querySelector()	返回带有指定选择器的元素	HTMLElement
querySelectorAll()	返回带有指定选择器的元素集合	HTMLElement[]

四、导航

navigation属性与方法
属性	说明	返回
childNodes	返回子元素组	HTMLElement[]
firstChild	返回第一个子元素	HTMLElement
hasChildNodes()	是否有子元素	boolean
lastChild	返回最后一个子元素	HTMLElement
nextSibiling	下一个兄弟节点	HTMLElement
parentNode	返回父节点	HTMLElement
previousSibiling	之前一个的兄弟节点	HTMLElement