03. HTML开发基础

最新推荐文章于 2024-06-23 11:49:15 发布

yuhua_1997

最新推荐文章于 2024-06-23 11:49:15 发布

阅读量162

点赞数

分类专栏： # 01. Web基础知识文章标签： javascript html

本文链接：https://blog.csdn.net/yuhua_1997/article/details/108513811

版权

01. Web基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

运行JavaScript

a. HTML的<script></script>之间
b. HTML的事件属性中
	如onclick
c. 浏览器中JavaScript控制台

<html>
<head>
	<title>开发基础</title>
</head>

<body>
	<p id="intro">Hello World!</p>
	<script>
	function changetext(id)
	{
		id.innerHTML="thank you!";
	}
	</script>
	
	<h1 οnclick="changetext(intro)">please click here</h1>
	<h1 οnclick="changetext(this)">please click here</h1>
</body>
</html>

获取元素内容

第一步获取元素

getElementById();		通过ID 获取元素

第二步获取元素内容

.innerHTML				获取元素内容

Tips: alert()方法: 弹出警告框，展示信息

<html>
<head>
	<title>开发基础</title>
</head>

<body>
	<p id="intro">Hello World!</p>
	<script>
		x=document.getElementById("intro");
		alert(x.innerHTML);
	</script>
</body>
</html>

<!--
	如果想要修改元素内容的话，可以直接在获取完该元素之后，
	<script>
		x=document.getElementById("intro");
		x.innerHTML="Modifed text";
	<script>
-->

Example

<!-- 在网站里面直接修改代码，即时查看相应结果-->
可以在开发者模式-console里面直接输入命令
s-top-username :  百度首页登录的ID

> document.getElementById("s-top-username").innerHTML="<iframe src='https://dun.163.com'></iframe>"

Code
Result

创建动态的HTML元素内容

document.write()

<!-- 写入当前时间 -->
document.write(Date())

<!-- 写入iframe框架-->
document.write("<iframe src='https://www.163.com/'></iframe>")

增加响应

可以在事件属性中添加相应的响应

三种弹出框

Tips: 这几个弹窗通常用于简单调试和信息展示, 如XSS漏洞测试
警告弹窗alert()
确认弹窗confirm()
提示弹窗prompt()

获取Cookie

通常是服务器发放给客户用户端的一小段文本信息
用户输入账号密码成功登录网站后，网站会生成一个cookie给用户，当作用户凭证

<!-- 获取cookie -->
document.cookie

<!-- 写入cookie -->
document.cookie=""

获取信息

<!-- 获取屏幕信息-->
(window).screen

<!-- 获取页面URL信息-->
(window).location
(window).location.href

<!-- 将该页面换成另外一个页面-->
window.location.href="https://www.baidu.com"

获取浏览器信息

<!-- 浏览器信息-->
window.navigator
window.navigator.userAgent

操作窗口

window.open
window.close	<!-- 该命令现只能用于window.open创建的网页 -->

<!-- Example -->
window.open("https://www.baidu.com")

yuhua_1997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03. HTML开发基础

运行JavaScripta. HTML的<script></script>之间b. HTML的事件属性中如onclickc. 浏览器中JavaScript控制台<html><head> <title>开发基础</title></head><body> <p id="intro">Hello World!</p> <script> function
复制链接

扫一扫

专栏目录