要素は重要な属性とメソッドを知っている必要があります

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して11日目です。クリックしてイベント詳細をご覧ください。

前回の記事では、Angularでのカスタムビデオ操作について学びました。読者が注意を払うと、この記事で、scrollLeft非常に一般的に使用されているのと同じ属性である要素の属性を操作し始めることがわかります。では、他にどのようなプロパティとメソッドがより重要なのでしょうか。どういう意味ですか？それでは、トピックに取り掛かりましょう。

クラス名
classList
clientLeft / clientTop
clientWidth / clientHeight
scrollLeft / scrollTop
Element.getBoundingClientRect（）
append（）/ remove（）
querySelector（）/ querySelectorAll（）
スクロール（）
mousedown（）/ mousemove（）/ mouseup（）
touchstart（）/ touchmove（）/ touchend（）

重要な属性

1. className

要素のスタイルを設定する方法の1つは、クラス名を使用することです。要素のクラス名を直接取得することもできます。

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

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

2. classList

もちろん、要素全体のクラスのリストを取得することもできます。

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

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

クラスのリストを取得した後、add, remove, replace他の。これは、通常の実際の開発で非常に役立ちます。

3. clientLeft / clientTop

clientLeft要素の左の境界線の幅とclientTop要素の上部の境界線の高さを示します。どちらも整数値を返す読み取り専用プロパティです。

// 用法
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 操作文章中我们已经使用过。

mousedownマウスが押されたイベントを示します。これmousemoveは、マウスが押されて移動され、マウスが離されたことを意味しますmouseleave。mobile携帯端末開発の過程で、touchstart（）/ touchmove（）/ touchend（）に対応します。

次の記事で説明する機能は、この記事で説明する知識ポイントと組み合わせて実装されます。ご理解ください〜

【終了】✅