JavaScript高级编程--元素获取、视口相关、元素几何尺寸和位置

本文链接：https://blog.csdn.net/retager/article/details/132411311

DOM操作

DOM 是document object model （文档对象模型），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口

把文档中的代码翻译成一个对象模型，在这个模型中所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象

这些对象之间在文档模型数据结构中存在某种关系: 根节点父子节点同胞节点等等

只有一个根节点document
除了根节点外所有节点都有唯一的一个父节点
document是window对象的属性
全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象BOM操作会在接下来的知识点讲到它不属于标准的接口但是浏览器厂商都提供了几乎一样的功能
元素的属性也是独立节点叫属性节点但是不是元素节点的子节点

获取元素的方式

系统的方法

在系统中有提供几种方法供我们使用

//旧方法
document.getElementById//查找速度最快 id名查找
document.getElementsByClassName//类名查找
document.getElementsByName//name属性值查找
document.getElementsByTagName//标签查找
//H5出的新方法
document.querySelector//按照文档流查找到的第一个 无论深浅
document.querySelectorAll//查找到的所有

//不建议使用
直接使用标签的id作为节点对象引用

系统的直接获取

系统也有提供直接获取的方式

document.body  //body标签
document.forms  //form表单们
document.anchors //锚点们
document.images //图片们
document.links //链接们
document.URL //当前文档的网址
//在以前的版本中，锚点使用name，现在使用的“#id”可以看作是优化，升级的

元素关系获取

在HTML5中有很多关系，如兄弟，子代等，通过它们之间的关系，我们也能够获取到元素

<body>
    <div id="fa">
        <div class="son" id="chr1">son1</div>
        <div class="son" id="chr2">son2</div>
        <div class="son" id="chr3">son3</div>
    </div>
</body>

在上图中，存在父子关系，兄弟关系等

//父级 父元素和父节点是同一个
var re=document.getElementById("chr2").parentElement//父元素
var re2=document.getElementById("chr2").parentNode//父节点
console.log(re,re2)

//子级 子元素和子节点不一定是同一个
var son1=document.getElementById("fa").children//返回值是子元素们 没有返回空数组
console.log(son1)
var son2=document.getElementById("fa").childNodes //返回值是子节点们 没有返回空数组
console.log(son2)

在子元素和子节点的结果对比中，我们会发现有txt存在，且有四个

因为标签后面我们能够放入文字等，值得一提的是，回车也算一个字符，所以多出了一个txt

//兄弟
var re = document.getElementById("chr2").nextSibling//下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("chr2").nextElementSibling//下一个兄弟元素 没有返回null
console.log(re)
var re=document.getElementById("chr2").previousSibling//上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("chr2").previousElementSibling //上一个兄弟元素 没有返回null
console.log(re)

//第1个子节点
var son1=document.getElementById("fa").firstChild
var son2=document.getElementById("fa").firstElementChild
console.log(son1,son2)
			
			
//最后一个子节点
var son1=document.getElementById("fa").lastChild
var son2=document.getElementById("fa").lastElementChild

如果要知道是父元素中的第几个，需要自己实现

        Object.prototype.index = function () {
            var arr = this.parentElement.children
            for (let i = 0; i < arr.length; i++) {
                if (arr[i] === this) { return i }
            }
        }

        let box = document.getElementById("chr2")
        let index = box.index()
        console.log(box.parentElement.children[index] === box)

视口相关

什么是视口？窗口的可视区域就是视口

对于不同设备，视口的大小也会有所不同

窗口的可视区域尺寸

查看视口的尺寸(会受窗口缩放影响)
window.innerWidth/window.innerHeight// bom操作，IE8及IE8以下不兼容
document.documentElement.clientWidth/clientHeight//标准模式下(<!DOCTYPE html>，渲染模式)，任意浏览器都兼容
document.body.clientWidth/clientHeight//适用于怪异/混杂模式下的浏览器
document.compatMode//可区分标准模式与否。(BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启)

显然，上图的方法各有限制，那么如何兼容？

兼容做法:
    let cWidth,cHeight;
	if (document.compatMode == "BackCompat") {
		cWidth = window.innerWidth||document.body.clientWidth;
		cHeight =window.innerHeight||document.body.clientHeight;
	} else {
		//document.compatMode == "CSS1Compat"
		cWidth = window.innerWidth||document.documentElement.clientWidth;
		cHeight = window.innerHeight||document.documentElement.clientHeight;
	}

窗口滚动到指定位置

要想让窗口在一开始就滚动到指定位置，我们需要用到以下方法

window.scrollTo(0,600)
window.scroll(0,600)	
scrollBy(0,50);

前两个方法功能类似，用法都是将x,y坐标传入，实现滚动到指定位置，而scrollBy()会在之前的数据基础上做累加

scrollBy(0,50);
scrollBy(0,50);
scrollBy(0,50);
scrollBy(0,50);

其效果等同于

scrollBy(0,200);

el.scrollIntoView 方法能滚动到指定元素可见,调用元素的底部会尽量与视口的顶部齐平,也不一定，主要是能不能滚，能滚多远，参数默认为true，将元素和视口的上边缘对齐; 如果传递参数false，则将元素的下边缘和视口的下边缘对齐（el为元素）

页面滚动的距离

window.pageXOffset/window.pageYOffset //bom操作，IE8及IE8以下不兼容
document.body.scrollLeft/scrollTop
document.documentElement.scrollLeft/scrollTop

兼容做法为

兼容做法:let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

兼容做法:let sX=window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft

元素的几何尺寸及位置

元素的几何尺寸

元素隐藏状态下获取不到相关信息

//1.获取元素的几何尺寸
el.getBoundingClientRect();
该方法返回一个对象，对象里边有 left,top,right,bottom,height,width属性

//2.获取视觉高宽,可完全替代getBoundingClientRect()方法
el.offsetWidth //(width+paddingLeft+paddingRight+boderLeft+boderRight)
el.offsetHeight

left和 top代表该元素左上角的 X和 Y坐标，right和 bottom代表元素右下角的 X和 Y坐标，返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离，height和 width属性老版本 IE并未实现

不过，js中 bottom 是底边距离body顶部的距离，top 是上边距离body顶部的距离，right 是右边距离body左边的距离，left 是左边距离body左边的距离；CSS中style的 bottom 是底边距离body底部的距离，top 是上边距离body顶部的距离，right 是右边距离body右边的距离，left 是左边距离body左边的距离

元素的位置

dom.offsetParent//返回最近的定位父级元素，如无，返回body元素，document.body.offsetParent为 null ，继续调用会报错

dom.offsetLeft，dom.offsetTop//对于无定位父级的元素，返回相对文档的坐标；对于有定位父级的元素返回相对于最近的有定位的父级的坐标。注意：与自己是否是定位元素无关

封装一个求元素相对于文档的坐标:

Object.prototype.offset = function() {
	let parent1 = this.offsetParent; //获取上一级定位元素对象
	let x=this.offsetLeft
	let y=this.offsetTop
	while (parent1 != null) {
		x += parent1.offsetLeft;
		y += parent1.offsetTop;
		parent1 = parent1.offsetParent;
	}
	return {x,y};
}