Javascript basic tutorial: how to get html elements
Get html element by ID
document.getElementById()
Example:
<!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>Please note that if we put the script statement in the head tag, then we will output null
Then below we will look at an innerHTML to obtain the content of the html element
Let’s write an example below:
<!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>In this way, we will output a php Chinese website, then execute the js code, and then pop up the php Chinese website
We can also reassign sum, the code is as follows:
<!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>Friends, open the firebug debugging page, you can press the shortcut key F12
Find HTML elements by tag name
<!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>returns an array collection, see the following code:
<!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); //返回一個(gè)數(shù)組集合
//alert(sum.length);//返回?cái)?shù)組數(shù)量
//alert(sum[0]); //返回HTMLLIElement li的節(jié)點(diǎn)對(duì)象
//alert(sum.item(0)); //同上，意義一樣
//alert(sum[0].tagName); //返回第一個(gè)標(biāo)簽的名字
alert(sum[0].innerHTML); //顯示第一個(gè)標(biāo)簽的內(nèi)容
</script>
</body>
</html>Let’s look at the following, how to get the body node object, but In html, we only have one pair of bodies, and there is no second pair of bodies
The code is as follows
<!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
Get elements with the same name and return an object array
The following code:
<!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>Note that the difference between IE Firefox and Google Chrome is supported by both Firefox and Google. The name attribute in IE browser is not an attribute of div itself, so IE ignores it. Generally, name will be used when we apply it to forms. More
getElementsByClassName
<!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>Returns an object. Let’s look at a piece of code:
<!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")[0];
alert(sum);
</script>
</body>
</html> 
