js获取元素_js根据属性获取元素

1.根据id获取元素

document.getElementById(“id属性的值”);

返回值是一个元素对象，即当前id的对象

2.根据标签名字获取元素

document.getElementsByTagName(“标签的名字”);

返回值是一个伪数组；

3.根据name属性的值获取元素

document.getElementsByName(“name属性的值”);

返回值是一个伪数组

4.根据类样式的名字获取元素

document.getElementsByClassName(“类样式的名字”);

返回值是一个伪数组

5.根据选择器获取元素

1.document.querySelector(“选择器”);可获取css中的一个后代document.querySelector(‘.box .bx’);document.querySelector(‘.box ul’);

返回值是一个元素对象

2.document.querySelectorAll(“选择器”)；可获取css中的多个后代document.querySelectorAll(‘.box li’);

返回值是一个伪数组

总结：

一、记忆区分方法

Elements中有“s”，英文意思（复数形式）所以不止一个，调用时当然要用数组的形式啦

**Element只有一个，即唯一的一个元素，没有其他元素和他相同

**

同理：根据选择器获取元素，一个带有“all”（不止一个），一个不带（只有一个）。调用方式显然一个有数组下标一个没有

二、选择父级的子类

1.获取父类

var obj=获取父类；

2.使用子类

obj.children[下标] 或 obj.child;

3.如果两个父盒子（分别是“.obj1”和“.obj2”）有相同的子类（“.same”），但你又想获取你想要的".obj1"的".same"

先获取父类：var obj1 = document.querySelector(‘.obj1’);

在获取子类：var same1 = obj1.querySelector(‘.same’);

三、获取css样式 、当前属性offset（动态）和 元素属性style（更改） scroll和client

1.样式obj.style.cssText = ;相当于直接在css里面修改样式

cssText 本质是什么？

cssText 的本质就是设置 HTML 元素的 style 属性值。

cssText的优势？

可以直接加important，style.top=“80px !important” 是加不上

一般情况下我们用js设置元素对象的样式会使用这样的形式：

var element= document.getElementById(“id”);element.style.width=”20px”;element.style.height=”20px”;element.style.border=”solid 1px red”;

样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。

使用cssText：

element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

这样就可以尽量避免页面reflow，提高页面性能。

cssText 返回值是什么？

cssText也有个缺点，会覆盖之前的样式。因此使用cssText时应该采用叠加的方式以保留原有的样式。另外，在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：document.getElementById(“d1”).style.cssText = “color:red; font-size:13px;”;alert(document.getElementById(“d1”).style.cssText);

在 IE 中值为：FONT-SIZE: 13px; COLOR: red

解决办法：

Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’

另外，这个属性在加有!important的行内样式时特别有用，比如，top:80px !important 。而用style.top=“80px !important” 是加不上的。

2.obj.offset+“属性” 和 obj.style.+“属性”

理解： 获取元素大小位置用 offset， 给元素更改值用style。“属性”可以是width、heigth、left、top等等

offset+“属性”（边距和边框）

（不带单位），理解成当前属性，是只读属性,不可赋值

console.log(box.offsetWidth); //输出数字。

行内,内嵌,外部样式可以获取, 是只读属性,不可赋值

1,offsetWidth的实际宽度

​ offsetWidth = width + 左右padding + 左右boder

2,offsetHeith的实际高度

​ offsetHeith = height + 上下padding + 上下boder

3，offsetTop实际宽度

​ offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框、内边缘的距离。 如果父级都没有定位，则分别是到body 顶部 和左边的距离

4，offsetLeft实际宽度

​ offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

style. +“属性”

获取属性并修改属性，理解成最终属性。

console.log(box.style.width); //不输出,只能获取行内样式表

在有输出时,（带有单位）,不含padding+border,且是可读写属性,可以赋值

3.obj. client .+“属性” 和 obj.scroll.+“属性”

一、clientWidth和clientHeigh 、 clientTop和clientLeft（边距）

​ 1，clientWidth的实际宽度

​ clientWidth = width+左右padding

​ 2，clientHeigh的实际高度

​ clientHeigh = height + 上下padding

​ 3，clientTop的实际宽度

​ clientTop = boder.top(上边框的宽度)

​ 4，clientLeft的实际宽度

​ clientLeft = boder.left(左边框的宽度)

二、scrollWidth和scrollHeight 、 scrollTop和scrollLeft （包括隐藏区域）

​ 1，scrollWidth实际宽度

​ scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）。

​ 2，scrollHeight的实际高度

​ scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）

​ 3，scrollTop

​ scrollTop :内容层顶部 到 可视区域顶部的距离。

​ 持续获取高度的方式：

​ window.addEventListener(‘scroll’, ()=>{var scrollTop = document.documentElement.scrollTop；});

​ 4，scrollLeft

​ scrollLeft:内容层左端 到 可视区域左端的距离.

三、getBoundingClientRect

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。

```

rectObject = object.getBoundingClientRect();

```

2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;

原生js获取left值和top值的三种方法

在用js做动态效果时，通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告，就要不停的获取元素的top和left属性值。

需要注意的事：取值的元素必须要设置position:absolute绝对定位属性，才能取的到left值。

**第一种方法，**比较简单，就是直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。

**第二种方法 只读，**可以获取所有style样式，存在兼容性问题，在标准浏览器中可以通过window.getComputedStyle(对象，null).left方法来获取元素的left和top的属性值。而在IE浏览器上则是采用obj.currentStyle.left方法来获取属性值。

**第三种方法，**使用obj.offsetLeft来获取对象的left属性值,用obj.offsetTop来获取对象的top属性值。

四、获取属性 （getAttribute）

getAttribute()是HTML DOM的一个方法，用以获取HTML元素的属性（如id，name，type以及其他自定义属性）。同理，setAttribute()、removeAttribute()都是对HTML元素的属性进行操作。