✋🏻 👩‍👩‍👧 😼 表現力豊かなJavaScript：ドキュメントオブジェクトモデル ✖️ 🛰️ ⏭️

内容

ブラウザでWebページを開くと、HTMLソースコードを受け取り、（およそ）11章のパーサーがプログラムを解析したように解析します。ブラウザはドキュメント構造のモデルを構築し、それを使用して画面にページを描画します。

このドキュメントの表現は、JavaScriptサンドボックスで利用できるおもちゃの1つです。読んで変更することができます。リアルタイムで変更されます。修正するとすぐに、画面上のページが更新され、変更が反映されます。

文書構造

HTMLはネストされたボックスのコレクションと考えることができます。タグには他のタグが含まれているようで、タグにはテキストまたはタグが含まれています。前章のサンプル文書を次に示します。

 <!doctype html> <html> <head> <title>  </title> </head> <body> <h1>    </h1> <p>,       .</p> <p>    !   <a href="http://eloquentjavascript.net"></a>.</p> </body> </html>

このページの構造は次のとおりです。

ブラウザがドキュメントを表すために使用するデータ構造は、その形状を反映しています。各ボックスには、相互作用し、それに関するさまざまなデータを見つけることができるオブジェクトがあります-どのタグが表すか、どのボックスとテキストが含まれるか。このビューは、ドキュメントオブジェクトモデル、または略してDOMと呼ばれます。

グローバル変数ドキュメントを介してこれらのオブジェクトにアクセスできます。そのdocumentElementプロパティは、タグを表すオブジェクトを参照します。また、対応する要素のオブジェクトを含むheadプロパティとbodyプロパティも提供します。

木々

第11章の構文ツリーを思い出してください。それらの構造は、ブラウザドキュメントの構造に非常に似ています。各ノードは他のノードを参照でき、各ブランチは独自のブランチを持つことができます。この構造は、ネストされた構造の典型的な例であり、要素にはそれ自体に類似したサブ要素が含まれます。

データ構造は、分岐し、サイクルがなく（ノード自体を含むことはできません）、単一の発音された「ルート」を持つ場合、ツリーと呼ばれます。 DOMの場合、document.documentElementはルートとして機能します。

ツリーは計算科学でよく見られます。 HTMLドキュメントやプログラムのような再帰構造を表すことに加えて、通常、要素はソートされた1次元配列よりもソートされたツリーを見つけたり挿入したりするので、ソートされたデータセットを操作するために使用されます。

典型的なツリーには異なるノードがあります。 Eggの構文ツリーには、変数、値、およびアプリケーションがありました。アプリケーションには常に子ブランチがあり、変数と値は「葉」、つまり子ブランチのないノードでした。

DOMについても同じことが言えます。 HTMLタグを表す通常の要素のノードは、ドキュメントの構造を定義します。子ノードを持つ場合があります。そのようなノードの例はdocument.bodyです。これらの子ノードの一部は葉のように見える場合があります-たとえば、テキストまたはコメント（HTMLでは、コメントは文字の間に書き込まれます）。

各DOMノードオブジェクトにはnodeTypeプロパティがあり、ノードのタイプを決定するデジタルコードが含まれています。通常の要素の場合は1であり、これはdocument.ELEMENT_NODE定数プロパティとしても定義されています。テキストのフラグメントを表すテキストノードの場合、3（document.TEXT_NODE）です。コメントには8（document.COMMENT_NODE）があります。

つまり、ドキュメントツリーをグラフィカルに表す別の方法を次に示します。

葉はテキストノードであり、矢印はノード間の親子関係を示します。

標準

ノードタイプを表すために暗号数字を使用することは、JavaScriptスタイルのアプローチではありません。後ほど、DOMインターフェースの他の部分に会いますが、これも異質で扱いにくいようです。その理由は、DOMはJavaScript専用ではなかったからです。彼は他のシステムで使用できる言語に依存しないインターフェースを定義しようとしています-HTMLだけでなく、HTMLに似た構文を持つ汎用データ形式であるXMLでも。

