DOM-获取元素及获取元素的相关知识

田海红

已于 2023-10-10 01:17:48 修改

阅读量299

点赞数

文章标签： css 前端

于 2023-08-23 16:49:32 首次发布

本文链接：https://blog.csdn.net/weixin_68211919/article/details/132402831

版权

一、通过官方提供的方式来获取页面上的元素

<script>
        var a = document.getElementsByClassName("box1")//通过class属性来获取所有满足的元素，返回的是一个类数组，没有返回一个空数组
        console.log(a)
        var b = document.getElementById("id1")//通过id来获取符合元素，返回的值为一个对象，没有返回为null
        console.log(b)
        var c = document.getElementsByName("box1")//通过name属性来获取元素，返回的是类数组
        console.log(c)
        var d = document.getElementsByTagName("input")//通过标签属性来获取元素，返回的是类数组
        console.log(d)
        var e = document.querySelector("#box1")//通过选择器来获取元素，若有多个重名的，则返回查找到的第一个元素
        console.log(e)
        var f = document.querySelectorAll(".box1")//也是通过选择器来获取元素，但它是获取所有满足条件的元素，返回一个类数组
        console.log(f)
    </script>

二、通过关系来获取页面上的元素

元素之间的关系有：兄弟、父子

1.获取子元素：返回的是一个类数组

（1）获取class属性为fa的元素

 <script> 
var getson = document.querySelector(".fa")//获取类名为fa的元素
        console.log(getson)
 </script>

（2）获取子元素：

<script>
var son = getson.children//获取里面的所有子元素，但子元素的的子元素不会
        console.log(son)
</script>

（3）获取元素的最后一个子元素

<script>
 var arr1 = getson.children
        console.log(arr1[arr1.length - 1])//获取元素的最后一个元素
</script>

两者等价

 <script>
 var box4 = document.querySelector(".fa")
        var box5 = box4.firstElementChild//获取最后一个子元素
        var box6 = box4.lastElementChild//获取最后一个子元素
        console.log(box5, box6)
 </script>

（4）获取子节点：返回的是一个类数组,包括空格，内容等都包含在里面

<script> 
var getson = document.querySelector(".fa")//获取类名为fa的元素
        var arr = getson.childNodes
        console.log(arr)
</script>

两者等价

<script>
var box = document.querySelector(".fa")
        var box2 = box.firstChild//获取fa元素中的第一个子节点
        var box3 = box.lastChild//获取fa元素中最后一个子节点
        console.log(box2, box3)
</script>

2.通过子元素来获取父元素

（1）获取元素

 <script>
        var box = document.querySelector(".son-one")//获取元素
        console.log(box)
 </script>

(2)通过子元素来获取该元素的父元素（父元素中包含了son-one在内的所有元素,x下面两者是相同的意思

<script>
var box2 = box.parentElement//获取子元素son-one的父元素
        console.log(box2)
</script>

<script>
var box3 = box.parentNode
        console.log(box3)
</script>

3.获取兄弟元素

（1）获取兄弟上一个元素

<script>
        var box = document.querySelector(".son-for")//获取元素
        var box2 = box.previousElementSibling//获取子元素son-for的上一个元素，若没有，则返回null
        console.log(box2)
</script>

<script>
        var box = document.querySelector(".son-for").previousElementSibling//获取元素son-for的上一个兄弟元素son-tr
        console.log(box)
</script>

（2）获取兄弟的兄弟的上一个元素son-for的上一个兄弟（son-tr）的兄弟（son-two）

 <script>
        var box = document.querySelector(".son-for").previousElementSibling.previousElementSibling
        console.log(box)
 <script>

获取上一个元素节点

 <script>
var box = document.querySelector(".son-for")
        var box2 = box.previousSibling//获取son-for的上一个子节点
        var box3 = box.nextSibling.nextSibling//获取son-for中下一个子节点
        console.log(box2, box3)
 </script>

（3）获取兄弟下一个元素

