JavaScript の基本チュートリアル: HTML 要素を取得する方法
IDでHTML要素を取得
document.getElementById()
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById</title>
</head>
<body>
<h2><a href="www.php.cn">Javascript DOM</a></h2>
<p id="sp">php中文网</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中文网</p>
<script type="text/javascript">
var sum = document.getElementById("sp");
alert(sum.innerHTML);
</script>
</body>
</html>このようにして、php 中国語 Web サイトを出力し、js コードを実行して、 php 中国の Web サイト
私たちも同じことをします。合計を再割り当てすることができます。コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="sp">php中文网</p>
<script type="text/javascript">
var sum = document.getElementById("sp");
sum.innerHTML="玩转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中文网</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中文网</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var sum=document.getElementsByTagName("li");
//alert(sum); //返回一个数组集合
//alert(sum.length);//返回数组数量
//alert(sum[0]); //返回HTMLLIElement li的节点对象
//alert(sum.item(0)); //同上，意义一样
//alert(sum[0].tagName); //返回第一个标签的名字
alert(sum[0].innerHTML); //显示第一个标签的内容
</script>
</body>
</html>次に、ボディ ノード オブジェクトを取得する方法を見てみましょう。ただし、HTML にはボディのペアが 1 つだけあり、2 番目のボディはありません。ボディのペア
コードは次のとおりです
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="sp">php中文网</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 中文网</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 中文网</div>
<script type="text/javascript">
var sum=document.getElementsByClassName("dv");
alert(sum);
</script>
</body>
</html>次のセクション<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById</title>
</head>
<body>
<h2><a href="www.php.cn">Javascript DOM</a></h2>
<p id="sp">php中文网</p>
<script type="text/javascript">
var sum = document.getElementById('sp');
document.write(sum);
</script>
</body>
</html>