それは不快であることが判明しました。標準は非常に有用なものですが、私たちの場合、言語からの独立性の利点はそれほど有用ではありません。さまざまな言語を使用する場合に馴染みのあるインターフェイスよりも、使用している言語によく適合したインターフェイスを使用することをお勧めします。

言語との不便な統合を示すために、DOMノードが持つchildNodesプロパティを検討してください。 lengthプロパティを持つ配列のように見えるオブジェクトと、子ノードにアクセスするための番号付きプロパティが含まれています。ただし、これはNodeList型のインスタンスであり、実際の配列ではないため、forEachのようなメソッドはありません。

貧弱なシステム設計に関連する問題もあります。たとえば、新しいノードを作成して、すぐにプロパティまたは子ノードを追加することはできません。最初に作成し、次に子を1つずつ追加し、最後に副作用を使用してプロパティを1つずつ割り当てます。 DOMと緊密に連携するコードは長く、見苦しく、繰り返しが多くなります。

しかし、これらの問題は致命的ではありません。 JavaScriptを使用すると、抽象化を作成できます。操作をより明確かつ簡潔に表現できる補助関数を簡単に作成できます。一般に、これらのタイプのツールは、ブラウザのプログラミングを目的とした多くのライブラリを提供します。

木の散歩

DOMノードには、近隣ノードへの多くのリンクが含まれています。これを図に示します。

ここには各タイプのリンクが1つだけ表示されていますが、各ノードには親ノードを指すparentNodeプロパティがあります。また、各要素ノード（タイプ1）には、子ノードを含む配列のようなオブジェクトを指すchildNodesプロパティがあります。

理論的には、これらのリンクのみを使用してツリーの任意の部分に移動できます。しかし、JavaScriptは多くの追加のヘルプリンクを提供します。 firstChildおよびlastChildプロパティは、最初と最後の子を指すか、子を持たないノードの場合はnullを含みます。 previousSiblingおよびnextSiblingは、隣接ノードを指します-現在のノードと同じ親のノードですが、現在のノードの直前または直後のリストにあります。最初のノードのpreviousSiblingプロパティはnullで、lastSiblingは最後のnullです。

このようなネストされた構造を使用する場合、再帰関数が役立ちます。次は、指定された文字列を含むテキストノードをドキュメントで検索し、見つかった場合にtrueを返します。

 function talksAbout(node, string) { if (node.nodeType == document.ELEMENT_NODE) { for (var i = 0; i < node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) > -1; } } console.log(talksAbout(document.body, "")); // → true

テキストノードプロパティnodeValueには、テキストの行が含まれています。

アイテムを検索する

親、子、兄弟の間でこれらのリンクをナビゲートし、ドキュメント全体を閲覧すると便利な場合があります。ただし、ドキュメントに特定のノードが必要な場合は、document.bodyから始めて、コード内のハードコーディングされたパスを愚かに並べ替えるのは非常に不便です。その際、プログラム内のドキュメントの正確な構造について想定します。後で変更することもできます。別の複雑な要因は、ノード間のスペースに対してもテキストノードが作成されることです。この例のドキュメントでは、bodyタグには3つの子（h1と2つのp）がありませんが、7つの子があります。

したがって、リンクからhref属性が必要な場合、プログラムに「document.bodyの6番目の子の2番目の子」のような記述をしないでください。「ドキュメント内の最初のリンク」と言うことができればより良いでしょう。そしてあなたができること：

 var link = document.body.getElementsByTagName("a")[0]; console.log(link.href);

すべての要素ノードにはgetElementsByTagNameメソッドがあり、このノードから（直接または非直接の子孫）特定のタグを持つすべての要素を収集し、配列のようなオブジェクトとして返します。

特定のノードを見つけるには、そのノードにid属性を設定し、document.getElementByIdメソッドを使用できます。

 <p>  :</p> <p><img id="gertrude" src="img/ostrich.png"></p> <script> var ostrich = document.getElementById("gertrude"); console.log(ostrich.src); </script>