<script>
var box = document.querySelector(".son-one").nextElementSibling
        console.log(box)
</script>

（4）获取兄弟的兄弟的下一个元素

<script>
var box = document.querySelector(".son-one").nextElementSibling.nextElementSibling
        console.log(box)
</script>

三、不是官方的，需要自己设计

封装一个函数来获取父元素的子元素

<script>
Object.prototype.index2=function() {//在obj的原型对象上封装一个函数index2
 	console.log(this)
 	var arr=this.parentElement.childNodes//获取每个元素（box4）的子元素
 	for (let i = 0;i<arr.length;i++) {//遍历arr
 		if(this==arr[i]){
 			return i
			}
 	}
 }
 var index=document.getElementById("box4").index2()//获取box4的元素并调用函数index2
console.log(index)			
//父元素中的第几个子元素/节点					
 var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点
<script>

四、通过document来直接获取标签
常见的标签

 <script>
        document.body//body标签
        document.forms//表单标签，返回的是一个类数组
        document.images//图片标签
        document.URL//地址栏网址
        document.anchors//锚点标签
        document.links//a标签
    </script>

锚点标签的方式新方式和老方式

（1）新方式:使用id属性来给目标元素添加id，在链接标签的fref中使用”#id“来实现

    <a href="#new">新语法</a>//可以跳到id属性为”new“的位置处
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p id="new">您好</p>//给它一个id属性
    <p>hello</p>
    <p>hello</p>

(2)老方式：在a标签中添加name属性：通过给目标元素添加 name 属性，并在链接的 href 属性中使用 # 加上目标元素的 name 值，来实现页面内锚点定位。


    <a href="#p2" class="maodian1">下载:可以 跳转到当前页面的锚点</a>//可以跳到class为maodian2的标签处
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <a href="#" name="p2" class="maodian2>hello</a>//a标签中添加name属性，可以实现锚点定位，可以跳到class为maodian1的标签处
    <p>hello</p>
    <p>hello</p>

五、视口的相关操作

1.滚动到指定的位置，需要内容足够多。这个需要设置滚动条overflow：auto或者overflow：scroll

<script>
scroll(x,y)//沿着x和y轴滚动到指定位置
scrollTo(X,Y)
scrollBy(x,y)//这个与前面的两个的区别是：若前面用scroll或scrollTo设置了值，那么scrollBy则在它们设置的基础上再设置
</script>

2.滚动到浏览器窗口的最底部（以Y方向来举例，X轴上是一样的写法），默认为true：内容需要足够。。

sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

（1） window.pageYOffset：它表示滚动条相对于文档顶部的位置

（2）document.body.scrollTop：这是通过访问 document.body 元素的 scrollTop 属性来获取文档在垂直方向上滚动的像素数。

（3）document.documentElement.scrollTop：document.documentElement.scrollTop：这是通过访问 document.documentElement 元素的 scrollTop 属性来获取文档在垂直方向上滚动的像素数。

3.页面滚动了多少距离的兼容性写法（Y轴为例，x轴是一样的）

（1） window.pageYOffset:表示文档在垂直方向(相对于文档顶部的位置。)滚动的像素数。

（2）document.body.scrollTop 是通过访问 document.body 元素的 scrollTop 属性来获取文档在垂直方向上滚动的像素数。在一些浏览器中，这个属性是作用在 body 元素上。

（3）document.documentElement.scrollTop 是通过访问 document.documentElement 元素的 scrollTop 属性来获取文档在垂直方向上滚动的像素数。在一些浏览器中，这个属性是作用在 html 元素上。

六、元素的相关知识

1.元素的几何尺寸，返回值是一个对象（DOMRect）主要研究x、y、width、height，但这里的数值与前面的css中的数值意义不同

css中的top、right、botton、left相对于父级元素相应的值：

top：上边与父级的上边相聚的距离

left：左边与父级左边的边相距的距离

right：右边与父级右边的边相距的距离

botton：底边与父级底边的相距的距离

