Elements must know important attributes and methods

Get into the habit of writing together! This is the 11th day of my participation in the "Nuggets Daily New Plan·April Update Challenge", click to view the event details

In the last article, we learned the custom Video operation in Angular . If the reader pays attention, he will find that in this article, we start to operate the attributes of the element scrollLeft, which is the same attribute that is very commonly used. So what other properties and methods are more important? What does it mean? Now let's get to the topic.

className
classList
clientLeft / clientTop
clientWidth / clientHeight
scrollLeft / scrollTop
Element.getBoundingClientRect()
append() / remove()
querySelector() / querySelectorAll()
scroll()
mousedown() / mousemove() / mouseup()
touchstart() / touchmove() / touchend()

important attributes

1. className

One of the ways we can style an element is through the class name, we can also get the element's class name directly:

let elementDom = document.getElementById('demo');

elementDom.className === 'active'; // 获取 class
elementDom.className = 'active'; // 赋值 class
复制代码

2. classList

Of course we can also get a list of the classes of the entire element.

<div id="demo" class="demo1 demo2"></div>
复制代码

let demo = document.getElementById("demo");
console.log(demo.classList);
// {
//   "0": "demo1",
//   "1": "demo2"
// }
复制代码

After getting the list of classes, we can add, remove, replaceperform operations on it, which is very useful in our usual actual development.

3. clientLeft / clientTop

clientLeftIndicates the width of the left border of the clientTopelement and the height of the upper border of the element. Both are read-only properties that return integer values.

// 用法
let demo = document.getElementById('demo');
demo.clientLeft;
demo.clientHeight:
复制代码

4. clientWidth / clientHeight

clientWidth 表示元素的宽度，其宽度包含 content 内容宽度和左右两侧的 padding 值；clientHeight 表示元素的高度，其高度包含 content 内容高度和上下两侧的 padding 值。

// 用法
let demo = document.getElementById('demo');
demo.clientWidth;
demo.clientHeight;
复制代码

5. scrollLeft / scrollTop

scrollLeft 表示返回元素水平滚动的像素，以左侧的 left margin 开始算； scrollTop 表示返回元素垂直滚动的像素，以顶侧的 top margin 开始算。

// 用法
let demo = document.getElementById('demo');
demo.scrollLeft;
demo.scrollTop;
复制代码

重要方法

1. Element.getBoundingClientRect()

getBoundingClientRect() 方法返回元素的top, right, bottom 和 left是相对视口的位置。

// 用法
let demo = document.getElementById('demo');
demo.getBoundingClientRect()
复制代码

你还可以通过这个方法获取元素其左上角顶点相对可视窗口的坐标(x, y)及其元素的宽度和高度～

2. append() / remove()

对元素进行追加 append 和移除 remove。

// 用法
let demo = document.getElementById('demo');
let p = document.createElement('p');
p.id = 'demoP';
demo.append(p);

let oEl = document.getElementById('demoP');
demo.remove(pEl);
复制代码

3. querySelector() / querySelectorAll()

querySelector 方法是对指定的筛选器进行过滤查找元素。我们一般用document.getElementById 获取 document.getElementByClassName 的方法去查找，难免有些作用范围有限，必须有 id 或 className。

<div id='demo'>
  <p>1</p>
  <p>2</p>
</div>
复制代码

// 用法
let demo = document.body.querySelector("div#demo");
let demoP = demo.querySelector("p"); // 返回第一个 p 元素
let demoPs = demo.querySelectorAll("p"); // 返回满足条件的 nodeList，这里是全部的 p 元素
复制代码

4. scroll()

scroll 滚动事件，表示元素滚动到页面特定的坐标 (x-coord, y-coord)。

// 用法
let demo = document.getElementById('demo');
demo.scroll({
  top: 100,
  left: 100,
  behavior: 'smooth'
})
复制代码

scrollIntoView() 也很常用。

5. mousedown() / mousemove() / mouseup()

在 pc 端的开发中，我们监听用户的事件最后的三个方法，在 Angular 中自定义 Video 操作文章中我们已经使用过。

mousedownIndicates the event of your mouse press, which mousemovemeans the mouse is pressed and moved, and the mouseleavemouse is released. In the process of mobilemobile terminal development, it corresponds to touchstart() / touchmove() / touchend() .

The functions mentioned in the next article will be implemented in combination with the knowledge points mentioned in this article, please understand~

【End】✅