JavaScript の基本チュートリアル: HTML 要素を取得する方法
IDでHTML要素を取得
document.getElementById()
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById</title>
</head>
<body>
<h2><a href="ipnx.cn">Javascript DOM</a></h2>
<p id="sp">php中文網(wǎng)</p>
<script type="text/javascript">
var sum = document.getElementById('sp');
document.write(sum);
</script>
</body>
</html>スクリプトステートメントをheadタグに入れるとnullが出力されることに注意してください
次に、以下では、html 要素のコンテンツを取得する innerHTML を見ていきます
例を書いてみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="sp">php中文網(wǎng)</p>
<script type="text/javascript">
var sum = document.getElementById("sp");
alert(sum.innerHTML);
</script>
</body>
</html>このようにして、php 中國語 Web サイトを出力し、js コードを?qū)g行して、 php 中國の Web サイト
私たちも同じことをします。合計を再割り當(dāng)てすることができます。コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="sp">php中文網(wǎng)</p>
<script type="text/javascript">
var sum = document.getElementById("sp");
sum.innerHTML="玩轉(zhuǎn)javascript";
alert(sum.innerHTML);
</script>
</body>
</html>友達、firebug デバッグ ページを開いて、ショートカット キー F12
を押してください。タグ名で HTML 要素を検索
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="sp">php中文網(wǎng)</p>
<script type="text/javascript">
var sum = document.getElementsByTagName("p");
document.write(sum);
</script>
</body>
</html>は配列コレクションを返します。次のコードを參照してください:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="sp">php中文網(wǎng)</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var sum=document.getElementsByTagName("li");
//alert(sum); //返回一個數(shù)組集合
//alert(sum.length);//返回數(shù)組數(shù)量
//alert(sum[0]); //返回HTMLLIElement li的節(jié)點對象
//alert(sum.item(0)); //同上，意義一樣
//alert(sum[0].tagName); //返回第一個標簽的名字
alert(sum[0].innerHTML); //顯示第一個標簽的內(nèi)容
</script>
</body>
</html>次に、ボディ ノード オブジェクトを取得する方法を見てみましょう。ただし、HTML にはボディのペアが 1 つだけあり、2 番目のボディはありません。ボディのペア
コードは次のとおりです
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="sp">php中文網(wǎng)</p>
<script type="text/javascript">
var sum=document.getElementsByTagName("body")[0];
alert(sum);
</script>
</body>
</html>getElementsByName
同じ名前の要素を取得し、オブジェクト配列を返します
次のコード: 注意IE Fox と Google Chrome 違いは、Firefox と Google の両方がこれをサポートしていることです。name 屬性は IE ブラウザーの div の屬性ではないため、一般的に、IE はフォームで name を使用することが多いです
。getElementsByClassName
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div name="test">php 中文網(wǎng)</div>
<script type="text/javascript">
var sum=document.getElementsByName("test")[0];
alert(sum);
</script>
</body>
</html>はオブジェクトを返します。コードの一部を見てみましょう:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div name="test" class="dv">php 中文網(wǎng)</div>
<script type="text/javascript">
var sum=document.getElementsByClassName("dv");
alert(sum);
</script>
</body>
</html> 
