Skip to content

Commit 07ef634

Browse files
code-warriorcode-warrior
committed
🔔 Add compareDocumentPosition example
1 parent 946b104 commit 07ef634

2 files changed

Lines changed: 34 additions & 0 deletions

File tree

‎tutorials/javascript/compare-document-position/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JavaScript — compareDocumentPosition</title>
6+
<style>body {line-height: 1.2;} code {background-color: #eee; padding: 4px; border: 1px solid #ddd; border-radius: 4px;}</style>
7+
</head>
8+
<body>
9+
<h1>JavaScript — <code>compareDocumentPosition</code></h1>
10+
<p><strong></strong></p>
11+
<div></div>
12+
<script src="js/app.js" defer></script>
13+
</body>
14+
</html>

‎tutorials/javascript/compare-document-position/js/app.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*jslint browser, es6, single, devel, multivar */
2+
/*global window */
3+
4+
window.onload = function () {
5+
'use strict';
6+
7+
let body = document.body,
8+
div = document.querySelector('div'),
9+
p = document.querySelector('p'),
10+
strong = document.querySelector('strong'),
11+
output = '';
12+
13+
output += '<p><code>body.compareDocumentPosition(p)</code> returns ' + body.compareDocumentPosition(p) + '</p>';
14+
output += '<p><code>p.compareDocumentPosition(body)</code> returns ' + p.compareDocumentPosition(body) + '</p>';
15+
output += '<p><code>div.compareDocumentPosition(p)</code> returns ' + div.compareDocumentPosition(p) + '</p>';
16+
output += '<p><code>p.compareDocumentPosition(div)</code> returns ' + p.compareDocumentPosition(div) + '</p>';
17+
output += '<p><code>strong.compareDocumentPosition(strong)</code> returns ' + strong.compareDocumentPosition(strong) + '</p>';
18+
19+
div.innerHTML = output;
20+
};

0 commit comments

Comments
 (0)