WEB安全基础-Javascrp相关知识点之DOM

JavaScript

问题1：在哪些地方可以运行JavaScript？

1.HTML的<script></script>之间；

如：

<script>

function changetext(id)

{

id.innerHTML="谢谢";

}

</script>

2.HTML的事件属性中；

如onclick:

<h1 οnclick="changetext(this)">请点击该文本</h1>

3.浏览器的JavaScript控制台中；

问题2：JavaScript语法是否很复杂？

1.JavaScript遵循ECMAScript标准（ECMAScript包含了语法规范等）

2.语法很容易掌握，借用了C、Java的语法；

问题3：除了做网页的动态效果外，JavaScript还经常用来做什么？

1.JavaScript DOM

HTML源码已经完成，用JavaScript HTML DOM操作HTML；

用JS操作元素：
1.获取元素内容；

1.获取元素：getElementById():通过ID获取元素；

2.获取元素内容：.innerHTML:获取元素类容

如下：

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

<script>

x=document.getElementByID("intro");

alert("id为intro元素的文本是："+x.innerHTML);

</script>

PS:alert()方法在JavaScript中表示弹出一个警告框，可以用来展示信息；

栗子1：获取元素内容

使用浏览器打开百度

调出JavaScript控制台

展示通过ID获取HTML内容

登录框架

如下图所示：

console输入：document.getElementById("TANGRAM__PSP_10__form")后：

输入：document.getElementById("TANGRAM__PSP_10__form").innerHTML后

输入：alert(document.getElementById("TANGRAM__PSP_10__form").innerHTML)后：

2：修改元素内容

1.获取元素：getElementById():通过ID获取元素；

2.用“=”直接赋值（用.innerHTML通过ID获取元素）；

如下：

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

<script>

x=document.getElementById("intro");

x.innerHTML="Javascript改变HTML内容!";

</script>

栗子2：修改元素内容

如下图所示：

栗子3：修改一个HTML form元素内容

1.选定登录框元素，找到id；

2.获取此id内容，并修改为一个html的iframe框架（使用Console）

如：document.getElementById("XXXX").innerHTML="<iframe src='http://XXX.ZZZ.ZZZ'></iframe>" "<iframe src="http://XX.XXX.XXX"></iframe>"

如下图所示：

3.如何创建动态的HTML元素内容

用document.write();

如：

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

<script>

x=document.getElementById("intro");

document.write(Date());

</script>

代码如下：

<html><head>
<title>第二个网页</title>
</head><p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(Date());
</script><body>
</body></html>

运行结果如下：

栗子：

1.浏览器打开网站；

2.展示通过document.write方法动态写入HTML；

3.写入当前时间；

document.write(Date())

4.写入iframe；

document.write("<iframe src='XXX.XXX.XXX'></iframe>")

如下图所示：

4.如何让页面增加互动

当我们点击时，页面内容改变；点击事件onclick

如下：

<script>

function changetext(id)

{

id.innerHTML="谢谢!";

}

</script>

<h1 οnclick="changetext(this)">请点击该文件</h1>

代码如下：

<html><head>
<title>第三个网站</title>
</head><body>
<p id="infro">Hello World!</p><script>
function changetext(id)
{
id.innerHTML="谢谢！";
}
</script>
<h1 οnclick="changetext(this)">请点击该文本</h1></body></html>

运行结果如下：

栗子：

1.使用浏览器打开网站；

2.展示登录onclick事件；

3.修改为alert(1);

如下图所示：

WEB安全基础-Javascrp相关知识点之DOM相关推荐

WEB安全基础-Javascrp相关知识点之BOM
BOM(Browser Object Model) 问:如果想获取浏览器信息,操作浏览器行为怎么办? 答:使用Javascrp BOM. 栗子:让浏览器来警告用户: 1.警告弹框alert(); 2. ...
WEB安全基础-PHP相关
PHP相关 php代码在服务器上进行执行,以HTML形式返回给浏览器: 默认扩展名:.php 文件可包含:HTML.JavaScript.PHP代码问:PHP是什么? 答:PHP:Hypertext ...
WEB安全基础-HTML相关知识
HTML相关 JS:为网站添加各式各样的动态功能,为用户提供更流畅美观的动态效果. CSS:解决内容与表现分离的问题. HTML:包含网页的实际内容. HTML源代码 <html> < ...
计算机基础计算机网络相关知识点整理
计算机基础计算机分类超级计算机工业控制计算机网络计算机个人计算机嵌入式计算机计算机硬件-CPU 计算机指标参考指标:主频.缓存.核数 CPU分类按厂商:intel AMD 按接口:L ...
WEB安全基础-SQL相关
数据库软件兼容一些主要的SQL关键词操作:SQL语言的私有扩展: 创建数据库:CREATE DATABASE websecurity; 查看数据库:SHOW databases; 切换数据库:USE ...
Get Offer —— 渗透测试岗试题汇总（Web相关知识点）
点赞后看,养成习惯喜欢的话可以点个关注哟你们的点赞支持对博主们来说很重要哦 !!! 为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 00 前情提要 01 Web相关知识点 1.漏洞类 2.情 ...
HTML相关知识点总结
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 目录简介 HTML文档 ...
web前端基础知识查漏补缺,JavaScript面试题,赶紧收藏
1介绍js的基本数据类型 js一共六种基本数据类型,分别是 undefined null boolean number string ,还有es6新增的symbol 和 es10新增的bigint. ...
2018-2019-2 网络对抗技术 20165322 Exp9 Web安全基础
2018-2019-2 网络对抗技术 20165322 Exp9 Web安全基础目录实验内容与步骤 (一)Webgoat安装 (二)SQL注入攻击 1.命令注入(Command Injection ...

WEB安全基础-Javascrp相关知识点之DOM

WEB安全基础-Javascrp相关知识点之DOM相关推荐

最新文章

热门文章