元素中的几何尺寸:也是相对于父级元素偏移相应的值

top：顶边距离父级元素底边的距离

left：左边距离父级元素右边的距离

right：右边距离父级元素左边的距离

botton：底边距离父级元素顶边的的距离

2.元素的位置

可以通过使用各个方向的属性和方法来操作元素的位置，尺寸和布局，下面是常用的各个方法和概念

（1）父级定位元素：offsetParent：返回最近的设置定位的父级元素

<style>
        .fa {
            position: relative;
        }
    </style>
    <div class="fa">
        <div class="son">
            <div class="text">11</div>
        </div>
    </div>
    <script>
        var box = document.querySelector(".text")

        console.log(box.offsetParent)
    </script>

因为text的父级元素（son）没有设置定位，就去父级的父级（fa）看是否设置了定位，设置了就返回该元素

（2）定位元素的偏移量：当前元素先对于已经定位的父级元素（若父级没有设置定位，就再找父级的父级，若还没有，再找父级的父级的父级，若都没有设置，则相对于浏览器）偏移一定的值

    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
            margin: 20px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 10px;
            top: 20px;
        }

        .text {
            width: 50px;
            height: 50px;
            background-color: orange;
        }
    </style>
    <div class="fa">
        <div class="son">
            <div class="text">11</div>
        </div>
    </div>
    <script>
        var box = document.querySelector(".text")
        console.log(box.offsetLeft)//10px
        console.log(box.offsetTop)//20px
    </script>

3.盒子模型：大概记纵向的，横向的就和纵向的原理一样

box.offsetParent:获取一个元素的最近的已定位祖先元素。

box.offsetTop：用于返回一个元素相对于其最近的已定位祖先元素的顶部边缘的像素距离。

box.offsetHeight：用于返回元素在垂直方向上的完整高度，包括元素的内容、内边距(padding)和边框(border)的尺寸，但不包括外边距(margin)。

box.clientHeight：用于返回一个元素的内容区域的高度，包括内边距(padding)，但不包括垂直滚动条的高度和边框(border)的尺寸

box.clientTop：返回元素上边框的宽度

box.scrollTop获取或设置一个元素垂直滚动的距离

<div id="container" style="height: 200px; overflow-y: scroll; border: 1px solid black; padding: 10px;">
        <div id="element" style="height: 300px;">
            <p>秋天，是一年中的金色季节，也是自然界变换的时刻。随着夏季的渐行渐远，凉爽的秋风吹拂着大地，树叶由绿转黄，红叶跳跃般飘落。在这个季节里，大自然呈现出一幅宜人的景象。

                秋天的特点是天气凉爽，宜人宜人。人们可以享受户外活动，散步在绚丽多彩的枫叶铺满的小径上，感受丰收的气息。此时，农田里的庄稼一片金黄，稻谷、玉米等各种农作物成熟了，农民们收获的喜悦弥漫在空气中。

                秋天也是个适合品味美食的季节。人们可以品尝到各种丰收的水果和蔬菜，如苹果、橙子、柿子、南瓜等。此外，秋天还有一些独特的节日，如中秋节和感恩节，人们可以与家人和朋友共度美好时光，共享美食和欢乐。

                然而，秋天也有它的寂寥和留恋。枯黄的树叶飘落，随风飘散；鸟儿渐渐迁徙南方，留下寂静的林间。而人们也会感叹夏日的离去，期待明年的春天的到来。

                总的来说，秋天是一个丰收与感恩的季节，
            </p>
        </div>
    </div>
    <script>
        const element = document.getElementById("element");//获取id属性为element的元素
        console.log(element.clientHeight); // 输出: 300     ：获取element元素的内容区域的高度（content+padding）
        console.log(element.clientTop); // 输出: 0 (通常为 0，因为默认情况下不显示边框)
        console.log(element.scrollTop); // 输出: 0    ：获取或设置一个元素垂直滚动的距离
    </script>

其他的相关元素的操作