記事とコードは [Github ウェアハウス: https://github.com/timerring/front-end-tutorial ]にアーカイブされています。または、 javascriptに返信することで公開アカウント [AIShareLab]を取得することもできます。

記事ディレクトリ

導入
- コンセプト
DOMオブジェクトを取得する

導入

厳密に言えば、JavaScript 段階で学習する知識のほとんどは ECMAScript の知識体系に属しており、ECMAScript (ES と呼ばれる) は、変数、データ型、式、ステートメント、関数などの一連の言語標準仕様を提供します。文法規則。ECMAScript によって指定されます。ブラウザは ECMAScript 仕様のほとんどを実装し、これをベースにいくつかの便利な機能を拡張しており、これらの拡張内容を Web API と呼びます。

ECMAScript はブラウザーで実行され、Web API と組み合わされるのが実際の JavaScript です。Web API の核となるのは DOM と BOM です。

詳細: ECMAScript 仕様は常に更新されており、多くの異なるバージョンがあります。初期のバージョン番号は、ECMAScript 3 や ECMAScript 5 のように番号順に番号付けされています。その後、バージョン番号が高速になるため、年がバージョン番号として使用されます。 ECMAScript 2017 、 ECMAScript 2018 などの更新速度この形式の ECMAScript 6 は 2015 年にリリースされ、EMCAScript 2015 と呼ばれることがよくあります。

JavaScript の歴史に関する詳細な資料。

DOM (Document Object Model - Document Object Model ) は、任意の HTML または XML ドキュメントをレンダリングし、操作するための API です。HTML 文書全体の各タグ要素をオブジェクトとして扱い、その中には多数のプロパティやメソッドが含まれており、これらのプロパティを操作したりメソッドを呼び出したりすることで、HTML の動的な更新を実現し、Web ページの特殊効果やユーザーインタラクションを実現するための技術サポートを提供します。。

つまり、DOM は HTML を動的に変更するために使用され、その目的は Web ページの効果とユーザーインタラクションを開発することです。

コンセプト

DOM ツリー

HTML 文書は、ドキュメントツリーまたは DOM ツリーと呼ばれるツリー構造で直感的に表示され、ドキュメントツリーはタグ間の関係を直感的に反映します。

DOMノード

ノードはドキュメントツリーの一部であり、各ノードは DOM オブジェクトであり、主に要素ノード、属性ノード、テキストノードなどに分かれています。(各ノードには対応する一連の属性があります)

[要素ノード] は実際には HTML タグであり、上図に示すようにhead、、div、bodyなどはすべて要素ノードに属します。
a[属性ノード]とは、上図のタグの属性hrefやdivタグの属性など、HTMLタグ内の属性を指しますclass。
title[テキストノード] は、タグ内のテキストなど、HTML タグのテキストコンテンツを指します。
[ルートノード] は特にhtmlラベルを指します。
他の…

書類

documentこれは、DOM に特別に使用される組み込み JavaScript オブジェクトであり、いくつかのプロパティとメソッドが含まれており、documentDOM 学習の中核となります。

<script>
  // document 是内置的对象
  // console.log(typeof document);
  // 1. 通过 document 获取根节点
  console.log(document.documentElement); // 对应 html 标签
  // 2. 通过 document 节取 body 节点
  console.log(document.body); // 对应 body 标签
  // 3. 通过 document.write 方法向网页输出内容
  document.write('Hello World!');
</script>

DOMオブジェクトを取得する

括弧内には文字列が必要です。つまり、引用符で囲まれ、その中に CSS セレクターが記述されている必要があります。

querySelector ()条件を満たす最初の要素
querySelectorAll ()条件を満たす要素のコレクションは擬似配列を返します(配列には長さとインデックス番号がありますが、pop()、push() などの配列メソッドはありません)
他の方法について学ぶ
1. getElementById(document.getElementById特別に要素型ノードを取得、idタグの属性に従って検索)
2. getElementsByTagName(ラベルに従って要素のクラスを取得します。たとえば、getElementsByTagName('div')ページ内のすべての div を取得します)
3. document.getElementsByClassName ( 'w ')(クラス名をもとに要素を取得し、ページのクラス名をすべて取得しますw)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      
      
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="box">123</div>
  <div class="box">abc</div>
  <p id="nav">导航栏</p>
  <ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <script>
    // 1. 获取匹配的第一个元素
    // const box = document.querySelector('div')
    const box = document.querySelector('.box') // 类似类选择器
    console.log(box)
    const nav = document.querySelector('#nav') // 类似id选择器
    console.log(nav)
    nav.style.color = 'red'
    // 1. 我要获取第一个小 ulli
    const li = document.querySelector('ul li:first-child')
    console.log(li)
    // 2. 选择所有的小li
    // const lis = document.querySelectorAll('ul li')
    // console.log(lis)
    // 1.获取元素
    const lis = document.querySelectorAll('.nav li')
    // console.log(lis)
    for (let i = 0; i < lis.length; i++) {
      
      
      console.log(lis[i]) // 遍历返回的伪数组，输出每一个小li对象
    }
    const p = document.querySelectorAll('#nav')
    // console.log(p)
    // p[0].style.color = 'red'
  </script>
</body>
</html>

すべての DOM オブジェクトには、nodeTypeノードタイプを検出するために使用されるプロパティが含まれています。

JavaScript Web API (1)

記事ディレクトリ

導入

コンセプト

DOM ツリー

DOMノード

書類

DOMオブジェクトを取得する

おすすめ