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

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

このチュートリアルの動作環境: 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 という名前の属性ノードを作成し、ラベル b390322fe69e754cc2d7247050226b6d に属性 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 サイトの他の関連記事を参照してください。