Java教程

JavaScript（三）DOM

本文主要是介绍JavaScript（三）DOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.DOM定义

DOM： Document Object Model（文档对象模型）

利用document机制。

2.DOM操作HTML
2.1通过 id 查找 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h1>通过 id 查找 HTML 元素</h1>

<p id="intro">Hello World!</p>

<p>本例演示 <b>getElementsById</b> 方法。</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"来自 intro 段落的文本是：" + myElement.innerHTML;
</script>

</body>
</html>

在这里插入图片描述
2.2通过标签名查找 HTML 元素（从0开始）

<!DOCTYPE html>
<html>
<body>

<h1>通过标签名查找 HTML 元素</h1>

<p>Hello World!</p>

<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'第一段中的文本 (index 0) 是：' + x[0].innerHTML;
</script>
</body>
</html>

在这里插入图片描述

2.3通过类名查找 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h1>通过类名查找 HTML 元素</h1>

<p>Hello World!</p>

<p class="intro">DOM 很有用。</p>

<p class="intro">本例演示 <b>getElementsByClassName</b> 方法。</p>

<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>

</body>
</html>

在这里插入图片描述

2.4通过 CSS 选择器查找 HTML 元素（用的不多）

<!DOCTYPE html>
<html>
<body>

<h1>按查询选择器查找 HTML 元素</h1>

<p>Hello World!</p>

<p class="intro">DOM 很有用。</p>

<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>

<p id="demo"></p>

<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>

</body>
</html>

document.querySelectorAll
在这里插入图片描述

3.DOM操作CSS
3.1 style.color

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">我的标题</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
单击我！</button>

</body>
</html>

在这里插入图片描述在这里插入图片描述
3.2 style.visibility

<!DOCTYPE html>
<html>
<body>

<p id="p1">
这是文本。
这是文本。
这是文本。
这是文本。
</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>

在这里插入图片描述在这里插入图片描述
4.功能：隔行换色（重点）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1" width="500" height="200">
		<tr><td>d</td><td>3</td><td>2</td><td>r</td></tr>
		<tr><td>1</td><td>323</td><td>f</td><td>11</td></tr>
		<tr><td>2</td><td>434</td><td>a</td><td>22</td></tr>
		<tr><td>3</td><td>464</td><td>d</td><td>33</td></tr>
		<tr><td>4</td><td>5757</td><td>s</td><td>44</td></tr>
	</table>
	<script type="text/javascript">
		var trs = document.getElementsByTagName("tr");
		for(var i =0;i<trs.length;i++){
			if(i%2==0){
				trs[i].style.background="red";
			}
	}	
</script>
//建议放下面
</body>
</html>

在这里插入图片描述

----2021.10.06

这篇关于JavaScript（三）DOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航