JavaScript は Web ページ要素のテキストと属性を読み取ります

JavaScript は、次のような Web ページ要素のテキストと属性を読み取るためのメソッドを提供します。 テキストの読み取り: innerText、textContent、value 属性の取得: getAttribute、dataset、style

JavaScript は Web ページ要素のテキストと属性を読み取ります

はじめに

JavaScript は、Web ページ要素のテキストと属性を読み取り、操作するためのさまざまなメソッドを提供します。この記事では、さまざまな方法を検討し、その使用法を説明するための実践的な例を示します。

テキスト コンテンツの読み取り

innerText: 子要素を含む要素内の表示テキストを取得します。

let text = document.getElementById("element").innerText;

textContent: innerText と似ていますが、隠しテキストも取得します。

let text = document.getElementById("element").textContent;

value: フォーム要素 (入力ボックスやテキスト領域など) の現在の値を取得します。

let value = document.querySelector("input[type=text]").value;

属性の取得

getAttribute(name): 指定された属性の値を取得します。

let href = document.getElementById("link").getAttribute("href");

dataset: data- プレフィックスを使用してデータ属性にアクセスします。

let username = document.querySelector("user-profile").dataset.username;

style: CSS スタイル プロパティにアクセスします。

let color = document.getElementById("element").style.color;

実際的なケース

ページ タイトルを取得します

const title = document.querySelector("head title").innerText;
console.log(title); // 输出：我的网站

フォーム入力値を設定します

document.querySelector("input[name=name]").value = "John Doe";

ボタンのデータ属性を読み取る

const button = document.querySelector("button");
const action = button.dataset.action;
console.log(action); // 输出：show-details

CSS クラスに基づいて要素を取得

const elements = document.querySelectorAll(".error");
elements.forEach((element) => {
  console.log(element.innerText);
});

結論

JavaScript は強力なツールを提供しますWeb ページ要素のテキストと属性を取得して操作します。これらのメソッドを理解することは、DOM コンテンツを動的に操作および操作するために重要です。上記の実践的な例を使用すると、これらのテクニックを独自のプロジェクトに簡単に適用できます。

以上がJavaScript は Web ページ要素のテキストと属性を読み取りますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。