您的位置：首页 > 编程语言 > Java开发

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

2018-01-03 17:09 417 查看
JavaScript

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

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

如：

<script>

function changetext(id)

{

id.innerHTML="谢谢";

}

</script>

2.HTML的事件属性中；

如onclick:

<h1 onclick="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 onclick="changetext(this)">请点击该文件</h1>
代码如下：
<html>

<head>
<title>第三个网站</title>
</head>

<body>
<p id="infro">Hello World!</p>

<script>
function changetext(id)
{
id.innerHTML="谢谢！";
}
</script>
<h1 onclick="changetext(this)">请点击该文本</h1>

</body>

</html>
运行结果如下：





栗子：

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

2.展示登录onclick事件；

3.修改为alert(1);
如下图所示：



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript dom
相关文章推荐
新的分享
章节导航