DOMノードとその関連動作の関数

14417 ワード
javascript
DOMノードとその関連動作の関数
DOM:ドキュメントオブジェクトモデル
1、ノードの検索
  • document.getElemenntById(“id”):指定されたIDの要素ノードを返します.チェーン式呼び出しはできません.
    <div id = 'box'></div>
<script>
    let box = document.getElementById('box');
</script>
  • document.getElements ByClass Name(「クラス」):class属性を指定する要素ノードセット
    • を返す.
    <div class = 'box'></div>
<script>
    let box = document.getElementsByClassName('box');
</script>
  • Dcument.getElementsByName:指定された名前のオブジェクトを伴うセットNodeListオブジェクト
    • を返す.
    <html>
    <head>
        <script type="text/javascript">
            let x=document.getElementsByName("myInput");
        </script>
    </head>
    <body>
        <input name="myInput" type="text" size="20" />
        <input name="myInput" type="text" size="20" />
        <input name="myInput" type="text" size="20" /> 
    </body>
</html>
  • document.getElements ByTagName:指定された署名を持つすべての要素のセットHTMLClectionオブジェクトを返す.
    • document.getElementsByTagName('p')
  • document.qureySelector():指定された署名またはidまたはクラスの要素ノードに戻ります.はい、そうですよ.元のjsが効果を書く時によく使われます.
    let maxRight = document.querySelector('.max-img-right');
  • document.qureySelectorAll():指定された署名またはidまたはクラスの要素ノードのセットを返します.はい、そうです.オリジナルjsがいくつかの効果を書くときは、作成された同じタイプの要素ノード
    • のセットを取得するのによく使われます.
    let img = document.querySelectorAll('.box img');
    2、DOMオブジェクトノード遍歴:
    (1)、ノードツリーを巡回する
  • parent Node:親ノード、トップはdocument
    • です.
  • childNodes:要素を指定するすべてのサブノード
  • firstChild:要素を指定する第1のサブノード
  • lastChild:要素を指定する最後のサブノード
  • nextSibling:要素を指定する次の兄弟ノード
  • previous Sibling:要素を指定する前の兄弟ノード
    • 注意:
  • で取得されたノードは、要素内のラベル
    • だけでなく、改行などを含む.
    (2)、要素ノードツリーの遍歴:
  • parentElement:現在の要素の親要素ノード(一番上の部分が)
    • を返します.
  • children:現在の要素のサブノードのみを返します.ノード番号
  • firstElemenntChild:最初の要素ノード
    • を返します.
  • lastElementChild:最後の要素ノード
    • を返します.
  • nextElement Sibling:後の兄弟要素ノード
    • に戻る.
  • previous ElemenntSibling:前の兄弟要素ノードに戻る【注】IEは
    • をサポートしていません.
    3、要素の内容を取得する
    (1)innerHTML:一般的な要素は全部使用できます.
    box.innerHTML = '      ';
    (2)innerText:要素テキストの内容を変更するためのもの
    p.innerText = '        ';
    (3)value:一般的にinput元素値の取得に用いられますが、取得した値は一般的にStringタイプのものです.
    input.value = '         input    ';
    (4)outerHTML:innerHTMLのすべての内容を含む以外、対象ラベル自体も含まれていますので、あまり使われません.
    4、要素属性の取得と変更
    (1)属性の取得:
  • 標準属性:例えば、id、srcなどの
    • document.getElementById('box').attr = '   ';
document.getElementsByClassName('class')[0].className = '   ';
input.value = '   ';
img.src = '   ';
  • カスタム属性:data-name=nameなど、カスタム属性はget Attribute()またはdatasetで取得できます.setAttribute(属性、属性値)により任意の属性を設定します.hasAttribute()を使って、ある属性が指定要素に存在するかどうかを検出します.removeAttribute()を使用して指定された属性を削除します.
    • box.dataset.myattr;
box.getAttribute('data-name');
box.setAttribute('width','100');
box.hasAttribute('height');
box.removeAttribute('width');
  • は、class属性を定義する:class List.add()を通して要素にクラス属性を追加する;クラス名を削除します.classList.co ntains()を使って、ある要素の中に指定されたクラスの属性値があるかどうかを判断して、trueまたはfalse
    • に戻ります.
    box.classList.add('box');
box.classList.remove('box');
box.classList.contains('box');
    5、要素のスタイルを変更する
    style:行の中のスタイルのみを取得できます.埋め込みスタイルとチェーンのスタイルは取得できません.
    document.getElementById('box').style.height = '100px';
document.getElementById('box').style.display = 'none';
    6、作成ノード
  • は、様々な属性を設定することができますが、ページには表示されません.
  • は、ノードを追加するためにparent Node.apped Childを使用して、ページにレンダリングすることができる
    • .
    document.body.appendChild(document.createElement('img'));
    7、ノードのコピー、ノードの削除、ノードの置換
  • は、cloneNode()複製ノードを使用して、複製ノードは、その中のすべてのコンテンツをサブノード
    • を含む値を付与する.
  • は、RemoveChild()を使用してノードを削除し、親ノードからあるサブノードをカットすることに相当する.ノード自体が直接的に破壊される.
  • は、replacceChild()を使用してノード
    • を置換する.
    body.cloneNode(body.firstChild());
body.removeChild(body.lastChild());
box.remove();
body.replaceChild(box,input);
    js配列方法