获取元素
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');
方法二：
1.可获取css中的一个后代：querySelector
获取大盒子里面的一个后代类：document.querySelector('.box .bx');
获取大盒子里面的一个标签： document.querySelector('.box ul');
2.获取css中的多个后代：querySelectorAll
获取大盒子的不止一个后代：document.querySelectorAll('.box li');
三、获取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：元素左边到视窗左边的距离;
四、获取属性 （getAttribute）
getAttribute()是HTML DOM的一个方法，用以获取HTML元素的属性（如id，name，type以及其他自定义属性）。同理，setAttribute()、removeAttribute()都是对HTML元素的属性进行操作。
嘿嘿，是不是被标题吸引啦，原因是最近听说“标题党”这个词，想皮一下试试感觉。其实是菜鸟总结啦，欢迎大家补充。
网友评论