javascript (三) 操作页面

最新推荐文章于 2022-10-25 21:01:22 发布

久醉绕心弦，

最新推荐文章于 2022-10-25 21:01:22 发布

阅读量328

点赞数 1

分类专栏： javascript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_42262081/article/details/120351361

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM简介
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

HTML DOM 树
在这里插入图片描述
节点树中的节点彼此拥有层级关系
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的HTML。
如何改变 HTML 元素的内容 (innerHTML)如何改变 HTML 元素的样式 (CSS)？
如何对 HTML DOM 事件对做出反应？
如何添加或删除 HTML 元素？

1、获取标签的方式

通过 JavaScript操作 HTML 元素,可以使用内置对象document的方法来找到该标签。
以百度为例：
通过id：
在这里插入图片描述
通过css选择器：

2、操作标签内容

1.innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

修改文本：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="n">
			<h1>666</h1>
		</div>
		<script type="text/javascript">
			document.querySelector('#n').innerText='javascript'
		</script>
	</body>
</html>

在这里插入图片描述
读取节点：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="n">
			<h1>666</h1>
		</div>
		<script type="text/javascript">
				var res = document.querySelector('#n').innerHTML
				console.log(res)
		</script>
	</body>
</html>

在这里插入图片描述
由此可见，获取的是html的标签，而写入节点时也可以通过标签的形式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="n">
			<h1>666</h1>
		</div>
		<script type="text/javascript">
				document.querySelector('#n').innerHTML = '<input />'				
		</script>
	</body>
</html>

在这里插入图片描述
2.innerText 属性
获取文本：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="n">
			<h1>666</h1>
		</div>
		<script type="text/javascript">
				var res = document.querySelector('#n').innerText
				console.log(res)
		</script>
	</body>
</html>

在这里插入图片描述
修改文本原理与innerHTML一样。
3、操作标签属性

获取属性值：.属性、[属性]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com"></a>
		<script type="text/javascript">
				var res = document.querySelector('a').href
				var res1 = document.querySelector('a')['href']
				console.log(res)
				console.log(res1)
		</script>
	</body>
</html>

在这里插入图片描述
修改属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com">网址</a>
		<script type="text/javascript">
				document.querySelector('a').href = 'https://www.taobao.com'
		</script>
	</body>
</html>

在这里插入图片描述

4、修改css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id='user'>
		<script type="text/javascript">
				document.querySelector('#user').style.background = 'red'
				document.querySelector('#user').style.height = '30px'
		</script>
	</body>
</html>

在这里插入图片描述

5、事件绑定

onclick事件：点击了该 HTML 元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="work()">按钮</button>
		<script type="text/javascript">
				function work(){
					alert("666")
				}				
		</script>
	</body>
</html>

点击按钮会触发弹框
在这里插入图片描述
注意：由于页面上从上往下加载执行的，如果在元素未加载完成就执行javascript是会报错的，如果需要将javascript放在元素前面需要放在window.onload触发的函数里面。

window.onload在页面加载完成后执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
				window.onload = function(){
					var res = document.querySelector('#n').innerText
					console.log(res)
				}				
		</script>
	</head>
	<body>
		<div id="n">
			<h1>666</h1>
		</div>		
	</body>
</html>

久醉绕心弦，

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript (三) 操作页面

DOM简介通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。HTML DOM 树节点树中的节点彼此拥有层级关系父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的HTML。如
复制链接

扫一扫