学习周记 HTML DOM

最新推荐文章于 2021-06-20 23:38:44 发布

「理想家」

最新推荐文章于 2021-06-20 23:38:44 发布

阅读量120

点赞数 5

本文链接：https://blog.csdn.net/Estheri/article/details/116269360

版权

HTML DOM

HTML DOM 树
使用DOM改变HTML
使用DOM改变CSS
- - 改变 HTML 样式
小练习：全选练习

HTML DOM 树

在这里插入图片描述

使用DOM改变HTML

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时间</title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

效果：
在这里插入图片描述

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。如需改变 HTML 元素的内容，使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了元素的 src 属性：

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

使用DOM改变CSS

改变 HTML 样式

document.getElementById(id).style.property=新样式

<p id="p1">what's up man</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p1").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

结果展示：
在这里插入图片描述

小练习：全选练习

** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中

* 创建一个页面
    ** 复选框和按钮
        - 四个复选框表示爱好
        - 还有一个复选框操作 全选和选不选，也有一个事件

    ** 三个按钮，分别有事件
        - 全选                
        - 全不选
        - 反选

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				border: 1px solid #000;
				width: 400px;
			}
		</style>
		<script type="text/javascript">
			function change(){
				var all = document.getElementById("checkbox_all");
				var cb = document.getElementsByName("personid");
				if(all.checked){
					for(var i = 0; i < cb.length; i++){
						cb[i].checked = true;
					}
				}else{
					for(var i = 0; i < cb.length; i++){
						cb[i].checked = false;
					}
				}
			}
			function reverse(){
				var cb = document.getElementsByName("personid");
				for(var i = 0; i < cb.length; i++){
					if(cb[i].checked){
						cb[i].checked = false;						
					}else{
						cb[i].checked = true;	
					}
				}	
			}
		</script>
	</head>
	<body>		
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>全选<input type="checkbox" id="checkbox_all" onclick="change()"/></th>
				<th>姓名</th>
				<th>年龄</th>
				<th>手机号</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="personid" /></td>
				<td>王辰淇</td>
				<td>20</td>
				<td>12344568907</td>
			</tr>
			<tr>
				<td><input type="checkbox"  name="personid"/></td>
				<td>尼古拉斯凯奇</td>
				<td>30</td>
				<td>15033455666</td>
			</tr>
			<tr>
				<td><input type="checkbox"  name="personid"/></td>
				<td>朱一龙</td>
				<td>18</td>
				<td>15033444457</td>
			</tr>
			<tr>
				<td><input type="checkbox"  name="personid"/></td>
				<td>古一法师</td>
				<td>1234</td>
				<td>00898799000</td>
			</tr>
		</table>
		
		<input type="button"  value="反选" onclick="reverse()"/>
	</body>
</html>