、
一、元素对象属性
- Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)。
1.1 .id
- Element.id 属性返回指定元素的id 属性，该属性可读写.
1.2 .className
- className 属性用来读写当前元素节点的 class 属性。
- 它的值是一个字符串，每个 class 之间用空格分割.
1.3 classList
1.4 .innerHTML
- Element.innerHTML 属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML> 和 <body>元素.
1.5 innerText
- innerText和 innerHTML类似，不同的是 innerText 无法识别元素，会直接渲染成字符串.
二、Element获取元素位置
2.1 Element.clientHeight, Element.clientWidth
- Element.clientHeight 属性返回一个整数值，表示元素节点的 CSS 高度(单位像素)，只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。
- 除了元素本身的高度，它还包括padding部分，但是不包括 brder、margin 。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。
<!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>.box{width: 200px;height: 200px;border: 5px solid blue;padding: 10px;margin: 20px;background-color: greenyellow;}</style>
</head>
<body><div class = "box" id="box">我是一个块</div><script>var box = document.getElementById("box")
console.log(box.clientHeight)console.log(box.clientWidth)</script></body>
</html>
- Element.clientwidth 属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding ，如果有垂直滚动条，还要减去垂直滚动条的宽度。
- document.documentElement 的 clientHeight 属性，返回当前视口的高度(即浏览器窗口的高度)。 document.body 的高度则是网页的实际高度。
//视口高度（屏幕的大小）console.log(document.documentElement.clientHeight)//网页高度(网页内容占用的大小）console.log(document.body.clientHeight)
