4 DOMオブジェクト(注

DOMオブジェクト

A、DOM簡単

DOM(ドキュメントオブジェクトモデル)ドキュメントオブジェクトモデルドキュメント:ドキュメントのタグタイプ(HTML、など)

DOM文書は、すべてのコンテンツタイプ(ラベル、テキスト、属性)をオブジェクトにカプセル化されているマークされています

操作対象のプロパティやメソッドにより、操作の目的を達成するか、HTMLの表示効果を変更します。

DOMツリー

<html>
    <head>
        <title>文档标题</title>
    </head>
    <body>
        <a href="">我的链接</a>
        <h1>
            我的标题
        </h1>
    </body>
</html>

各タグは、DOMツリーノードオブジェクト要素にロードされます。

各タグの属性は、DOMノードオブジェクトの属性ツリーにロードされます

各タグの経験のコンテンツはDOMノードツリーオブジェクトにロードされるテキストです

全体のDOMツリーは、DOMオブジェクトその文書ノードオブジェクトです。

HTML文書はメモリにロードされたDOMオブジェクトを生成します

DOMツリー機能:

確かにルートがあります

各ノードは、ノードオブジェクトであります

共通ノードとの関係:親子関係

テキストノードオブジェクトは、子ノードを持たない - リーフノード

各ノードは、親ノード、ゼロ個以上の子ノードを持っています

唯一のルートノードは親を持ちません


第二に、要素オブジェクトに4つの方法を取得します

1、getElementById();

によってエレメントIDオブジェクト対応する要素を取得し

ヌルが返されない場合

var t1 = document.getElementById("t1");

2、geElementsByName();

要素により、name属性の要件を満たすためにすべての要素を取得します。

戻り値の配列、空の配列を見つけることができないリターン

var arr = document.getElementsByName("hobby");

3、getElementsByTagName();

要素により、エレメント名プロパティの要件を満たすためにすべての要素を取得します。

戻り値の配列、空の配列を見つけることができないリターン

var arr = document.getElementsByTagName("li");

4、getElementsByClassName();

要素により、クラスプロパティの要件を満たすためにすべての要素を取得します。

戻り値の配列、空の配列を見つけることができないリターン


第三に、共通の要素オブジェクトの属性

1、値

要素の値を変更します。

元素对象.value //获取元素对象的value属性值
元素对象.value = 属性值 //设置元素对象的属性值
var t1 = document.getElementById("t1");
t1.value = "你好"

2、クラス名

スタイルの要素を変更します。

そして、同様の使い方値

3チェック

アイデンティティのチェックボックス

HTMLは、=「確認」にチェック真JSを返し、falseを指定

t1.checked = true

4、innerHTMLプロパティ

SUMMARY操作体要素

t1.innerHTML = "算法算法"	//设置标签内容体
t1.innerHTML +="sfaf"	//追加内容体信息
公開された35元の記事 ウォンの賞賛1 ビュー1833

おすすめ

転載: blog.csdn.net/qq_40672635/article/details/104969559