3番目のメソッドはgetElementsByClassNameです。これは、getElementsByTagNameと同様に、要素ノードのコンテンツを検索し、指定された文字列をクラスに含むすべての要素を返します。

ドキュメントを変更する

DOM構造のほとんどすべてを変更できます。要素ノードには、それらを変更するために使用される一連のメソッドがあります。 removeChildメソッドは、指定された子ノードを削除します。ノードを追加するには、appendChildを使用してノードをリストの最後に追加するか、insertBeforeを使用して、最初の引数で渡されたノードを2番目の引数で渡される前に追加します。

 <p></p> <p></p> <p></p> <script> var paragraphs = document.body.getElementsByTagName("p"); document.body.insertBefore(paragraphs[2], paragraphs[0]); </script>

ノードは、ドキュメント内の1つの場所にしか存在できません。したがって、段落「One」の前に段落「Three」を挿入すると、実際にリストの末尾から削除して先頭に挿入し、「Three / One / Two」を取得します。ノードを挿入するすべての操作は、現在の位置（存在する場合）から消えます。

replaceChildメソッドは、ある子ノードを別の子ノードに置き換えるために使用されます。新しいノードと交換が必要なノードの2つのノードを受け入れます。置き換えられるノードは、メソッドを呼び出している要素の子である必要があります。 replaceChildとinsertBeforeはどちらも、最初の引数として新しいノードを受け取ることを想定しています。

ノードを作成する

次の例では、ドキュメント内のすべての画像（タグ）を、その画像の代替テキスト表現を定義する「alt」属性に含まれるテキストで置き換えるスクリプトを作成する必要があります。

これを行うには、画像を削除するだけでなく、新しいテキストノードを追加してそれらを置き換える必要があります。これを行うには、document.createTextNodeメソッドを使用します。

 <p> <img src="img/cat.png" alt="">  <img src="img/hat.png" alt="">.</p> <p><button onclick="replaceImages()"></button></p> <script> function replaceImages() { var images = document.body.getElementsByTagName("img"); for (var i = images.length - 1; i >= 0; i--) { var image = images[i]; if (image.alt) { var text = document.createTextNode(image.alt); image.parentNode.replaceChild(text, image); } } } </script>

行を受信すると、createTextNodeはタイプ3のDOMノード（テキスト）を提供します。これを画面に表示されるようにドキュメントに挿入できます。

写真のサイクルは、ノードのリストの最後から始まります。これは、ドキュメントが変更されると、getElementsByTagNameメソッド（またはchildNodesプロパティ）によって返されるノードのリストが常に更新されるためです。最初から始めた場合、最初の画像を削除するとリストによって最初の要素が失われ、サイクルの2番目のパスでiが1の場合、リストの長さも1になるため停止します。

「ライブ」ではなくノードの固定リストを操作する必要がある場合は、sliceメソッドを使用してそれを実際の配列に変換できます。

 var arrayish = {0: "", 1: "", length: 2}; var real = Array.prototype.slice.call(arrayish, 0); real.forEach(function(elt) { console.log(elt); }); // →  //

