JavaScriptでノードを作成する方法は何ですか-フロントエンドQ&A-php.cn

JavaScriptでノードを作成する方法は何ですか

青灯夜游

リリース： 2021-10-13 17:00:45

オリジナル

14985 人が閲覧しました

JavaScript でノードを作成するメソッド: 1. createElement() メソッドは要素ノードを作成できます; 2. createTextNode() メソッドはテキストノードを作成できます; 3. createAttribute() メソッドは属性ノードを作成できます。

JavaScriptでノードを作成する方法は何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

#JavaScript でノードを作成するメソッド

1.createElement() メソッド: 要素ノードの作成

ドキュメントオブジェクトの createElement() メソッドを使用して、パラメーターで指定されたラベル名に基づいて新しい要素ノードを作成し、新しく作成された要素への参照を返します。

var element = document.getElement("tagName");

ログイン後にコピー

このうち、element は新しい要素への参照を表し、createElement() はドキュメントオブジェクトのメソッドです。このメソッドにはパラメータが 1 つだけあり、これを使用してドキュメントオブジェクトを指定します。作成された要素のタグ名。

[例 1] 次のコードは、現在の文書に段落記号 p を作成し、変数 p に格納します。この変数は要素ノードを表すため、そのnodeType属性値は1に等しく、そのnodeName属性値はpに等しくなります。

var p = document.createElement("p");  //创建段落元素
var info = "nodeName:" + p.nodeName;  //获取元素名称
info += ", nodeType:" + p.nodeType;  //获取元素类型，如果为1则表示元素节点
console.log(info);

ログイン後にコピー

createElement() メソッドを使用して作成された新しい要素は、ドキュメントに自動的に追加されません。この要素をドキュメントに追加する場合は、appendChild()、insertBefore()、または replaceChild() メソッドも使用する必要があります。

[例 2] 次のコードは、新しく作成した p 要素を body 要素に追加する方法を示しています。要素がドキュメントツリーに追加されると、すぐに表示されます。

var p = document.createElement("p");  //创建段落元素
document.body.appendChild(p);  //增加段落元素到body元素下

ログイン後にコピー

2. createTextNode() メソッド: テキストノードの作成

ドキュメントオブジェクトの createTextNode() メソッドを使用して、テキストノードを作成します。使用法は次のとおりです。

document.createTextNode(data)

ログイン後にコピー

パラメータデータは文字列を表します。

例

次の例では、新しい div 要素を作成し、そのクラス値を red に設定して、ドキュメントに追加します。

var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);

ログイン後にコピー

DOM 操作などの理由により、テキストノードにテキストが含まれない場合や、2 つのテキストノードが連続して表示される場合があります。この状況を回避するために、通常は親要素で Normalize() メソッドを呼び出して、空のテキストノードを削除し、隣接するテキストノードをマージします。

3. createAttribute() メソッド: 属性ノードの作成

ドキュメントオブジェクトの createAttribute() メソッドを使用して属性ノードを作成します。具体的な使用方法は次のとおりです。

document.createAttribute(name)

ログイン後にコピー

パラメータ名は、新しく作成された属性の名前を表します。

例 1

次の例では、align および value center という名前の属性ノードを作成し、ラベル

に属性 align を設定し、最後にそれぞれ 3 を使用します。このメソッドは、属性 align の値を読み取ります。

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

ログイン後にコピー

属性ノードは通常、要素の head タグ内にあります。要素の属性リストには要素情報が事前にロードされ、連想配列に格納されます。たとえば、次の HTML 構造を考えてみましょう。

<div id="div1" title="div"></div>

ログイン後にコピー

DOM がロードされると、HTML div 要素を表す変数 divElement は、これらの属性を名前と値のペアとして取得する関連コレクションを自動的に生成します。

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

ログイン後にコピー

従来の DOM では、img.src、a.href などの要素を通じて HTML 属性に直接アクセスするためにドット構文が一般的に使用されます。この方法は標準ではありませんが、すべてのブラウザでサポートされています。。

例 2

img 要素には src 属性があり、すべての画像オブジェクトには src script 属性があり、これは HTML の src 属性に関連付けられています。以下の両方の使用法は、さまざまなブラウザーで適切に機能します。

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>

ログイン後にコピー

同様のものには、onclick、style、href などがあります。 JavaScript スクリプトがさまざまなブラウザーで適切に動作できるようにするには、標準的な使用法を採用することをお勧めします。多くの HTML 属性は JavaScript によってマップされないため、スクリプト属性を介して直接読み書きすることはできません。

[推奨学習:

JavaScript 上級チュートリアル]

以上がJavaScriptでノードを作成する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。