Get html element by ID
document.getElementById()
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById</title>
</head>
<body>
<h2><a href="m.sbmmt.com">Javascript DOM</a></h2>
<p id="sp">php中文网</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中文网</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中文网</p>
<script type="text/javascript">
var sum = document.getElementById("sp");
sum.innerHTML="玩转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中文网</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中文网</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>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中文网</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 中文网</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 中文网</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 中文网</div>
<script type="text/javascript">
var sum=document.getElementsByClassName("dv")[0];
alert(sum);
</script>
</body>
</html>Next Section