2017-09-04 8 views
-1

これはよくある質問です。 bodyタグにonload()を使う方法、DOM要素の後にスクリプトを置いて自己呼び出し関数を使う方法などすべてを試しました。 しかし、私の要素は未定義です。body.getElementsByTagNameは本文の後にスクリプトを配置するときにundefinedを返します

P.S:document.getElementsByTagName('')document.getElementById('')で置き換えられます。何故ですか?私の疑いの両方を説明してください。ここに私の簡単なコード

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body onload="loadHandler()"> 
 
    <p>Drag me!</p> 
 
    <script type="text/javascript"> 
 
    function loadHandler() { 
 
     document.getElementsByTagName('p').setAttribute('draggable', true); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

+0

「getElementsByTagName」はgetElementByIdが単一の要素を返すだけの配列を返すためだと思います。 私は遅すぎました:D – Patte

+0

'getElementsByTagName'が' HTMLCollection'を返しました。あなたは表記のような配列を使ってその要素にアクセスできます。 –

答えて

1

getElementsByTagNameのは、結果の配列、getElementByIdのようなだけではなく、単一の結果を返します。 getElementsByTagName( 'p')[0]を使用してください。

+0

ええ私もそれを試みた....それは助けにはなりません...私は他の提案を私に与えることができます – Nivetha

+0

'それは役に立たない'とはどういう意味ですか?私は自分でチェックしたが、それはこのエラーを取り除く。 – Vossen

+0

これは今働いています...私はタイプミスがありました。 – Nivetha

3

getElementsByTagName(名前が示すように)は要素の配列を返します。あなたが最初のものをしたい場合は、最初のものを取る。ドラッグは、おそらくdocumentationは、デフォルトでいくつかの光

を当てるかもしれませんが、動作していない理由については

.highlight{ color: red}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body onload="loadHandler()"> 
 
    <p>Drag me!</p> 
 
    <script type="text/javascript"> 
 
    function loadHandler() { 
 
     var elem = document.getElementsByTagName('p')[0]; 
 
     elem.setAttribute('draggable',true) 
 
     elem.classList.add('highlight'); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

、テキストのみの選択、画像、およびリンクをドラッグすることができます。他のすべての要素については、このcomprehensive exampleに示すように、ドラッグアンドドロップの仕組みが機能するようにondragstartイベントを設定する必要があります。

関連する問題