VUEが/私たちはデータマッピング操作が動作するDOM達成するのを助ける反応するが、まだ多くは、DOM APIのシーンを使用していたがある、私はあなたの次のリストを与えることが多いDOM APIで表示されるUIライブラリの一部（書き込みビジネスコードは、以下でより行うことができます） 。
MutationObserver
DOM要素がコールバックをトリガし、変更を監視することができ、変更を監視している：プロパティ（属性）/テキスト（CharacterDataを）、子孫ノード（たchildList /サブツリー）を監視するためしばらくのサポート、
簡単な例
//登録モニター、新しい新しいMutationObserver =オブザーバーalertlet（（）=> {一度変更されます
アラート（ '変更'）
}）; // observer.observe（エルを、{たchildList：真の監視を開始し 、サブツリー：真}） ; //停止監視、リリース資源observer.disconnect（）
のコードをコピー
どこ一般的に使用されていますか？
一般的要素のような、成功したコールバックがトリガされた後の追加、親要素に追加されているかどうかを監視するために使用される圧延荷重、で使用される、空腹のUIに成功負荷を圧延後のコールバックを登録するために使用されます。
github.com/ElemeFE/ele...
独自のプラグインの前に書かれたスクロールコンテナ要素の増分変化を監視するためにそれを使用します
github.com/any86/any-s...
より詳細な説明については、MDNを参照してください - MutationObserver
互換性
node.contains（otherNode）
これは、着信ノード（otherNode）このノード（ノード）は、ノードの子孫かどうかを指示するブール値を返します。
簡単な例
//要素本体要素とbody要素の子孫かどうかかどうかを判断する。
isInPage（ノード）関数{
falseに戻り（ノード=== document.body）を:? Document.body.contains（ノード）;
}
コードをコピー
どこ一般的に使用されていますか？
一般的に使用されるポップアップメニュークリックで閉じられているが、それはポップオーバーのUIコンポーネントですが、そのうちの一つが、その後、空腹など、メニューを終了することを約束していない場合、メニューそのものかどうか、メニューの要素が決定含まれています：
github.com/ElemeFE/ele...
互換性
注意(node.compareDocumentPosition)
私はそのcaniuseが互換性のない互換性のあるモバイル端末が含まれて見始めた、と後でcaniuseに友人を掘った私を修正だけでサポートされていない未知のではないマークし、そう彼の互換性についての学生は、以下のコメントを知らせてください場合、私は、次をテストする必要があり感謝します。
私はこのcompareDocumentPositionを見つけたこの記事の執筆時点では、彼が含まよりもはるかに優れた互換性のだろうが、私は練習していなかったので、私がテストした後にした後、この記事に更新されます。
element.getBoundingClientRect（）：RECT
获取元素相对浏览器左上角的偏移量以及元素尺寸信息, 返回值是一个rect对象, 其中包括: left: 元素左上角距离浏览器左上角的X轴偏移. top: 元素左上角距离浏览器左上角的Y轴偏移. width: 元素宽度. height: 元素高度. right: 元素右下角距离浏览器左上角的X轴偏移. bottom: 元素右下角距离浏览器左上角的Y轴偏移. x: 同left. y: 同top.
常用在哪里?
一般用来实现"图片懒加载", 比如vue-lazyload用他来监测当前图片是否在可视区:
github.com/hilongjw/vu…
兼容性
注意
getBoundingClientRect会受到transform的影响, 比如你的元素设置了transform:scale(2), 那么getBoundingClientRect返回的width会是元素实际宽度的2倍, top等位置信息也会因为元素尺寸变化而发生变化.
insertAdjacentElement
可以通过不同的参数实现jQuery的append | prepend | after | before.
简单实现
下面我举例对比说明, 先看下dom结构:
<div id="parent"></div> 复制代码
实现append(beforeend), 插入到指定元素内部的尾部
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等价于 $(parent).append(node);
parent.insertAdjacentElement('beforeend', node);
复制代码
实现prepend(afterbegin), 插入到指定元素内部的头部
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等价于 $(parent).prepend(node);
parent.insertAdjacentElement('afterbegin', node);
复制代码
实现after(afterend), 插入到指定元素后面
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等价于 $(parent).after(node);
parent.insertAdjacentElement('afterend', node);
复制代码
实现before(beforebegin), 插入到指定元素前面
聞かせて親=のdocument.getElementById（ '親'）; せノード=のdocument.createElement（「スパン」）。 //等价于$（親）.after（ノード）。 parent.insertAdjacentElement（ 'beforebegin'、ノード）; 复制代码
どこ一般的に使用されていますか？
このようなオーバーフロー受けないようにするために、親要素としてダイアログコンポーネント：私はこのような問題を解決するための前に、身体にテールアセンブリに移動し、プラグVUE書き込まれた遮断された隠された影響は、任意の身体の任意のコンポーネントに移動させることができます。場所：
github.com/any86/vue-c...
互換性