document.createElementを使用して、要素ノード（タイプ1）を作成できます。メソッドはタグ名を取り、指定されたタイプの新しい空のノードを返します。次の例では、要素ノードを作成し、残りの引数をその子として使用するeltツールを定義します。この関数は、引用に追加情報を追加するために使用されます。

 <blockquote id="quote">      .          ,        ,     . </blockquote> <script> function elt(type) { var node = document.createElement(type); for (var i = 1; i < arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } document.getElementById("quote").appendChild( elt("footer", "—", elt("strong", " "), ",     ", elt("em", "     "), ", 1950")); </script>

属性

リンク内のhrefなどの一部の属性要素には、同じ名前のオブジェクトプロパティを介してアクセスできます。これは、一般的に使用される限られた数の標準属性で可能です。

ただし、HTMLを使用すると、属性をノードに割り当てることができます。これは便利ですドキュメントに追加情報を保存できます。独自の属性名を考え出す場合、それらは要素ノードのプロパティには含まれません。代わりに、getAttributeメソッドとsetAttributeメソッドを使用してそれらを操作する必要があります。

 <p data-classified="secret">  00000000.</p> <p data-classified="unclassified">   .</p> <script> var paras = document.body.getElementsByTagName("p"); Array.prototype.forEach.call(paras, function(para) { if (para.getAttribute("data-classified") == "secret") para.parentNode.removeChild(para); }); </script>

発明された属性の名前の前に「data-」を配置して、他の属性と競合しないようにすることをお勧めします。簡単な例として、データ言語属性（言語）で<pre>タグ（「書式設定済み」、フォーマット済み-コードおよびプレーンテキストに使用）を検索する構文強調表示を作成し、その言語のキーワードを大まかに強調表示しようとします。

 function highlightCode(node, keywords) { var text = node.textContent; node.textContent = ""; //   var match, pos = 0; while (match = keywords.exec(text)) { var before = text.slice(pos, match.index); node.appendChild(document.createTextNode(before)); var strong = document.createElement("strong"); strong.appendChild(document.createTextNode(match[0])); node.appendChild(strong); pos = keywords.lastIndex; } var after = text.slice(pos); node.appendChild(document.createTextNode(after)); }

highlightCode関数は、<pre>ノードと、要素を含むプログラミング言語のキーワードに一致する通常のシーズン（グローバル設定が有効になっている）を受け入れます。

textContentプロパティを使用してノードのすべてのテキストを取得し、空の文字列に設定すると、ノードがクリアされます。キーワード表現のすべての出現をループし、それらの間に単純なテキストノードの形式でテキストを追加し、一致するテキスト（キーワード）を<strong>要素（太字）で囲んで追加します。

data-language属性を持つすべての<pre>要素をループ処理し、正しい規則性で各highlightCodeを呼び出すことにより、すべてのページコードを自動的に強調表示できます。

 var languages = { javascript: /\b(function|return|var)\b/g /* … etc */ }; function highlightAllCode() { var pres = document.body.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { var pre = pres[i]; var lang = pre.getAttribute("data-language"); if (languages.hasOwnProperty(lang)) highlightCode(pre, languages[lang]); } }

以下に例を示します。

 <p>   ,  :</p> <pre data-language="javascript"> function id(x) { return x; } </pre> <script>highlightAllCode();</script>

一般的に使用される属性であるクラスがあり、その名前はJavaScriptのキーワードです。歴史的な理由により、古いJavaScript実装がキーワードに一致するプロパティ名を処理できなかった場合、この属性はclassNameというプロパティを介して利用できます。 getAttributeメソッドとsetAttributeメソッドを使用して、実際の名前「クラス」でアクセスすることもできます。

要素の配置（レイアウト）

異なるタイプの要素が異なるように配置されていることに気づいたかもしれません。段落<p>や見出し<h1>などの一部は、文書の幅全体に引き伸ばされ、別々の行に表示されます。このような要素はブロック要素と呼ばれます。リンク<a>や太字のテキスト<strong>など、その他のテキストは、それらを囲むテキストと同じ行に表示されます。それらはインラインと呼ばれます。

どんなドキュメントでも、ブラウザは要素の配置、つまり誰もがそのタイプとコンテンツに基づいたサイズと位置を持つレイアウトを構築できます。このレイアウトは、ドキュメントの外観を作成するために使用されます。

要素のサイズと位置は、JavaScriptで確認できます。 offsetWidthプロパティとoffsetHeightプロパティは、要素が占めるサイズをピクセル単位で示します。ピクセルはブラウザの基本的な測定単位であり、通常は画面上の最小ポイントのサイズに対応しています。同様に、clientWidthとclientHeightは要素の内側のサイズを提供し、境界線（または、一部の言い方では縁石）をカウントしません。

 <p style="border: 3px solid red">    </p> <script> var para = document.body.getElementsByTagName("p")[0]; console.log("clientHeight:", para.clientHeight); console.log("offsetHeight:", para.offsetHeight); </script>

画面上の要素の正確な位置を見つける最も効果的な方法は、getBoundingClientRectメソッドです。画面の左上隅に対する要素の位置をピクセル単位で含むプロパティtop、bottom、left、およびright（top、bottom、left、およびright）を持つオブジェクトを返します。文書全体についてこのデータを取得する必要がある場合、現在のスクロール位置を追加する必要があります。これは、グローバル変数pageXOffsetおよびpageYOffsetに含まれています。

ドキュメントの解析は難しい作業です。パフォーマンス上の理由から、ブラウザエンジンは、ドキュメントが変更されるたびにドキュメントを再構築するのではなく、非常に長く待機します。これはどのように可能ですか。ドキュメントを変更するJavaScriptプログラムが終了すると、ブラウザーはページの新しいレイアウトを計算して、変更されたドキュメントを画面に表示する必要があります。プログラムが何かの位置またはサイズを要求し、offsetHeight型のプロパティを読み取るか、getBoundingClientRectを呼び出す場合、正しい情報を提供するためにレイアウトを計算する必要もあります。

定期的にDOMレイアウトを読み取り、DOMを変更するプログラムにより、ブラウザーはレイアウトを何度も再カウントするため、動作が遅くなります。次の例では、2000ピクセル幅のX文字の行を構築し、ランタイムを測定する2つの異なるプログラムがあります。

 <p><span id="one"></span></p> <p><span id="two"></span></p> <script> function time(name, action) { var start = Date.now(); //     action(); console.log(name, "", Date.now() - start, "ms"); } time("", function() { var target = document.getElementById("one"); while (target.offsetWidth < 2000) target.appendChild(document.createTextNode("X")); }); // →   32 ms time("", function() { var target = document.getElementById("two"); target.appendChild(document.createTextNode("XXXXX")); var total = Math.ceil(2000 / (target.offsetWidth / 5)); for (var i = 5; i < total; i++) target.appendChild(document.createTextNode("X")); }); // →   1 ms </script>

スタイル

さまざまなHTML要素の動作が異なることがわかりました。ブロックとして表示されるものもあれば、組み込みのものもあります。いくつかは視覚的なスタイルを追加します-のような

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}       ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>           . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script> 
          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
        .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

. , , . , , , . style (): <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> style (color), . : “color: red; border: none”. . , display , . <strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>. , – display: none . . , . JavaScript style. , . – , - . <p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> , font-family. JavaScript ( style["font-family"]), , : style.fontFamily HTML CSS (Cascading Style Sheets, ). – . : <style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p> «» , . , , , font-style . , . font-weight: normal, , , . , style, . CSS . .abc , “abc”. #xyz id “xyz” ( id ). .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main / pab#main { margin-bottom: 20px; } , . , , . , pa , p .a, . p > a {…} , . pa {…} , , . . , 2-3 . (, , ) – - DOM. querySelectorAll, document, -, , , . <p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script> getElementsByTagName, querySelectorAll . , . querySelector ( All) . , . , null, . position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , . . , . <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> position: relative. top left , . requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , . DOM , . JavaScript, . requestAnimationFrame – , , , . , ( lastTime), , . , , , . Math.cos Math.sin. , , . Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a. angle , animation. image. top Math.sin 20 – . left Math.cos 200, . . px , , ( , ems ). . – 0, . JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, . , , - . , , color display. JavaScript style. 6. HTML . HTML : <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> . : , . , 6, MOUNTAINS. buildTable, , , DOM, . , , , . Object.keys, , . , , style.textAlign "right". <style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script> getElementsByTagName . , ( ) , . , tagName. , . toLowerCase toUpperCase. <h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> , . . - . , . top left . , position. <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

.

, , . , , , . style ():

<p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p>

style (color), . : “color: red; border: none”.

. , display , .

<strong></strong>, <strong style="display: block"> </strong>, <strong style="display: none"> </strong>.

, – display: none . . , .

JavaScript style. , . – , - .

<p id="para" style="color: purple"> </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script>

, font-family. JavaScript ( style["font-family"]), , : style.fontFamily


HTML CSS (Cascading Style Sheets, ). – . :
<style> strong { font-style: italic; color: gray; } </style> <p> <strong> strong</strong> .</p>

«» , . , , , font-style .

, . font-weight: normal, , , . , style, .

CSS . .abc , “abc”. #xyz id “xyz” ( id ).

.subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /* p, a b, id main */ pab#main { margin-bottom: 20px; }

, . , , . , pa , p .a, .

p > a {…} , .
pa {…} , , .


. , 2-3 . (, , ) – - DOM.

querySelectorAll, document, -, , , .

<p> <span class="animal"></span></p> <p> </p> <p> <span class="character"> <span class="animal"> </span></span></p> <p> .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); // <p> // → 4 console.log(count(".animal")); // animal // → 2 console.log(count("p .animal")); // animal <p> // → 2 console.log(count("p > .animal")); // <p> // → 1 </script>

getElementsByTagName, querySelectorAll . , .

querySelector ( All) . , . , null, .


position . static, , . relative, , top left . absolute, «» – , . , left top , position static. , .

. , .

<p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script>

position: relative. top left , .

requestAnimationFrame animate , . animate requestAnimationFrame, . ( ) , 60 , .

DOM , . JavaScript, . requestAnimationFrame – , , , .

, ( lastTime), , . , , , .

Math.cos Math.sin. , , .

Math.cos Math.sin , (0, 0) . , 0 , , 2π ( 6.28) . Math.cos x , , Math.sin y. ( ) , 2π 0, – , a+2π , a.




angle , animation. image. top Math.sin 20 – . left Math.cos 200, .

. px , , ( , ems ). . – 0, .


JavaScript DOM. , JavaScript . DOM , . parentNode childNodes, .

, , - . , , color display. JavaScript style.



6. HTML . HTML :

<table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table>

. : , .

, 6, MOUNTAINS.

buildTable, , , DOM, . , , , . Object.keys, , .

, , style.textAlign "right".

<style> /* */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { // } document.body.appendChild(buildTable(MOUNTAINS)); </script>


getElementsByTagName . , ( ) , .

, tagName. , . toLowerCase toUpperCase.

<h1> <span>span</span> .</h1> <p> <span></span>, <span></span> spans.</p> <script> function byTagName(node, tagName) { // } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script>


,  .

. - .

, . top left . , position.

<img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

          . 
 
       ,         ,    .   ,   ,     ,    .     style (): 
 
 <p><a href="."> </a></p> <p><a href="." style="color: green"> </a></p> 
 
  style        (color),      .         : “color: red; border: none”. 
 
       . ,  display ,        . 
 
   <strong></strong>, <strong style="display: block">  </strong>,  <strong style="display: none">  </strong>. 
 
     ,      – display: none   .     .        ,         . 
 
  JavaScript          style.    ,      .   – ,        -   . 
 
 <p id="para" style="color: purple">  </p> <script> var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta"; </script> 
 
      ,  font-family.          JavaScript (   style["font-family"]),        ,        : style.fontFamily 
 
   
    HTML  CSS (Cascading Style Sheets,   ).   –    .      : 
 <style> strong { font-style: italic; color: gray; } </style> <p> <strong>  strong</strong>   .</p> 
 
 «» ,         .        ,    ,     ,    font-style  . 
 
      ,     .        font-weight: normal,     ,     ,   . ,       style,   . 
 
  CSS      .   .abc    ,     “abc”.   #xyz      id  “xyz” ( id     ). 
 
 .subtle { color: gray; font-size: 80%; } #header { background: blue; color: white; } /*  p,     a  b,  id   main */ pab#main { margin-bottom: 20px; } 
 
     ,     .   ,      ,       .  ,   pa  ,    p   .a,    . 
 
  p > a {…}     ,        . 
 pa {…}        ,   ,      . 
 
   
          .        ,         2-3 .          (, ,     ) –       -    DOM. 
 
  querySelectorAll,     document,   -,       ,   ,   . 
 
 <p>    <span class="animal"></span></p> <p>   </p> <p>  <span class="character"> <span class="animal"> </span></span></p> <p>   .</p> <script> function count(selector) { return document.querySelectorAll(selector).length; } console.log(count("p")); //   <p> // → 4 console.log(count(".animal")); //  animal // → 2 console.log(count("p .animal")); //  animal  <p> // → 2 console.log(count("p > .animal")); //   <p> // → 1 </script> 
 
      getElementsByTagName,  querySelectorAll   .   ,    . 
 
  querySelector ( All)   .  ,      .     ,  null,   . 
 
    
   position     .     static,  ,         .    relative,     ,    top  left        .    absolute,     «»  –  ,         .  ,   left  top             ,   position   static.     ,     . 
 
       .      ,    . 
 
 <p style="text-align: center"> <img src="img/cat.png" style="position: relative"> </p> <script> var cat = document.querySelector("img"); var angle = 0, lastTime = null; function animate(time) { if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat.style.left = (Math.cos(angle) * 200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate); </script> 
 
        position: relative.     top  left ,   . 
 
   requestAnimationFrame    animate  ,     .  animate    requestAnimationFrame,    .    ( ) ,        60   ,      . 
 
      DOM  ,         .        JavaScript,         .    requestAnimationFrame –   ,    ,       ,        . 
 
        ,      ( lastTime),     ,    .            ,     , ,     . 
 
         Math.cos  Math.sin.      ,    ,       . 
 
 Math.cos  Math.sin  ,           (0, 0)    .         ,  0      ,     ,     2π ( 6.28)     . Math.cos     x  ,       ,  Math.sin   y.  ( ) ,  2π    0,   –   ,  a+2π     ,   a. 
 
  
 
        
     angle     ,            animation.         image.  top   Math.sin    20 –     .  left   Math.cos    200,       . 
 
     .      px  ,   ,      (   , ems   ).   .          –      0,      . 
 
  
  JavaScript             DOM.       ,   JavaScript       . DOM    ,          .       parentNode  childNodes,      . 
 
       ,      ,     - .      , ,  color  display. JavaScript          style. 
 
  
   
         6. HTML   .   HTML     : 
 
 <table> <tr> <th>name</th> <th>height</th> <th>country</th> </tr> <tr> <td>Kilimanjaro</td> <td>5895</td> <td>Tanzania</td> </tr> </table> 
 
         .      :    ,    . 
 
   ,      6,     MOUNTAINS. 
 
   buildTable, ,      ,   DOM,  .       ,       ,          ,       .    Object.keys,  ,    . 
 
     ,       ,    style.textAlign  "right". 
 
 <style> /*      */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> <script> function buildTable(data) { //   } document.body.appendChild(buildTable(MOUNTAINS)); </script> 
 
     
  getElementsByTagName        .         ,      ( )   ,        . 
 
     ,   tagName. ,        .    toLowerCase  toUpperCase. 
 
 <h1>   <span>span</span> .</h1> <p>  <span></span>, <span></span>  spans.</p> <script> function byTagName(node, tagName) { //   } console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 </script> 
 
   
   ,            . 
 
      .   -  . 
 
     ,      .  top  left       .     ,         position. 
 
 <img src="img/cat.png" id="cat" style="position: absolute"> <img src="img/hat.png" id="hat" style="position: absolute"> <script> var cat = document.querySelector("#cat"); var hat = document.querySelector("#hat"); // Your code here. </script>

表現力豊かなJavaScript：ドキュメントオブジェクトモデル

内容

木々

標準